RSS

CRM 2011 Multi Pick list

01 May

Introduction

In this article we will create a multiple pick list for dynamic CRM form. In which user can enter multiple data from pick list by check box. This will also work on Firefox and Chrome

5-1-2013 1-35-04 PM

Requirement

There was a demand in a project where user want to select not only one but multiple value from a pick list.

Solution

Steps which are needed to be followed:-

  1. Creation of field.

  2. Create Web resource.

  3. Add function to the form.

Creation of Field

There are two fields which are created on the entity you want to make multipicklist :-

  1. Option Set field :- all the option which must be entered

  2. Data Field:- Multiple Lines of Text Field. In which data is stored.

Include both the field on the form.

Create Web resource

Create a web resource with the following 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(var_sc_optionset, var_sc_optionsetvalue, OS, OSV) {

    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 < OS.options.length; i++) {
            var pOption = OS.options[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.innerHTML;

            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 != "") {
        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(OS, var_sc_optionsetvalue) {
    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_sc_optionsetvalue) {
    //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);
    }
}

Add function to the form

There are three function which are needed to be added

  1. On Load :-

    1. Function name :- ConvertToMultiSelect.
      Parameter :- “new_multipicklistoption”, “new_multipicklistvalue”, document.getElementById(“new_multipicklistoption”), document.getElementById(“new_multipicklistvalue”)

    2. Function name :- createTable
      Parameter :- “new_multipicklistvalue”.
      5-1-2013 1-11-58 PM

    1. On Save :-
      1. Function Name :- OnSave
        Parameter :- document.getElementById(“new_multipicklistoption”), “new_multipicklistoption”

5-1-2013 1-12-52 PM

Reference

Multi-Select Option Sets in Dynamics CRM: Part 1(See Part 2 for the Latest Code)

By Sukant Shekhar
Senior Software Engineer @Team DynamicsCRM.
Mindfire Solutions

Advertisements
 
 

Tags: , , , , , , , , , , , , , , , , , , ,

2 responses to “CRM 2011 Multi Pick list

  1. Pavel

    April 5, 2014 at 4:09 pm

    Thanks, just in case, there is also a bit another approach of how to build and use multi check box functionaly https://tunemulticheckbox.codeplex.com/

     
  2. Venkata Ravi

    May 24, 2014 at 4:46 am

    Thank you. I have implemented same thing in different way.
    http://mscrmtutorials.blogspot.in/2014/04/multi-select-checkbox-in-ms-crm-2011.html

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: