This code will Support on IE, Chrome and FireFox....
Create Option set field which you want to convert to multi-select options.
Create a Multiple lines of text field. This field only hold the user select values. So it would be invisible.
After creating the above field that should be added to your form. The text field visibility mode should be invisible.
Then you need to create a new webresource file with the following code:
Create Option set field which you want to convert to multi-select options.
| Create Option set field |
| Multi line text field |
Then you need to create a new webresource file with the following code:
//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";
Xrm.Page.getControl(var_sc_optionsetvalue).setVisible(false);
// Create a DIV container
var addDiv = null;
var addInput = null;
if (window.DOMParser) { //Chrome, Firefox and other browser
try {
addDiv = document.createElement("div");
addDiv.setAttribute("style", "overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#ffffff;");
}
catch (e) {
alert(e);
}
OS.parentNode.appendChild(addDiv);
// Initialise checkbox controls
for (var i = 1; i < OS.options.length; i++) {
var pOption = OS.options[i];
if (!IsChecked(pOption.text, OS, OSV)) {
addInput = document.createElement("input");
addInput.setAttribute("type", "checkbox");
addInput.setAttribute("style", "border:none; width:25px; align:left;");
} else {
addInput = document.createElement("input");
addInput.setAttribute("type", "checkbox");
addInput.setAttribute("checked", "checked");
addInput.setAttribute("style", "border:none; width:25px; align:left;");
}
var addLabel = document.createElement("label"); //("<label />");
addLabel.innerText = pOption.text;
var addBr = document.createElement("br"); //("<br/>"); //it's a 'br' flag
OS.nextSibling.appendChild(addInput);
OS.nextSibling.appendChild(addLabel);
OS.nextSibling.appendChild(addBr);
}
}
else { //IE Support
try {
var addDiv = document.createElement("<div style='overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#ffffff;' />");
}
catch (e) {
alert(e);
}
OS.parentNode.appendChild(addDiv);
// Initialise checkbox controls
for (var i = 1; i < OS.options.length; i++) {
var pOption = OS.options[i];
if (!IsChecked(pOption.text, OS, OSV)) {
var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />");
} else {
var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />");
}
var addLabel = document.createElement("<label />");
addLabel.innerText = pOption.text;
var addBr = document.createElement("<br/>");
OS.nextSibling.appendChild(addInput);
OS.nextSibling.appendChild(addLabel);
OS.nextSibling.appendChild(addBr);
}
}
}
}
// 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;
}
// 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.innerText + ";";
}
}
//save value
control = Xrm.Page.getControl(var_sc_optionsetvalue);
attribute = control.getAttribute();
attribute.setValue(result);
}
After adding the file to webresource you need to add on form OnLoad and OnSave event.
Then pass the parameter on OnLoad event:
| OnLoad function |
OnSave event:
| OnSave Event parameters |
After reload your form it will be displayed like this

