Microsoft Dynamics CRMing: Dependent Option Set Implementation through Javascript in CRM 2011.

Hello,

I am here demonstrating you that how to implement a Dependent Option Set (Picklist earlier in CRM 4.0) in CRM 2011 through Javascript.

Let say ,there are two Option Set "Region" and "Country". We want fill out Country on selection of Region.

First ,make a JScript Web Resource and paste below code in that.

function initDependentOptionSet()
{
    // Make sure that DependentOptionSetConfig was defined as expected
    if (typeof (DependentOptionSetConfig) == "undefined")
    {
        alert("DependentOptionSetConfig is not defined.");
        return;
    }

    //Fire the onchange event for the mapped optionset fields
    // so that the dependent fields are filtered for the current values.
    for (var depOptionSet in DependentOptionSetConfig)
    {
        var parent = DependentOptionSetConfig[depOptionSet].parent;
        Xrm.Page.data.entity.attributes.get(parent).fireOnChange();
    }
}

// This is the function set on the onchange event for
// parent fields
function filterDependentField(parentField, childField)
{
    // Make sure that DependentOptionSetConfig was defined as expected
    if (typeof (DependentOptionSetConfig) == "undefined")
    {
        alert("DependentOptionSetConfig is not defined.");
        return;
    }

    for (var depOptionSet in DependentOptionSetConfig)
    {
        var DependentOptionSet = DependentOptionSetConfig[depOptionSet];

        /* Match the parameters to the correct dependent optionset mapping/
        if ((DependentOptionSet.parent == parentField) && (DependentOptionSet.dependent == childField))
        {
            / Get references to the related fields/
            var ParentField = Xrm.Page.data.entity.attributes.get(parentField);
            var ChildField = Xrm.Page.data.entity.attributes.get(childField);

            / Capture the current value of the child field/
            var CurrentChildFieldValue = ChildField.getValue();

            / If the parent field is null the Child field can be set to null /
            if (ParentField.getValue() == null)
            {
                ChildField.setValue(null);
                ChildField.setSubmitMode("always");
                ChildField.fireOnChange();

                // Any attribute may have any number of controls
                // So disable each instance
                var controls = ChildField.controls.get()

                for (var ctrl in controls)
                {
                    controls[ctrl].setDisabled(true);
                }

                return;
            }

            for (var os in DependentOptionSet.options)
            {
                var Options = DependentOptionSet.options[os];
                var optionsToShow = Options.showOptions;

                / Find the Options that corresponds to the value of the parent field. /
                if (ParentField.getValue() == Options.value)
                {
                    var controls = ChildField.controls.get();

                    /Enable the field and set the options/
                    for (var ctrl in controls)
                    {
                        controls[ctrl].setDisabled(false);
                        controls[ctrl].clearOptions();

                        var existingOptions = controls[ctrl].getAttribute().getOptions();

                        for (var option in optionsToShow)
                        {
                            for (eo = 0; eo < existingOptions.length; eo++)
                            {
                                if (existingOptions[eo].value == optionsToShow[option])
                                {
                                    controls[ctrl].addOption(existingOptions[eo]);
                                }
                            }
                        }

                    }

                    /Check whether the current value is valid/
                    var bCurrentValueIsValid = false;
                    var ChildFieldOptions = optionsToShow;

                    for (var validOptionIndex in ChildFieldOptions)
                    {
                        var OptionDataValue = ChildFieldOptions[validOptionIndex];

                        if (CurrentChildFieldValue == OptionDataValue)
                        {
                            bCurrentValueIsValid = true;
                            break;
                        }
                    }

                    / If the value is valid, set it. If not, set the child field to null /
                    if (bCurrentValueIsValid)
                    {
                        ChildField.setValue(CurrentChildFieldValue);
                    }
                    else
                    {
                        ChildField.setValue(null);
                    }

                    ChildField.setSubmitMode("always");
                    ChildField.fireOnChange();
                    break;
                }
                / No values were specified for this parent field value /
                else
                {
                    var controls = ChildField.controls.get();

                    /Enable the field and set the options*/
                    for (var ctrl in controls)
                    {
                        controls[ctrl].setDisabled(true);
                        controls[ctrl].clearOptions();

                        ChildField.setValue(null);
                        ChildField.setSubmitMode("always");
                        ChildField.fireOnChange();
                        break;
                    }
                }
            }
        }
    }
}

Save and publish.

There are two functions required. The first, initDependentOptionSet(), needs to be added to the form’s OnLoad event. This method fires the onchange event for each of the parent fields in order to ensure that the child fields are properly filtered when the form opens. The second, filterDependentField(parentField, childField), needs to be added to each of the parent field’s OnChange events. This function does all the heavy lifting.

Finally, we need to define the relationship between the two fields by defining DependentOptionSetConfig.

The DependentOptionSetConfig variable is required by the global code and needs to be defined in the OnLoad event of the form it will be used on. Make sure that it is not defined within any functions. It contains the parent/child relationships we want.
Below is an example of what it would look like for our region/country example above: