Create Dependent Option Set__using JavaScript

By using below Java Script, you can create a Dependent Option set in CRM 2011 form. To do this please follow below steps.

Step 1: Create two Option set field (1. Brand [new_brand], 2. Product [new_product] ) in CRM form with below details.

Step 2: Place those field in the form.

Step 3: Create a new Java script Web Resource with two different function in it, one for form OnLoad and other for OnChange event of parent Option set.

To know, how to create a new Java Script Web Resource in CRM 2011, find my previous article: Work With Java Script Web Resource


/* Code for Form onload Event */
function formload() {
    var ctrl_product = Xrm.Page.ui.controls.get("new_product");
    var product = Xrm.Page.data.entity.attributes.get("new_product");
    var productval = product.getValue();
    if (productval == null) {
        ctrl_product.setDisabled(true);
    }
    else {
        ctrl_product.setDisabled(false);
        var currentVal = Xrm.Page.data.entity.attributes.get("new_product").getValue();
        onchangecall();
        product.setValue(currentVal);
    }
}

/* Code for Option Set (new_brand) onchange Event */
function LoadDependentdata() {
    var myNewOption = document.createElement("option");
    var _brand = Xrm.Page.ui.controls.get("new_brand");
    var _product = Xrm.Page.ui.controls.get("new_product");
    _product.setDisabled(false);
    _product.clearOptions();
    var _brandval = Xrm.Page.data.entity.attributes.get("new_brand").getValue();
    if (_brandval != null) {
        switch (_brandval) {
            case 100000000:
                myNewOption.value = 100000000;
                myNewOption.text = "Unicorn";
                _product.addOption(myNewOption);

                myNewOption.value = 100000001;
                myNewOption.text = "CBR 250 R";
                _product.addOption(myNewOption);

                myNewOption.value = 100000002;
                myNewOption.text = "CBR 150 R";
                _product.addOption(myNewOption);

                myNewOption.value = 100000003;
                myNewOption.text = "Dazzler";
                _product.addOption(myNewOption);

                myNewOption.value = 100000004;
                myNewOption.text = "Shine";
                _product.addOption(myNewOption);

                break;

            case 100000001:

                myNewOption.value = 100000005;
                myNewOption.text = "CBZ Xtreme";
                _product.addOption(myNewOption);

                myNewOption.value = 100000006;
                myNewOption.text = "Splendor";
                _product.addOption(myNewOption);

                myNewOption.value = 100000007;
                myNewOption.text = "Hunk";
                _product.addOption(myNewOption);

                break;

            case 100000002:
                myNewOption.value = 100000008;
                myNewOption.text = "Pulsur 220";
                _product.addOption(myNewOption);

                myNewOption.value = 100000009;
                myNewOption.text = "Pulsur 180";
                _product.addOption(myNewOption);

                myNewOption.value = 100000010;
                myNewOption.text = "Pulsur 150";
                _product.addOption(myNewOption);

                myNewOption.value = 100000011;
                myNewOption.text = "Discover";
                _product.addOption(myNewOption);

                break;

            case 100000003:
                myNewOption.value = 100000012;
                myNewOption.text = "Apache 180";
                _product.addOption(myNewOption);

                myNewOption.value = 100000013;
                myNewOption.text = "Apache 160";
                _product.addOption(myNewOption);

                break;
            default:
                _product.setDisabled(true);
                return null;
        }
    }
}



Step 4: Call the formload() function in Entity Form onload event and call LoadDependentdata() function in onchange event of Brand (new_brand) option set.



Now open the CRM form in runtime and you can see that as per your selection in Brand Option set, Product Option set is populating data accordingly.

*** Thank You ***

Work with Java Script Web resource

For this I have created a simple Hello World program with Java Script. Just follow below steps.
1. From you CRM environment goto Settings > Customization > Customize the system
2. go to Web Resource.

3. Create a New Web Resource.
4. Give the name, Display Name and Description of the web resource. Select Script (Jscript) as the type of web resource. Then Click on the Text Editor Button.

5. Write a simple Hello World function.
                              function firstprogram(){
                                           alert("Hello World");
                               } 

6. Now, we have to call the JavaScript function from the form load event of Account form. 

7. Navigate to Account main form and open it

                                 

8. Select the Form Properties from the ribbon.

9. In the form properties first we have to add a new Form Libraries. To do this click on Add and then select the web resource we have just created.
10. Then in the Event Handler section write the function name of the JavaScript and click on OK.

11. Then click on, Save > Publish > Save & Close.
12. Now from work place if we click Account > New to open any New Account form, the script will execute and show an alert with "Hello World". 

*** Thank You ***