Yes it is my 50th Article in WordPress. Hope you all like my articles.
Please provide your valuable comments on my articles to improve further.
Happy New Year to all my blog viewers.
Task: Create a Multi Option Set in contact, for the OptionSet below
Solution: Follow the below steps to select multi Option Set / Picklist values in CRM,
Step 1: Create below fields in Contact form,
Step 2: Place the 2 fields on the required place on contact form, and uncheck Visible by default for “Sport Option Set Values” field.
Step 3: Create Javascript Webresource “new_multiPickList”. Open Text Editor, Copy & Paste the below Code
// Method to convert an optionset to multi select OptionSet
function ConvertToMultiSelect(var_sc_optionset, var_sc_optionsetvalue) {
var optionSetObj = Xrm.Page.getAttribute(var_sc_optionset);
if (optionSetObj != null) {
var options = optionSetObj.getOptions();
if (options != null) {
document.getElementById(var_sc_optionset).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”;
document.getElementById(var_sc_optionset).parentNode.appendChild(addDiv);
// Declaration of variables will be used in the loop depending upon the browser
var initialValue = 0,
maxValue = 0,
nAgt = navigator.userAgent;
if (nAgt.indexOf(“Firefox”) != -1) { // If the broswer is “Firefox”
initialValue = 1;
maxValue = options.length;
}
else if (nAgt.indexOf(“Chrome”) != -1 || nAgt.indexOf(“IE”) != -1) { // If the browser is Chrome or IE
initialValue = 0;
maxValue = options.length – 1;
}
else if (nAgt.indexOf(“Safari”) != -1) { // If the browser is “Safari”
initialValue = 1;
maxValue = options.length;
}
// Initialize checkbox controls
for (var i = initialValue; i < maxValue; i++) {
var pOption = options[i];
if (!IsChecked(pOption.value, var_sc_optionsetvalue)) {
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(var_sc_optionset, var_sc_optionsetvalue);
createTable(var_sc_optionsetvalue);
}
} else {
var addInput = document.createElement(“input”);
addInput.type = “checkbox”;
addInput.checked = true;
addInput.setAttribute(“checked”, true);
addInput.checked = “checked”;
addInput.defaultChecked = true;
addInput.style.border = “none”;
addInput.style.width = “25px”;
addInput.style.align = “left”;
addInput.style.color = “#000000”;
addInput.onclick = function() {
OnSave(var_sc_optionset, 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
document.getElementById(var_sc_optionset).nextSibling.appendChild(addInput);
document.getElementById(var_sc_optionset).nextSibling.appendChild(addLabel);
document.getElementById(var_sc_optionset).nextSibling.appendChild(addBr);
}
}
}
}
// Check if it is selected function IsChecked(pText, optionSetValue) {
var selectedValue = Xrm.Page.getAttribute(optionSetValue).getValue();
if (selectedValue != “” && selectedValue != null) {
var OSVT = selectedValue.split(“,”);
for (var i = 0; i < OSVT.length; i++) {
if (OSVT[i] == pText)
return true;
}
}
return false;
}
// var_sc_optionsetvalue >> Provide logical-name for field which will
// store the multi selected values for Option Set
// optionSet>> Provide logical-name of Option Set field
function OnSave(optionSet, var_sc_optionsetvalue) {
var OS = document.getElementById(optionSet),
options = Xrm.Page.getAttribute(optionSet).getOptions(),
getInput = OS.nextSibling.getElementsByTagName(“input”),
result = “”,
result1 = “”;
var nAgt = navigator.userAgent;
for (var i = 0; i < getInput.length; i++) {
if (getInput[i].checked) {
result += getInput[i].nextSibling.innerHTML + “,”;
if (nAgt.indexOf(“Firefox”) != -1) { //If the broswer is “Firefox”
result1 += options[i + 1].value + “,”;
}
else if (nAgt.indexOf(“Chrome”) != -1 || nAgt.indexOf(“IE”) != -1) { //If the browser is Chrome or IE
result1 += options[i].value + “,”;
}
else if (nAgt.indexOf(“Safari”) != -1) { //If the browser is “Safari”
result1 += options[i + 1].value + “,”;
}
}
}
//save value
Xrm.Page.getAttribute(var_sc_optionsetvalue).setValue(result1);
}
// var_sc_optionsetvalue >> Provide logical-name for field which will
// store the multi selected values for Option Set
function createTable(var_sc_optionsetvalue) { // Get OptionSet value
var OptionValue = Xrm.Page.getAttribute(var_sc_optionsetvalue),
c_OptionValue = Xrm.Page.getControl(var_sc_optionsetvalue),
d_OptionValue = var_sc_optionsetvalue + “_d”;
if (OptionValue.getValue() != null) {
var OptionValueHtml = “<div style=\”overflow-y:auto;width:100%;display: none; min-height: 5em; max-height: 1000px;\”>”,
OptionValueHtml += “<table style=’width:100%;height: 100%;’>”,
OptionValueV = OptionValue.getValue(),
OptionValueT = OptionValueV.split(“,”),
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;
}
}
Step 4: Open Contact Form -> Form Properties.
Add the webresource “new_multiPickList” on Contact Form.
Select Library “new_multiPickList” and provide the function name “ConvertToMultiSelect” on “OnLoad” Event.
Provide the parameters “new_favouritesport“, “new_sportoptionsetsvalues“.
Step 5: Select Library “new_multiPickList” and provide the function name “OnSave” on OnSave Event.
Provide the parameters “new_favouritesport“, “new_sportoptionsetsvalues“.
Step 6: Save & Publish Contact Form. Open any CRM record to see the below Output,
Sources:
http://slalomdotcom.wordpress.com/2011/05/23/multi-select-option-sets-in-dynamics-crm/
http://mscrmmindfire.wordpress.com/2014/01/30/crm-2013-multi-pick-list-2/