Create a dependent Option Set dropdowns in Dynamics CRM 2011

Leave a comment

By Hector Villafuerte

Hector Certifications

How to create a dynamic dropdown display a list of values depend on other attributes in the form?

Example:

The following table shows the desired dependencies between two custom fields, a Two Options type field and an OptionSet.

Has American Express Membership? (Two Options) Account Type to Open(Label) Account Type to Open(Value)
Yes Savings 100000001
Checking 
100000002
Money Market 
100000003
CD Jumbo
100000004
No Savings 100000001
Checking 
100000002

 

We add the new fields in the Opportunity entity: new_ AmericanExpressMembership

OptionSet called new_AccountTypetoOpen.

We add the new custom fields to the main opportunity form.

 

Now we can start coding the JavaScript needed to set the dependencies. If you don’t have the CRM 2011 SDK installed, download from this link: http://www.microsoft.com/en-us/download/details.aspx?id=24004

Once you finished the SDK installation, navigate to the installation folder: sdktoolsdevelopertoolkit

Since, I’m using Visual Studio 2012, I’ll install: crmdevelopertoolsvs12_installer.msi

After install the CRM Developer Tool for VS 2012, you should be able to see the CRM project templates. Select the Dynamics CRM 2011 Package, which allow us to deploy scripts to our CRM environment.

Go to Settings, then Customizations and Developer Resources. Copy the server name of the Discovery end point, in my case is: server

Now, I can go back to Visual Studio and fill out the Connect Dialog in Visual Studio. First type the Server Name and the click Connect. Then, type user name, password and domain. Click Logon. Then the Organization will show in the drop down. Select the organization and click OK.

Now, in VS 2012, go to the Solution Explorer and add a new resource under the Web Resources directory.

Select new JavaScript and named: OpportunityForm.js

Write the following code in the JScript file. This will be the skeleton function that we will use to code the dropdown dependency.

function HandleOnChangeAmericanExpressMembership() {

alert(‘HandleOnChangeAmericanExpressMembership’);

}

Now, deploy the Javascript file by right click in the Project AEPackage and select the menu deploy.

I’ll go back, now to CRM Opportunity Form customization and click in Form Properties and add the new Javascript resource file to the Form Libraries form and click OK.

Double click the new_ AmericanExpressMembership field in the form and add the Event Handler for the field.

 

Save and close and publish the changes. Test. Be aware that the alert message will display after we check the AmericanExpressMembership contorl and go out the focus.

After we have this appropriate tested the skeleton JavaScript code. We can go ahead and write the code inside of HandleOnChangeAmericanExpressMembership function.

First, you get the data value of AmericanExpressMembership checkbox, which is true or false.


var AmericanExpressMembershipAtrib = Xrm.Page.getAttribute(“new_americanexpressmembership”);


var AmericanExpressMembershipValue = AmericanExpressMembershipAtrib.getValue();

 

In the same way, we get the value of the accounttypetoopen OptionSet. Notice that all references to the control’s name is on lowercase letter.

var AccountTypetoOpenAttrib = Xrm.Page.getAttribute(“new_accounttypetoopen”);


var AccountTypetoOpenValue = AccountTypetoOpenAttrib.getValue();

 

Now, we get the options and and we get the UI reference to the OptionSet Control and remove the options.


var AccountTypetoOpenOptions = AccountTypetoOpenAttrib.getOptions();


var AccountTypetoOpenControl = Xrm.Page.getControl(“new_accounttypetoopen”);

AccountTypetoOpenControl.clearOptions();

 

The currentValueIsInOption variable will be used to determine if the selected value will be restore in the OptionSet as selected.

var currentValueIsInOption = false;

We loop though the options and evaluate if they match to Money Market (100000003) or CD Jumbo (100000004), and then evaluate AmericanExpressMembership value to add these options.

Also we evaluate if the original selected value match with the loop values, then we will assign the value true to currentValueIsInOption variable.

for (var optionIndex in AccountTypetoOpenOptions)

{


var option = AccountTypetoOpenOptions[optionIndex];


if (option.value == 100000003 || option.value == 100000004)

{


if (AmericanExpressMembershipValue)

{

AccountTypetoOpenControl.addOption(option);


if(AccountTypetoOpenValue == option.value)

currentValueIsInOption = true;

}

}


else

{

AccountTypetoOpenControl.addOption(option);


if (AccountTypetoOpenValue == option.value)

currentValueIsInOption = true;

}

}

 

And finally, we evaluate the currentValueIsInOption variable to set back the original selected value.


if (currentValueIsInOption) {

AccountTypetoOpenAttrib.setValue(AccountTypetoOpenValue);

}


else

{

AccountTypetoOpenAttrib.setValue(“”);

}

 

The following is the full code:

function HandleOnChangeAmericanExpressMembership() {

 


var AmericanExpressMembershipAtrib = Xrm.Page.getAttribute(“new_americanexpressmembership”);


var AmericanExpressMembershipValue = AmericanExpressMembershipAtrib.getValue();

 


var AccountTypetoOpenAttrib = Xrm.Page.getAttribute(“new_accounttypetoopen”);


var AccountTypetoOpenValue = AccountTypetoOpenAttrib.getValue();

 


var AccountTypetoOpenOptions = AccountTypetoOpenAttrib.getOptions();


var AccountTypetoOpenControl = Xrm.Page.getControl(“new_accounttypetoopen”);

AccountTypetoOpenControl.clearOptions();

 


var currentValueIsInOption = false;

 


for (var optionIndex in AccountTypetoOpenOptions)

{


var option = AccountTypetoOpenOptions[optionIndex];


if (option.value == 100000003 || option.value == 100000004)

{


if (AmericanExpressMembershipValue)

{

AccountTypetoOpenControl.addOption(option);


if(AccountTypetoOpenValue == option.value)

currentValueIsInOption = true;

}

}


else

{

AccountTypetoOpenControl.addOption(option);


if (AccountTypetoOpenValue == option.value)

currentValueIsInOption = true;

}

}

 


if (currentValueIsInOption) {

AccountTypetoOpenAttrib.setValue(AccountTypetoOpenValue);

}


else

{

AccountTypetoOpenAttrib.setValue(“”);

}

 

}


Deploy the package in Visual Studio and Test in the browser. You’ll see how by check the American Express Membership the OptionSet will show options as shown below.

When you uncheck the OptionSet will display different options.

 

This sample give you an idea of how to build dynamic OptionSets that depend on other controls. There are some recommendations like trying to avoid hardcode of values in the JavaScript. Instead you should use some kind of data source like a configuration entity or an xml file which contain the dependencies of the OptionSet. If you have it on this way you should be able to do a validation using Plugins to ensure the data integrity.

 

Leave a Reply