Posted in JavaScript/jQuery Plugins, Power Apps Portals

Power Apps Portals – Custom Lookup filter

Posted on by Oliver Rodrigues

A common requirement for Power Apps Portals is to add dynamic filters when we open a lookup modal. Unfortunately there is no OOB way to achieve this. It is important to state here that the Portal relies on the Lookup View from your D365/Dataverse, so if you need a static filter you can always change that view:

In this post I will show a customization using client-side code to filter the data presented on the lookup modal. But before that, I’d like to share an article by a community champion that uses a different method: https://www.dancingwithcrm.com/custom-lookup-filtering-powerapps-portal/ by Oleksandr Olashy.

The idea of the article above is to render the lookup as a dropdown, and then use JavaScript/Web Templates to perform a query and finally re-populate the options in the dropdown element.

That approach will probably be enough for most scenarios, but what if you still need to show the Lookup modal as below?:

Here are a few reasons you might want to display the Lookup modal:

  • If your list is a very long list, a dropdown might not be the best experience for the user;
  • You might want to use the search;
  • You might want to display multiple columns;
  • If you have a subgrid and have an action for Associate record, this will always open the lookup-modal.

In my example, I have an Account lookup on the Contact profile form, and the filter I want to do here is hiding certain records if the current user is not an Administrator. I will also add a flag on the Account entity to mark records that should be hidden.

Here is my Account data with no filters via Advanced Find search:

Now I will add the following JavaScript code to the Profile Web Page:

$(document).ready(function () {

    var list = $("#parentcustomerid_lookupmodal").find(".entity-lookup").find(".entity-grid").eq(0);
    list.on("loaded", function () {
        
        // hide "Admin Only" column
        list.find("table thead th").eq(2).hide();
        list.find("table tbody tr").each(function () { $(this).find("td").eq(2).hide(); });

        var isAdmin = "{{ user | has_role: 'Administrators' }}";
        console.log("is admin: " + isAdmin);
        if (isAdmin == "false") {
            list.find("table tbody > tr").each(function () {
                var tr = $(this);
                var adminOnly = $(tr).find('td[data-attribute="cr42c_adminonly"]').attr("data-value");
                if (adminOnly == "true") {
                    tr.remove();
                }
            });
        }
    });
});

If I open the lookup again via Portals, these are the options that I am presented with:

Let’s explore the JavaScript code:

  • I am finding the modal associated with the id parentcustomerid_lookupmodal and injecting a function to the OnLoad event;
  • Optionally, I am hiding the Admin Only column, as I want that column to be for technical purposes only;
  • Using Liquid, I am checking if the user contains the Administrators role;
  • Finally I am looping through the list and checking the value for my Admin Only column, and completely removing the <tr> element in case it’s not supposed to be shown.

Here are a few other business scenarios for which this approach might be applicable:

  • Dynamic filter based on a parent record (performing a query via oData or FetchXML to retrieve the related records);
  • Filter records on an Associate modal – for this we just need to change how to assign the list variable:

From:

var list = $("#parentcustomerid_lookupmodal").find(".entity-lookup").find(".entity-grid").eq(0);

To: 

var list = $(".associate-lookup").find(".entity-grid").eq(0);

Conclusion

I really wish we were able to select which view to display in Portal lookups, as well as set them dynamically. Perhaps Microsoft will add this feature in the future, but in the meantime this JavaScript code is a good solution for filtering lookup controls.

I hope this tip comes in handy for your Power Apps Portals project.

Author:

19 thoughts on “Power Apps Portals – Custom Lookup filter”

  1. Hi,
    This is working fine if there are 10 records, if there are more than 10 records pagination is enabled and this is not rendering it is working on each page although only 3 records filtered it is showing pagination page 1, 2 etc.

    Like

    Reply

  2. Great tip, it worked. I needed to filter the customer lookup inside the “Cases” entity and this was the only way I could do it (I removed the rows I didn’t want with an Odata query).
    However, the modal first loads with all the records, and only after ~5/10 seconds the removed rows starts disappearing – the user can see this happening. Is there a workaround for this? Because from my understanding the code only runs when the list is already loaded (on “loaded”), could I add a “loading” sign or something?

    Like

    Reply

    1. Hi Parth

      You can add JS logic to remove the selected item, for example:

      $(document).ready(function () {

      var modalList = $(“#cr285_customerlookup_lookupmodal”).find(“.entity-lookup”).find(“.entity-grid”).eq(0);
      modalList.on(“loaded”, function () {
      var lookupValue = $(“#cr285_customerlookup”).val();
      if (!!!lookupValue) {
      var selected = modalList.find(“table tbody > tr.selected”);
      $(selected).find(“td[data-th=Select] > span[role=’checkbox’]”).click()
      }

      });
      });

      Like

      Reply

      1. Hey Oliver. Thanks for a quick response. But to be sure once, I don’t want to remove that value. I simply want the first record in the list to be unselected when modal loads. Cuz by default it’s selected when we open the lookup modal. Is your logic resolving this?

        Like

  4. Pingback: Power Apps Portals – Remove default value on Lookup Modal – Oliver Rodrigues

  5. Hi,
    I have tried this solution but I am facing one issue in the pagination. I only have 2 rows to display and it is showing one row on page one and the other row on page 2.
    How to handle pagination in this case?

    Like

    Reply

  6. Hi Oliver, Nice blog! I’m trying to achieve something similar I guess. I have a form to make a reservation for a meeting room, then at the room selector, this pop-up is loading ‘lookup records’ of the serval rooms like above with accounts. Now I want that this list of rooms is filtered by the capacity of the room, looking at the amout of people that is filled in the form, but also check which rooms are available filtering by chosen start end date time 🙂 all is in Dataverse. Is this hard to achieve or maybe you have a better idea? Is there a change you could help me on track a bit? Thx!!

    Like

    Reply

    1. Hi Robin, you can use the solution in this article to filter the records within the lookup modal. Just keep in mind that if you have the rooms pop-up with multiple pages, this won’t have the best user experience when removing the records.
      Let me know how you go with the solution.

      Like

      Reply

  8. Hi Oliver, do you know how to override a column attribute in the modal lookup? We can override the column attribute from the subgrid on the basic form, but when accessing the modal look-up the column doesn’t override. Probably JS can help here?

    Like

    Reply

  9. Hi Oliver, thank you so very for this article! Just to add to this, in situations whereby the pop-up has many pages you can create a new setting ‘Portal/Lookup/Modal/Grid/PageSize’ and set it to a high value so that the returned records all show within one page because I realized it messes up the view in situations where there are many pages.

    Liked by 1 person

    Reply

Leave a comment