How to Dynamically Filter Multi-Select Option set/Picklist in D365 CRM using JavaScript

Posted On April 27, 2022 by Sancia Dcunha Posted in

Dynamics 365

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,