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/
Discover more from Arun Potti's Power Platform blog
Subscribe to get the latest posts to your email.
Reblogged this on Scottish Crm Guy.
Hey Arun thanks for the info…..
I am getting the below error on save of the form
“Unable to get property next sibling of undefined or null reference”
Hi Kirthi,
Please find Updated Code on OnSave.
Where is the updated code
Code is already updated. Please follow the post.
Nice implementation Arun.
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
What browser are you using ?
IE 11
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.
No problem. Thanks.
getting same error and step 6 code is not available
Hi Amnark,
Link updated. Please check now.
Hi,
for search elements we can change value to label?
Please elaborate your question
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?
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