How To Filter a Dynamic Entity Grid with MutationObserver in Power Pages

In Microsoft Power Pages, user interface components such as modals and data grids are loaded after the page has finished rendering. This can be a challenge when you want to manipulate these components immediately after they are added to the DOM. The manipulation we will cover in this blog will be filtering rows in a grid.

Together we will walk through creating a MutationObserver to detect when the entity grid is rendered and then apply a custom filter to show relevant rows.

The Problem

You have a lookup field that points to a table within your basic form, and this lookup contains a modal with an entity grid inside. The modal loads asynchronously, so trying to filter its rows on page load will not work since the grid has not appeared yet. You need a reliable way to detect when the modal is opened and then filter the entity grid based on a specific filter. This entity grid is what we will attach a MutationObserver to, which will then call a filter function.

The Solution

Use MutationObserver. The MutationObserver API provides a way to listen for changes in the DOM.

Here is an example of how to set one up:

function setupEntityGridObserver(valueToFilterGUID){
const observer = new MutationObserver(() => {
console.log("callback that runs when observer is triggered");
let grid = $(".modal-content .entity-grid");
filterEntityGridRows(grid, valueToFilterGUID);
});

In this snippet, a new MutationObserver is created. You will need to grab the value you want to filter before or within the function call. Every time a mutation is detected, such as a new child element is added, the function FilterEntityGridRows is called.

Next, you target the modal element you want to observe:

const element = document.querySelector("#modalID_lookupmodal");
if (element) {
observer.observe(element, {
subtree: true,
childList: true,
});
} else {
console.log("Element with id 'modalID _lookupmodal' not found.");
}
}

Here, you are watching the entire subtree of the modal for any new child elements, which includes the entity grid. Once the grid is added, the callback runs.

Filtering Grid Rows Based on a Value in Microsoft Power Pages

When the grid is detected, you want to filter it to only show rows that match a specific value. In my example, we are passing through ValueToFilterGUID. We will also be passing through the grid referenced in the SetupEntityGridObserver function.

Here's the filtering function:

function filterEntityGridRows(grid, valueToFilterGUID) {
grid.find(".view-grid tbody tr").each(function () {
let td = $(this).find("td[data-attribute=’ (schema name)xx_tablevalue’]");
let dataValue = td.attr("data-value");
if (dataValue) {
try {
let parsedData = JSON.parse(dataValue.replace(/"/g, '"'));
if (parsedData.Id !== valueToFilterGUID) {
$(this).hide();
}
} catch (error) {
console.error("Error parsing data-value:", error);
}
} else {
$(this).hide();
}
});
}

Let us break this down:

1. It loops through each row (<tr>) of the entity grid
2. It looks for a specific <td> column cell with the attribute “data-attribute=’schema name of attribute (example: xx_tablevalue)’”
3. The data-value contains JSON, but it is HTML-encoded using &quot; instead of double quotes. This is corrected using replace (/&quot;/g, '"').
4. Then the JSON is parsed, and the ID is compared against the ValueToFilterGUID
5. If there is no match, or if the value is missing, the row is hidden

How to Use It

To make it all work, simply call SetupEntityGridObserver() when the page loads:

window.addEventListener('load', setupEntityGridObserver);

or, if you are using jQuery:

$(document).ready(function () {
setupEntityGridObserver();
});

Summary

This approach ensures that your entity grid rows are filtered dynamically in a clean and efficient manner once the entity grid in a modal is loaded.

Working with New Dynamic

New Dynamic is a Microsoft Solutions Partner focused on the Dynamics 365 Customer Engagement and Power Platforms. Our team of dedicated professionals strives to provide first-class experiences incorporating integrity, teamwork, and a relentless commitment to our client’s success.

Contact Us today to transform your sales productivity and customer buying experiences.