Dynamics 365: April 2014

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

1. To get length of picklist options we should use below line of code in javaScript

var length=Xrm.Page.getAttribute("field Name").getOptions().length;

2. To get pickpist item of an index some x use below code

var optionSetXrm=Xrm.Page.getAttribute("field Name");

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

var optionSetText= optionSetXrm.getOptions()[i].text;
var optionSetValue= optionSetXrm.getOptions()[i].value;

}

You may like below posts

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

Improving MS CRM Performance

Performance Center in MS CRM 2013

Calculated Field in Dynamics CRM 2015

IME Mode in MS CRM