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.

Dropdown Dependency

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

Dependency Dropdown Using Custom Script

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

Dependency Dropdown Using Custom Script

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.

Dependency Dropdown Using Custom Script

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

Dependency Dropdown Using Custom Script

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

Dependency Dropdown Using Custom Script

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

Dependency Dropdown Using Custom Script

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

Dependency Dropdown Using Custom Script

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

Dependency Dropdown Using Custom Script

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

Dependency Dropdown Using Custom 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.

Dependency Dropdown Using Custom Script