welcome to XRM blog

Sometimes while working with MSCRM forms, we are faced with a business scenario where we must change or limit available options in an option set field depending on the value of a previous drop down for instance changing city dropdown option set values based on state or province option set value. We can achieve this in MSCRM with the help of JavaScript, Let’s look at the following example:

Change Sub Category option set value based on value selected in Category field:

Field Schema:

Fields on form before custom JavaScript:

Sub-Category (crb9e_subcategory)                                       Category(crb9e_category)

Below is the custom JavaScript we will use to first clear all available options from the sub-category then only showing relevant options in sub-category dropdown

Custom JavaScript Code:

function setSubCategory(executionContext)

{

    let formContext=executionContext.getFormContext();

    var mango=formContext.getAttribute("crb9e_subcategory").getOption(0);//Mango=0

    var apple=formContext.getAttribute("crb9e_subcategory").getOption(1);//Apple=1

    var banana=formContext.getAttribute("crb9e_subcategory").getOption(2);//Banana=2

    var potato=formContext.getAttribute("crb9e_subcategory").getOption(3);//Potato=3

    var cauliflower=formContext.getAttribute("crb9e_subcategory").getOption(4);//Cauliflower=3

    var brinjal=formContext.getAttribute("crb9e_subcategory").getOption(5);//Brinjal=3

    //Clear subcategory options

    formContext.getControl("crb9e_subcategory").removeOption(0);

    formContext.getControl("crb9e_subcategory").removeOption(1);

    formContext.getControl("crb9e_subcategory").removeOption(2);

    formContext.getControl("crb9e_subcategory").removeOption(3);

    formContext.getControl("crb9e_subcategory").removeOption(4);

    formContext.getControl("crb9e_subcategory").removeOption(5);

    //get selected category option

    var category=formContext.getAttribute("crb9e_category").getValue();

    if(category!=null)

    {

        if(category==10)//if category is Fruits

        {

            //add Fruits options to sub category

            formContext.getControl("crb9e_subcategory").addOption(mango);

            formContext.getControl("crb9e_subcategory").addOption(apple);

            formContext.getControl("crb9e_subcategory").addOption(banana);

        }

        else

        {

            //add Vegetables options to sub category

            formContext.getControl("crb9e_subcategory").addOption(potato);

            formContext.getControl("crb9e_subcategory").addOption(cauliflower);

            formContext.getControl("crb9e_subcategory").addOption(brinjal);

        }

    }   

}

Now we will set add our function to the on-change event of the category field

Step 1:

On your form editor double click on the category field to open Field Properties menu and head over to the event tab and click on Add button+

Step 2:

Under Handler Properties Details tab, we will write our function name “setSubCategory” and we have our “executionContext” argument so make sure to check the “Pass execution context as first parameter” click OK

Note: make sure to do the same for form on load event to avoid displaying all sub category option values when the form loads

Click on Form Properties and follow the same add event steps

Scenarios:
When no Category is selected

When Category is Fruits

When Category is Vegetables