I have a
one req. in one of the CRM Projects where user want multiple selection option
in Option Set
we can
create a Multiple Pick List for Dynamic CRM 2011/2013 form too.
User can
enter multiple data from Pick List by Checkbox. This will also work on in major
browsers (IE, Firefox, Chrome). See the below screen shot.
Below is the js 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);
}
}
