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.

Posted by at
Labels:

10 comments:

  1. AnonymousMay 6, 2013 at 3:20 PM

    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. Charan Raju C RMay 9, 2013 at 9:35 AM

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

    ReplyDelete
  3. AnonymousMay 27, 2013 at 7:40 PM

    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. Charan Raju C RMay 29, 2013 at 1:31 PM

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

      Delete
    2. AnonymousMay 29, 2013 at 2:15 PM

      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. Charan Raju C RMay 29, 2013 at 4:14 PM

      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. UnknownDecember 12, 2013 at 5:25 PM

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

      Delete
  4. AnonymousJuly 4, 2013 at 8:39 PM

    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. Prabhu GNovember 11, 2013 at 5:23 PM

    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. NarasimhaJuly 15, 2014 at 4:03 PM

    Hi Charan,

    This blog is very helpful to me Great thanks
    Narasimha

    ReplyDelete

Subscribe to: Post Comments (Atom)