Friday, March 15, 2013

Dependent Picklist(Dynamic Option Set) 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.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/************************
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.

10 comments:

  1. Dear Charan,
    Your Article is very much helpful to me. Here you need to make a small change.
    Replace options[k] with _cityOptions[k].

    Thanks

    ReplyDelete
  2. Thank you for your valuable feedback. That change is done.

    ReplyDelete
  3. Charan,

    What happens in the case of form edit, i think this will make issue coz js works in client side. Value saved in db wont set. Please confirm.

    Thanks

    ReplyDelete
    Replies
    1. In that case, getCollection() method has to be modified in the above JScript so that newly added optionset values will be considered.

      Delete
    2. My approach was in another way. All values for child optionset is already there in db. On form load, values other than which is required for current parent will be removed. So selected value from db wont reset.

      Delete
    3. Yes..!! You are right and its a good catch.. Thank you for your valuable response here. And I have updated the code to retain the selected optionset value OnLoad of the form. Check it once..

      Delete
    4. HI Charan can i have that piece of code for form update please ? my id is wqslatif58@gmail.com THanks in advance

      Delete
  4. Hello
    if you are working with other fields not a city and a country; but for instance a ServiceLevel and a Priority field.
    What is needed to be changed in your code ?
    Thanks in advance
    Raynald (rthevenet@cosma-experts.com)

    ReplyDelete
  5. Hi Chandran,

    How to remove the blank space from the optionset?

    For example:

    In the city, above Bangalore and California there is blank space added. Do you have any idea how to remove it?

    Regards,
    Prabhu G

    ReplyDelete
  6. Hi Charan,

    This blog is very helpful to me Great thanks
    Narasimha

    ReplyDelete