Converting Option Set into Multi Select CheckBox /OptionSet using JScript in MS CRM

Create a Multi-Select Option Set in MS CRM 2011/13/15:

Microsoft Dynamics CRM doesn’t support multi-select option sets out of the box.

But we can able to create a multi Select Option Set using JSCRIPT.

For converting Option set into check box we require the following code. here in the below snippet I have created an option set and multiple line of text. I am storing all the checked options in a Multiple line of text and later again retrieving. Where the multiple line of text field is hidden.

Step 1: Create an option set.

Step 2:- Create a Multi Line of Text field.

Step 3: Un Check boxes to Hide,  Visibility of Multiple Line of text field from its Form property

Step 4: Create a new Web Resource and Add it to Form.

 JSCRIPT CODE:

**********************************************************************

function Form_onload() {

    var optionset = document.getElementById("stu_city"); // Option Set Schema Name

    var multiline = document.getElementById("stu_multilinecities"); // Multiline Text bix Schema name

    if (optionset != null && multiline != null) {

        optionset.style.display = "none";            //"none" represents override of existing, the optionset field is overrided

        var pdiv = document.createElement('div');    //Create an element

        pdiv.style = 'overflow-y:auto; height:100px; border:2px #6699cc solid; background-color:#ffffff;'; 

        //overflow y represents vertical scroll bar for options if options are more which will display if options are more.

        optionset.parentNode.appendChild(pdiv);

// Convert option set to check box

        for (var i = 1; i < optionset.options.length; i++) {

            var OptionSetItems = optionset.options[i];

            if (!IsChecked(OptionSetItems.text, multiline)) {

                var addInput = document.createElement('input');

                addInput.type = 'checkbox';

                addInput.style.pixelWidth = 30;

            }

            else {

                var addInput = document.createElement('input');

                addInput.type = 'checkbox';

                addInput.checked = true;

                addInput.style.pixelWidth = 30;

            }

            var addLabel = document.createElement('label');

            addLabel.innerText = OptionSetItems.text;

            var addBr = document.createElement('br');

         

            optionset.nextSibling.appendChild(addInput);

            optionset.nextSibling.appendChild(addLabel);

            optionset.nextSibling.appendChild(addBr);

        }

    }

}

// To check if which check box is selected

function IsChecked(pText, multiline) {

    if (multiline.value != "") {

        var multiline = multiline.value.split(",");

        for (var i = 0; i <multiline.length; i++) {

            if (multiline[i] == pText)

                return true;

        }

    }

    return false;

}

 function Form_onSave() {

  

    var optionset = document.getElementById("stu_city"); // Option Set Schema

  

    var multiline = "";

    var getInput = optionset.nextSibling.getElementsByTagName("input");

    for (var i = 0; i < getInput.length; i++) {

        if (getInput[i].checked) {

            multiline += getInput[i].nextSibling.innerText + ",";

//placing all the options into multiline of text

        }

    }

    Xrm.Page.getAttribute("stu_multilinecities").setValue(multiline); // Multiline Text bix Schema name

}

**********************************************************************

Step 5: Add "Form_onload()" method on Form OnLoad event.

Step 6: Add "Form_onSave()" method on Form OnSave event.

Step 6: Save and Publish.

Yheyyyyy!!!!!!!!!!

Your Option set is Converted into Multi Line Option Set / Multi Selected Check Box.

See the Following images to See the Differences on the Form, Before and After. :) 

:)

Happy CRMing!!!