This code will Support on IE, Chrome and FireFox....
Create Option set field which you want to convert to multi-select options.
|
Create Option set field |
Create a
Multiple lines of text field. This field only hold the user select values. So it would be invisible.
|
Multi line text field |
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:
//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
No comments:
Post a Comment