Custom Lookup Filtering In Basic Forms – Power Pages

In this blog we will see how to use custom lookup filtering in basic forms. Basic forms in power pages with lookup fields often face issue with related records filtering. So we can explore how to use custom filtering in the lookup fields.

Solution :-

First of all consider we have two Lookup fields Field A & Field B and Field B has a relation to Field A, the aim is to filter Field B with respect to the value in Field A, for that first we have to change default rendering behaviour – we have to render the lookup as a dropdown, for this go to the portal management app and select the Basic form which you have to add the entity metadata. And select entity metadata , add new metadata for the lookup fields.

when creating the e metadata select type “Attribute” and control style “Render Lookup as Dropdown” then select the lookup field which you want to render as a dropdown in the attribute logical name field. Now the lookup field will render as a dropdown.

Now we will use Liquid and fetchxml to get records from the dataverse. For that , In portal management create a new web template and add the code shown below. scroll down and add value in the
MIME Type as “application/json”.

Code :-

{%fetchxml filter%}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
<entity name="entity Name of Field B">
<attribute name ="Logical name of Field B" />
<attribute name ="Logical name of value field" />
<filter type="and">
<condition attribute="Logical name of Filed A" operator="eq" value="{{request.params['id']}}" />
</filter>
</entity>
</fetch>
{%endfetchxml%}
{% if filter.results.entities.size > 0 %}
{
"results": [
{%for item in filter.results.entities %}
	{
	"Id":  "{{item.Logical name of Field B}}",
		"Name" :"{{item.Logical name of value field}}"
	}{%unless forloop.last%},{%endunless%}
{%endfor%}
]}
{%endif%}

Next step is to add a new page template with the above created web template. select Type as web template and select your previously saved web template and save it.

Now then we’ve to create a web page, And add the page template to the webpage, also the partial URL of this web page is used in our java-script function.

Next step is to add the java-script function in the Basic form. In basic form go to additional settings then scroll down to the custom java-script section and add the code .

$(document).ready(function () 
{
  $("#field A").change(onPrimaryChange);
    $("#field A").change();

});

 function onPrimaryChange() {
    let primaryValue = $("#field A option:selected").val();

    $("#field B").empty();

    if (primaryValue != null && primaryValue !== "") {
        
 //filterjson -partial Url of the webpage we created
$.getJSON("/filterjson?id=" + primaryValue)
            .done(function(data) {
                if (data.results.length > 0) { 
                            for(var i=0;i<=data.results.length; i++;){
                    var Value = data.results[i].Name;  
                    var programTeamId = data.results[i].Id; 

                    $("#field B").append('<option value=' + programTeamId + '>' + programTeamName + '  </option>');
                       }                
}
            })
            .fail(function(jqxhr, textStatus, error) {
                console.error("AJAX request failed: " + textStatus + ", " + error);
            });
    }
}

Save this custom java-script form. And our custom Lookup filtering is now good to go.

Hope this helps

Custom Lookup Filtering In Basic Forms – Power Pages

Related