In this blog post, I will walk through the steps you can follow to filter the results of a grid (N:N association) based on other subgrid present on the form. This is helpful for folks who want to build a hierarchy of record selection on the Power Apps Portals.
Problem Statement
How to build parent-child selection on entity form? How to use script to filter records based on parent record in Power Apps Portals? How to apply filters in Power Apps Portals?
Solution
There are a number of operations we can do on the fields present on a page in Power Apps Portals. In this blog we will focus on setting up the configuration in a way that users will be able to only see those records in second grid which related to the records selected in first step.
Scenario: Let's consider an example of a candidate application system, where the candidates are first given choice to select relevant technology and then to get more information, they should be able to select individuals skills related to selected technologies.
By default, this is not supported and if a script is applied in the resource then it will not be forwarded to Power Apps Portals. To enable such a feature on PowerApps Portals, we can add a jQuery script to apply custom logic. This script can be added in the Custom JavaScript section on the Web Page.
Note: To get the names of different components in the page, you can place the form on page and Inspect the code to get the specific values.
jQuery Script
$(document).ready(function () {
$("#ChildSubgridID div").children(".view-toolbar.grid-actions.clearfix").find("a").click(function() {
var technologylist = []
$("ParentChildID").children("div.entity-grid.subgrid").children("div.view-grid").children().find("td[data-attribute='crf61_name']").each(function (i, e){
var value = $(this).data(value);
technologylist.push(value.value);
});
$(".entity-grid.associate-lookup").on("loaded", function () {
$(this).children(".view-grid").find("td[data-attribute='crf61_technology']").each(function (i, e){
var value = $(this).data(value);
if (technologylist.indexOf(value.value.Name) > -1)
{
$(this).closest('tr').css("visibility", "visible");
}
else
{
$(this).closest('tr').css("visibility", "collapse");
}
});
});
});
});
Explanation
#1: $(document).ready(function () {
This function is called when the page is ready.
#2: $("#ChildSubgridID div").children(".view-toolbar.grid-actions.clearfix").find("a").click(function() {
Here, we are identifying the "Add Skills" button and adding a function to trigger when the button is clicked.
#ChildSubgridID is the Name of Child Subgrid from the main form.
#3: var technologylist = []
Here, we are initializing an array to store all the technologies selected in Parent Subgrid.
#4: $("ParentChildID").children("div.entity-grid.subgrid").children("div.view-grid").children().find("td[data-attribute='crf61_name']").each(function (i, e){
var value = $(this).data(value);
technologylist.push(value.value);
Here, we are iterating over the all the items selected in parent subgrid and appending the name of Technology to technologylist array.
ParentChildID is the Name of Parent Subgrid from the main form.
crf61_name is the logical name of Name field in the Technology Entity.
#5: $(".entity-grid.associate-lookup").on("loaded", function () {
$(this).children(".view-grid").find("td[data-attribute='crf61_technology']").each(function (i, e){
This function is executed on the load of popup that shows Skills records for associating with the candidate. This iterates over all the rows in the popup.
crf61_technology is the logical name of lookup field (In this case, we have a lookup to Technology entity in Skills Entity)
#6: var value = $(this).data(value);
if (technologylist.indexOf(value.value.Name) > -1)
{
$(this).closest('tr').css("visibility", "visible");
}
else
{
$(this).closest('tr').css("visibility", "collapse");
}
});
Here, we are checking if the specific record's technology exist in the technologylist. If it exists, then show the record and if it does not exist, then hide the record from list.
DEMO
In this post we saw how to implement custom filter in Power Apps Portals. This adds an additional functionality to filter records based on existing records selected in other subgrid. This overcomes the limitation of applying filters in Power Apps Portals.
I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika.