Dependent Picklist in MScrm 2011

Dependent Picklist in CRM 2011

             MS CRM 2011 doesn't have Out-Of-the-Box functionality to filter the option set values based on the value selected in another option set. We can implement this functionality using Javascript. Lets consider one example here. We have two option set fields called Country and City. City field has to be filtered based on the value selected in Country field. Below JScript code will do this functionality.

Prerequisite:
1. Create two optionset fields named new_country(with values say, India, USA and Srilanka) and new_city(with values say, Bangalore, Delhi, New York, Colombo, California and Hyderabad).
2. Create a JScript Webresource with the below code.
3. Attach this webrecource to call optionSetChanged() method on change of Country field and OnLoad of the form.
4. Configure getCollection() method to match the Cities with respect to Country.

/************************
Functionality: To populate the picklist values based on the value selected in another picklist.
Field Name: new_country
Field Event: OnChange, OnLoad
***************************/

function optionSetChanged() {

    ///<summary>
    /// Change the dependent picklist values based on the value selected in the control picklist.
    ///</summary>

    var _collection = getCollection();
    var _selectedCity = null;
    var _cityOptionset = Xrm.Page.ui.controls.get("new_city");

    if (_cityOptionset != null)
        _selectedCity = _cityOptionset.getAttribute().getValue();

    var _cityOptions = _cityOptionset.getAttribute().getOptions();
    var _selectedCountry = Xrm.Page.getAttribute("new_country").getText();

        
    // If Country is empty, then clear the City field.
    if (_selectedCountry == "") {
        _cityOptionset.clearOptions();
    }
    else {
        for (var i = 0; i < _collection.length; i++) {

            if (_selectedCountry.toLowerCase() == _collection[i].Country.toLowerCase()) {

                _cityOptionset.clearOptions();
                for (var j = 0; j < _collection[i].Cities.length; j++) {

                    for (var k = 0; k < _cityOptions.length; k++) {

                        if (_collection[i].Cities[j].toLowerCase() == _cityOptions[k].text.toLowerCase()) {

                            _cityOptionset.addOption(_cityOptions[k]);
                            break;
                        }
                    }
                }
                break;
            }
        }

        if (_cityOptionset != null && _selectedCity != null)
            _cityOptionset.getAttribute().setValue(_selectedCity);
    }
}


function getCollection() {

    ///<summary>
    /// Creates and returns a collection of Cities with respect to their Countries.
    ///</summary>

    var _collection = new Array();

    var India_Cities = new Array("Bangalore", "Delhi", "Hyderabad");
    var India_obj = { Country: "India", Cities: India_Cities };
    _collection.push(India_obj);

    var Srilanka_Cities = new Array("Colombo");
    var SriLanka_obj = { Country: "SriLanka", Cities: Srilanka_Cities };
    _collection.push(SriLanka_obj);

    var USA_Cities = new Array("California", "New York");
    var USA_obj = { Country: "USA", Cities: USA_Cities };
    _collection.push(USA_obj);

    return _collection;
}

    This functionality can be tested by changing the Country field and check the values populated in City field. Result of this dependent pick list is can be seen here.

Country: India and Cities: Bangalore,Delhi & Hyderabad.

Country: USA and Cities: California & NewYork.