Thursday, June 21, 2012

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 ***


No comments:

Post a Comment