Dependency Dropdown Using Custom Script in Microsoft Dynamics CRM Online

Introduction

In this article, I have explained how to create the dependency dropdown using custom JavaScript.

Navigate to your CRM portal and log in using your valid Microsoft account.

After successfully login into your CRM portal, create a new solution.

Provide all the necessary details like solution name, etc., like the screenshot below, then click save&close on the top left corner.

Click on the created solution and navigate to “Component -> Entities.”  Provide the display name and plural name in the Entity window. Then click save and close on the top left corner.

Click the created entity name, then click Forms and the main form.

Click the new field button to create the new fields Country and State dropdown with the option set.

Create the option set for the country field like the below screenshot.

Create the option set for the State field like the below screenshot.

Drag and drop the country and state fields into the main form.

Open form properties, create an onload event, and paste the below script.

Click on the text editor and paste the script below.

function dynamicDropdown(Parent, Child) {
    filterPicklist(Parent, Child);
} 

function parentListFilter(Parent, id) {
    var filter = "";
    if (getParentCode(Parent) != "") {
        filter = getParentCode(Parent);
    }
    else {
        // No [ ] match
    } return filter;
} 

function filterPicklist(Parent, Child) {
    var parentList = Xrm.Page.getAttribute(Parent).getValue();
    //console.log("parentList", parentList);
    var childListControlAttrib = Xrm.Page.getAttribute(Child);
    var childListOptions = childListControlAttrib.getOptions();
    var childListControl = Xrm.Page.getControl(Child);
    //console.log("child par", Parent);
    var codeToFilterListOn = parentListFilter(Parent, parentList);
    //console.log('codeToFilterListOn', codeToFilterListOn);
    if (codeToFilterListOn != "") {
        childListControl.clearOptions();
        for (var optionIndex in childListOptions) {
            //console.log("childListOptions" , childListOptions[optionIndex])
            var option = childListOptions[optionIndex];
            //console.log("option", option);
            // Ignore xx and check for Match
            if (option.text.substring(0, 2) != "xx" && option.text.indexOf(codeToFilterListOn) > -1) {
                //console.log("swe-option", option)
                var customiseOption = { text: option.text.split('|')[1].trim(), value: option.value }
                childListControl.addOption(customiseOption);
            }
        }
    }
    else {
        // Didn't match, show all?
    }
} function getParentCode(Parent) {
    //Get Parent Code Dynamically from inside [ ]
    var filter = "";
    var parentValue = Xrm.Page.getAttribute(Parent).getValue();
    //console.log("parentValue", parentValue);
    if (parentValue != "") {
        var parentCode = parentValue;
        //console.log("parentValue", parentValue);
        if (parentCode) {
            filter = parentCode
        }
        else {
        }
    }
    return filter;
}

Create another event, “on Change”  to show the options based on the parent dropdown selection.

Navigate to form properties -> Create on change event and click on text editor paste the below custom JavaScript code.

function formatChildDropdown(Parent,child) {
    var childListControl = Xrm.Page.getControl(child);
        

    if (Xrm.Page.ui.getFormType() == 2) {
        console.log("Edit")
        var parentList = Xrm.Page.getAttribute(Parent).getValue();
        var childListControlAttrib = Xrm.Page.getAttribute(child);
    var childListControl = Xrm.Page.getControl(child);
        
        var childListOptions = childListControlAttrib.getOptions();       
        var codeToFilterListOn = parentListFilter(Parent, parentList);
           if (codeToFilterListOn != "") {
                    childListControl.clearOptions();
                    for (var optionIndex in childListOptions) {
                        var option = childListOptions[optionIndex];
                        console.log("option", option);
                            if (option.text.substring()  != "xx" && option.text.indexOf(codeToFilterListOn) > -1){
                            var customiseOption = { text: option.text.split('|')[1].trim(), value: option.value }
                            childListControl.addOption(customiseOption);
                        }
                    }
                }
                else {
                }
    }

    var parentListControlAttrib = Xrm.Page.getAttribute(Parent);
    var parentListOptions = parentListControlAttrib.getText();
    if (parentListOptions == 'null' || parentListOptions == null) {
        childListControl.clearOptions();
    }
}



function getParentCode(Parent) {
    //Get Parent Code Dynamically from inside [ ]
    var filter = "";
    var parentValue = Xrm.Page.getAttribute(Parent).getValue();
    //console.log("parentValue", parentValue);
    if (parentValue != "") {

        var parentCode = parentValue;
        //console.log("parentValue", parentValue);
        if (parentCode) {

            filter = parentCode
        }
        else {

        }
    }
    return filter;
}

function parentListFilter(parent, id) {
    var filter = "";
    if (getParentCode(parent) != "") {
        filter = getParentCode(parent);
        console.log("filter", filter);
    }
    else {
    }
    return filter;
}

Add Once you applied the custom script save and close Page customization.

Once created the script and created the event handler for that script.

We choose the event Onload for the form, click Add, and assign the necessary parameters.

Then add the script and pass the relevant field parameters for country and state.

Click Save & Publish to see the output like below.

Happy Coding !..