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