[TIP] Filtering Subgrid Data in Dynamics 365 Portal Using JavaScript

 

Filtering Subgrid Data in Dynamics 365 Portal Using JavaScript

Introduction

In this blog, we'll explore a hands-on approach to filtering subgrid data in the Dynamics 365 Portal using JavaScript. While server-side plugins and client-side plugins offer solutions to similar challenges, sometimes a JavaScript-only solution is necessary due to limitations or specific project needs.

What You'll Learn

• Why filtering subgrid data can be challenging
• Why we chose a JavaScript-only solution
• How to implement this solution step-by-step

The Challenge

Filtering subgrid data in the Dynamics 365 Portal isn't as straightforward as it may seem. Here are the traditional methods and their limitations:

Server-side Plugin

A plugin would typically be the go-to solution for filtering data in Dynamics 365. However, in our case, the server-side plugin couldn't capture the filter parameters from the client-side.

JavaScript + Plugin

This combination could work, but again, the data passed from the JavaScript didn't reach the plugin in the expected format, making it unreliable.

Why a JavaScript-Only Solution?

1. Client-Side Capabilities: JavaScript runs in the browser, making it more flexible for client-side manipulations.
2. Instant Feedback: Faster response times.
3. Complexity: Bypasses the need for intricate plugin configurations or complex server-side logic.

The Solution

Pre-requisites

• A basic understanding of JavaScript
• Access to the Dynamics 365 Portal web page where the subgrid resides

Steps

Step 1: Identify the Subgrid and the Field to Filter

Before writing any code, identify the subgrid and the field you intend to filter.

Step 2: Write the JavaScript Function to Filter the Subgrid

Here's where the core logic resides.

// Define a function that filters the subgrid by Youth ID
function filterSubgridByYouthId(youthId) {
  // Get the subgrid container
  var subgridContainer = document.getElementById("Subgrid_warrants");
  
  // Use querySelector to find the actual subgrid within the container
  var subgrid = subgridContainer.querySelector(".entity-grid");
  // Check if the subgrid exists
  if (subgrid) {
    // Loop through each row of the subgrid
    subgrid.querySelectorAll("tbody tr").forEach(function (row) {
      // Find the cell that contains the Youth ID
      var cell = row.querySelector("td[data-attribute='tri_offenderid']");
      
      if (cell) {
        // Compare the cell's value with the given Youth ID
        var cellValue = cell.getAttribute("data-value");
        if (cellValue !== youthId) {
          // Hide the row if the Youth ID does not match
          row.style.display = "none";
        }
      }
    });
  }
}

Explanation:

• getElementById("Subgrid_warrants"): Targets the subgrid container.
• querySelector(".entity-grid"): Searches for the actual subgrid.
• querySelectorAll("tbody tr"): Grabs all the rows in the subgrid.

Step 3: Call this Function When the Page Loads

$(document).ready(function () {
  var youthNameField = document.querySelector("input[id='dxc_youthid_name']");
  if(youthNameField) {
    var intervalId = setInterval(function () {
      var subgridContainer = document.getElementById("Subgrid_warrants");
      if (subgridContainer) {
        clearInterval(intervalId);
        filterSubgridByYouthId(youthNameField.value);
      }
    }, 500);
  }
});

Additional Enhancements

To ensure the filter remains applied when the subgrid changes, we utilize the MutationObserver to observe changes to the subgrid DOM and reapply the filter.

var observer = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
      if (mutation.type === 'childList') {
          filterSubgridByYouthId(youthNameField.value);
      }
  });
});
var config = { attributes: true, childList: true, characterData: true, subtree: true };
observer.observe(subgridContainer, config);.

Explanation:

• MutationObserver: A built-in JavaScript API that allows us to observe changes to the DOM.
• config: An object that specifies what types of changes should be observed.

Conclusion

While server-side plugins and JavaScript combined with plugins are the conventional ways to handle data filtering, a JavaScript-only solution can sometimes be more flexible and easier to implement. This example demonstrates how a relatively simple piece of code can effectively filter subgrid data on the client-side, bypassing the need for server-side logic.