How to Dynamically Filter Multi-Select Option set/Picklist in D365 CRM using JavaScript
In this blog, I am going to show how we can filter a field (multi-select option set) item dynamically based on another field (single-select option set) item.
Let’s consider a use case,
We have a field named ‘Application Area’ which is a (single-select option set) field and ‘Application Type’ which is a (multi-select option set) field.
Let’s have a look at JavaScript where the magic is making this possible.
Step 1: Below is the entire code of JS
var ApplicationProductSelection ={
"Beverages":
{
"BevProduct" : [{text: 'Beverage-CSD', value: 979570000},
{text: 'Beverage-Juice drinks', value: 979570001},
{text: 'Beverage-Alcoholic Beverage RTD', value: 979570002},
{text: 'Beverage-Spirits & Cordials', value: 979570003},
{text: 'Beverage-Ready to Mix', value: 979570004},
{text: 'Beverage-Concentrate', value: 979570005},
{text: 'Other', value: 979570006}]
},
"Dairy":
{
"DairyProduct": [
{text: 'Dairy-Ice Cream', value: 979570007},
{text: 'Dairy-Fluid Milk', value: 979570008},
{text: 'Dairy-Yogurt', value: 979570009},
{text: 'Dairy-Cheese', value: 979570010},
{text: 'Other', value: 979570006}]
}
};
var MasterRecord = [];
var oApplicationAreaType = {
Main: function(executionContext){
var formContext = executionContext.getFormContext();
if(formContext!= null){
MasterRecord = formContext.getControl("cf_applicationtypes").getOptions();
}
},
getDetails: function(executionContext){
var formContext = executionContext.getFormContext();
var ApplicationArea= formContext.getAttribute("cf_applicationarea").getValue();
if (ApplicationArea != null){
//beverages
if (ApplicationArea == 979570000){
formContext.getControl("cf_applicationtypes").clearOptions();
ApplicationProductSelection.Beverages.BevProduct.forEach(element => formContext.getControl("cf_applicationtypes").addOption(element));
}
//Dairy
if (ApplicationArea == 979570001){
formContext.getControl("cf_applicationtypes").clearOptions();
ApplicationProductSelection.Dairy.DairyProduct.forEach(element => formContext.getControl("cf_applicationtypes").addOption(element));
}
}
else{
formContext.getControl("cf_applicationtypes").clearOptions();
MasterRecord.forEach(element => formContext.getControl("cf_applicationtypes").addOption(element));
}
}
}
For Table/Entity Main Form customization, select ‘Form Properties’ to include JavaScript function as below,
- On Load: oApplicationAreaType.Main
- On Change of field ‘Application Area’: oApplicationAreaType.getDetails
Note: Pass the execution context for calling the JS function.
That’s all, we have created a dynamic filtering of multi-select option set using JavaScript.
Hope this helps!!
