Introduction
Dynamics 365 Dataverse provides feature which is related records filtering, usually between two or more lookup fields. You just go to the form, open lookup that you are interested in, scroll to Related Record Filtering and specify all necessary conditions. But in portal it’s different
Custom Lookup Filtering
Imagine we have a custom entity called Categorization. We have two lookup fields on Contact – Primary Categorization and Secondary Categorization. We need to filter Secondary Categorization by the value in Primary Categorization.
Let’s step back and start with investigation what lookup is on the portal. It is an input field that will open a popup with the list of records. Unfortunately, you cannot specify any filter on the field. You also cannot specify possible values directly. Or at least you cannot do it if lookup will be rendered as-is. And luckily for us, there is a way to change default rendering behavior – entity form metadata.
Entity Form Metadata contains additional behavior modification logic to augment or override the functionality of form fields that is otherwise not possible with native entity form editing capabilities.
Using this you can specify additional properties of fields, sections, tabs and other parts of the entity (or web) forms. That allows doing all kind of thing starting with specifying additional values on save, add additional CSS classes, etc. One particularly interesting thing is that we can enable lookup to be rendered as a dropdown. What it will do is instead of regular input with popup window it will render it as an HTML select field. And this field we can manipulate easily. Select will contain options, that will have value with record id.
Here is how you can easily add entity form metadata.
Open your Portal Management app (or Dynamics 365 Power Pages if you have Dynamics portal). There find an basic form on which you need to add metadata . There find an Basic Form Metadata tab. It will contain a subgrid with all related Entity Form Metadata records. Press the New Entity Form Metadata button.
It will open a creation form. In the Type field select Attribute. Then in Attribute Logical Name select attribute that you want.
Then scroll to Control Style section. In the Control Style field select Render Lookup as Dropdown.
Save it
Now the lookup looks like the same to the Primary Categorization field to make it look similar on the form.
Liquid Page Templates
Now we need to have a list of records that we can easily turn into options. But how can we do that? Well, let’s use some liquid magic.
You can create a web template which contain liquid code with necessary Fetchxml query. You can configure it to receive parameters and return Json as a result, so it will act as our own web service.
So for our task, we will need to create a web template with correct Fetchxml query that will receive as a parameter id of the main dropdown and will return us a list of records that we will add to our select.
{% fetchxml feed %}
<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
<entity name="dm_categorization" >
<attribute name="dm_categorizationid" />
<attribute name="dm_name" />
<filter type="and" >
<condition attribute="dm_parent" operator="eq" value="{{ request.params['parentId'] }}" />
</filter>
</entity>
</fetch>
{% endfetchxml %}
{
"results":[
{% for item in feed.results.entities %}
{
"Id": "{{item.dm_categorizationid }}",
"Name": "{{item.dm_name }}"
}
{% unless forloop.last %},{% endunless %}
{% endfor -%}
]
}Then Create Page Template
Create New Web Page and select the create Page Template
Add custom code to the form
Open basic form that we are working on . Select Additional Settings and scroll down to Custom JavaScript section. There you can add custom code that will run when form will load.
$(document).ready(function () {
// register onPrimaryChange function to run on change of dm_primarycategorization field
$("#dm_primarycategorization").change(onPrimaryChange);
$("#dm_primarycategorization").change();
});
function onPrimaryChange(){
// get id of selected primary field
// this will work only if you render primary field as dropdown
let primaryValue = $("#dm_primarycategorization option:selected").val();
// remove all option from dependent field
$("#dm_secondarycategorization").empty();
if(primaryValue != null && primaryValue !=""){
// request to our custom page with id as parameter
$.getJSON( "/configureLookup-json?parentId="+primaryValue, function( data ) {
if(data.results.length>0){
//create option for each returned entity
data.results.forEach(element => {
let option = document.createElement("option");
option.value = element.Id;
option.innerText = element.Name;
$("#dm_secondarycategorization").append(option);
});
}
}
);
}
}