Multi Option Set / Picklist in CRM 2011 / 13 / 15 using Javascript

50th Article

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

OptionSet Values

Solution: Follow the below steps to select multi Option Set / Picklist values in CRM,

Step 1: Create below fields in Contact form,

50 - Field Schema Names

50 - Option Set Field

50 - Option Set Field Values

Step 2: Place the 2 fields on the required place on contact form, and uncheck Visible by default for “Sport Option Set Values” field.

50 - Form Properties - Option Set Field Values

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“.

50 - OnLoad

Step 5: Select Library “new_multiPickList” and provide the function name “OnSave” on OnSave Event.

Provide the parameters “new_favouritesport“, “new_sportoptionsetsvalues“.

50 - OnSave

Step 6: Save & Publish Contact Form. Open any CRM record to see the below Output,

Download JavaScript Code

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/

Advertisements

15 thoughts on “Multi Option Set / Picklist in CRM 2011 / 13 / 15 using Javascript

  1. I encountered the following errors on two lines of your javaScript, am using CRM 2015 online:

    1. document.getElementById(var_sc_optionset).style.display = “none”;

    TypeError: Unable to get property ‘style’ of undefined or null reference at ConvertToMultiSelect

    2. document.getElementById(var_sc_optionset).parentNode.appendChild(addDiv);
    TypeError: Unable to get property ‘parentNode’ of underfined or null reference at ConvertToMultiSelect

    Please advise.

    Regards
    Tiong

    Like

  2. Hi Tiong,

    Thank you for Visiting my blog.

    Please download JavaScript Code from SkyDrive, mentioned in Step 6. Update your code and let me know if you are still facing any problem.

    Like

  3. Hi, your instructions were spot on and I’m glad it worked. However, now when I try to do an Advanced Find and use the Options as a criteria, the search results doesn’t show anything. It’s as if it can’t read the Options.

    It however pulls true or false for ‘Sport Option Set Values’ but no details as to which options are relevant to which contacts.

    Help?

    Like

  4. Hi,
    I’ve a problem with your JavaScript and CRM Online 2015 Update 1, I receive an error message about document.getElementById(….), seems that is not still supported ….

    Thanks in advance ….

    Sam

    Like

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