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

12 comments:

  1. Excellent work! I am new to coding in Java script. Hence found it very useful.

    I made the following changes.
    1) The first check box that should be getting the value from the option set was empty . So I made the following change in

    // Initialise checkbox controls
    for (var i = 1; i < OSX.getOptions().length; i++) {

    --Changed the var i = 0

    2) When I select a check box , the value did not get added into the text field. Instead the selected value got added as a new check box value. SO i made the following change in the OnSave function :

    var var_sc_optionsetvalue = "new_multipicklistoption";

    changed to
    var var_sc_optionsetvalue = "new_multipicklistvalue";

    With this change I obtained my requirements.

    Thanks for the code.

    ReplyDelete
  2. Thanks for the code, it worked fine for the first "multiline text type field (checkbox)" and the first "option set type field". Please help me with two more doubts or errors:
    1. While I tried to create second "multiline text type field" and the second "option set type field" the same way, in the same form, I got an error message like "unable to get the value of the property 'getElementsByTagName' : object is null or undefined".
    2. In the created "Multi Select Checkbox", I can select more than one option at a time but I would like to select only one option maximum at a time.

    ReplyDelete
    Replies
    1. 1. I would like to see the code to help you on this error.
      2. Picklist itself will give you the option of selecting only one option at a time. But if you want this code to allow the user to select only one option then it requires a bit code change. Let me if you still have that requirement.

      Delete
  3. Thanks.. it's really Help Full

    ReplyDelete
  4. Ideally it won't support. It needs an extra effort from developer for reporting in this scenario.

    ReplyDelete
  5. I might be doing something wrong but is there any way to have the form read the value field OnLoad to re-check the options you had set already set as although they are being stored as text the table clears each time I open the form?

    ReplyDelete
  6. I have done everything mentioned above, however, when i refresh the form with the checkbox, all of my selections are cleared, with the a error message saying dynamics crm encountered a problem

    ReplyDelete
    Replies
    1. Because we are storing all the selected values in a hidden field, we need to save the form before refreshing. Is it still throwing an error even after save?

      Delete
    2. Hi ravi ..am trying multiselect from optionset.
      Am getting error "cannot read property 'nextsibling of null at onsave "

      Delete
  7. Replies
    1. This is not supported as we are using dom in this scenario. But Microsoft is releasing CRM 9 (next version) mostly in july end, in that release they are introducing multi select control. Hope this will helps.

      Delete

Featured Post

Improving MS CRM Performance

Performance on MS CRM is always a crucial thing and we may follow different ways to achieve the performance thing. Below is the one more a...