Tuesday 18 December 2012

Multi-selection options sets supports in all browser in CRM 2011 using javascript

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