Multi Select Checkbox in MS CRM 2011 using JavaScript

This article describles about creating Multi Select Checkbox in MS CRM 2011 using JavaScript

1. Create an option set field (ex: new_multipicklistoption ) and add to your form

 

2   Create a Multi line Text filed with the name new_multiselectvalue

 

 

 

 

 

 

 

 

       

           3. Create a web resource.

 

 

 

 

 

 

 

 

     4.In created web resource file add below lines of code

// var_sc_optionset >>  Provide schema-name for Option Set field

// var_sc_optionsetvalue >> Provide schema-name for field which will

//                          store the multi selected values for Option Set

// OS >> Provide Option Set field object

//       (Ex:- document.getElementById("Option Set field schema-name"))

// OSV >> Provide text field object which will store the

//        multi selected values for Option Set

//       (Ex:- document.getElementById("text field schema-name"))

//Method to convert an optionset to multi select Option Set

function ConvertToMultiSelect() {

    debugger;

    var var_sc_optionset = "new_multipicklistoption";

    var var_sc_optionsetvalue = "new_multiselectvalue";

    var OS = document.getElementById("new_multipicklistoption");

    var OSV = document.getElementById("new_multiselectvalue");

    var OSX = Xrm.Page.getAttribute("new_multipicklistoption");//Using OSX to retrieve options , length, text and value

    if (OS != null && OSV != null) {

        OS.style.display = "none";

        // Create a DIV container

        var addDiv = document.createElement("div");

        addDiv.id = var_sc_optionsetvalue + "_m";

        addDiv.style.width = "100%";

        addDiv.style.height = "80px";

        addDiv.style.background = "#ffffff";

        addDiv.style.color = "white";

        addDiv.style.overflow = "auto";

        addDiv.style.border = "1px #6699cc solid";

        OS.parentNode.appendChild(addDiv);

        // Initialise checkbox controls

        for (var i = 1; i < OSX.getOptions().length; i++) {

            var pOption = OSX.getOptions()[i];

            if (!IsChecked(pOption.innerHTML, OS, OSV)) {

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

                addInput.type = "checkbox";

                addInput.style.border = "none";

                addInput.style.width = "25px";

                addInput.style.align = "left";

                addInput.style.color = "#000000";

                addInput.onclick = function () {

                    OnSave(OS, var_sc_optionsetvalue);

                    createTable(var_sc_optionsetvalue);

                }

            }

            else {

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

                addInput.type = "checkbox";

                addInput.checked = "checked";

                addInput.style.border = "none";

                addInput.style.width = "25px";

                addInput.style.align = "left";

                addInput.style.color = "#000000";

                addInput.onclick = function () {

                    OnSave(OS, var_sc_optionsetvalue);

                    createTable(var_sc_optionsetvalue);

                }

            }

            //Create Label

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

            addLabel.style.color = "#000000";

            addLabel.innerHTML = pOption.text;

            var addBr = document.createElement("br"); //it's a 'br' flag

            OS.nextSibling.appendChild(addInput);

            OS.nextSibling.appendChild(addLabel);

            OS.nextSibling.appendChild(addBr);

        }

    }

}

//Supported functions

// Check if it is selected

function IsChecked(pText, OS, OSV) {

    if (OSV.value != "" && OSV.value != undefined) {

        var OSVT = OSV.value.split(",");

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

            if (OSVT[i] == pText)

                return true;

        }

    }

    return false;

}

// var_sc_optionsetvalue >> Provide schema-name for field which will

//                          store the multi selected values for Option Set

// OS >> Provide Option Set field object

// Save the selected text, this field can also be used in Advanced Find

function OnSave() {

    var OS = document.getElementById("new_multipicklistoption");

    var var_sc_optionsetvalue = "new_multipicklistoption";

    alert("OnSave");

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

    var result = "";

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

        if (getInput[i].checked) {

            result += getInput[i].nextSibling.innerHTML + ",";

        }

    }

    //save value

    control = Xrm.Page.getControl(var_sc_optionsetvalue);

    attribute = control.getAttribute();

    attribute.setValue(result);

}

function createTable() {

    var var_sc_optionsetvalue = "new_multiselectvalue";

    //get option set value

    var OptionValue = Xrm.Page.getAttribute(var_sc_optionsetvalue);

    var c_OptionValue = Xrm.Page.getControl(var_sc_optionsetvalue);

    var d_OptionValue = var_sc_optionsetvalue + "_d";

    if (OptionValue.getValue() != null) {

        c_OptionValue.setVisible(true);

        var OptionValueHtml = "<div style=\"overflow-y:auto;width:100%; min-height: 5em; max-height: 1000px;\">";

        OptionValueHtml += "<table style='width:100%;height: 100%;'>";

        var OptionValueV = OptionValue.getValue();

        var OptionValueT = OptionValueV.split(",");

        var cols = 0;

        for (var row = 0; row < OptionValueT.length - 1; row++) {

            OptionValueHtml += "<tr  style='height:20px;'>";

            for (var i = cols; i < cols + 3; i++) {

                OptionValueHtml += "<td style='width:33%;'>";

                if (OptionValueT[i] != null || OptionValueT[i] != undefined) {

                    OptionValueHtml += OptionValueT[i];

                }

                OptionValueHtml += "</td>";

            }

            cols = cols + 3;

            OptionValueHtml += "</tr>";

            if (cols >= OptionValueT.length) {

                break;

            }

        }

        OptionValueHtml += "</table>";

        OptionValueHtml += "</div>";

        document.getElementById(d_OptionValue).innerHTML = OptionValueHtml;

    }

    else {

        c_OptionValue.setVisible(false);

    }

}

5. Once done with the coding, add ConvertToMultiSelect and createTable methods in OnLoad event as shown in the below screen.

6. And in OnSave event add “OnSave” method as shown in the below picture

You may like below posts

Improving MS CRM Performance

Performance Center in MS CRM 2013

date and time field behavior in MS CRM

Upsert in MSCRM

Locking mechanism in MS CRM

Ticker Symbol Field in MS CRM

Themes in MS CRM

Enable Tracing in MS CRM

Calculated Field in Dynamics CRM 2015

IME Mode in MS CRM