Skip to content

Checkbox-Style Multi-Select Picklist

All credit to James O’Connor for his blog article on providing this free Microsoft Dynamics CRM 2011 solution code for a perfectly-usable checkbox-style multi-select picklist:

Multiselect PicklistArmed with James’ code, I was able to deploy this solution for several clients.  I even use it on our in-house CRM system (see screenshot at left).  I added two tweaks to make is a little user-friendlier, I think:

  1. Made the big-text-box-that-actually-stores-the-picklist-text-values visible – enabling users on the form to quickly see what has already been selected.  This is especially useful if the length of the picklist values scrolls beyond the visable height of the picklist frame.
  2. Since, I had a big list of checkboxes to choose from, I eliminated most of the need for scrolling altogether by making the frame taller.

My application shows a listing of “Marketing Opportunity Areas” that I can apply to any particular account / prospect for “upsell” or general marketing categorization purposes.

Again, please refer to James O’Connor’s blog for the instructions, and feel free to grab same code below with two tweaks mentioned above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//NOTE: Search and replace the following fields with your fields.
//Options Set = sync_mktgopptyarea //Multi Select Save field = sync_mktgopptyareatext
 
//Start ---------------- Multi Select Picklist ---------------------
//Update >> Provide schemaname for picklist field var var_new_picklist = 'sync_mktgopptyarea'; //Update >> Provide schemaname for field which will store the multi selected values for picklist var var_new_picklistvalue = 'sync_mktgopptyareatext';
//Method to convert picklist to multi select picklist function ConvertToMultiSelect() {
// PL - the picklist attribute; PLV - used to save selected picklist values //Update >> Provide picklist schema name var PL = document.all.sync_mktgopptyarea; //Update >> Provide field name which will store the multi selected values for picklist var PLV = document.all.sync_mktgopptyareatext;
//alert(PLV);
if( PL != null &amp;&amp; PLV != null ) {   PL.style.display = "none";   Xrm.Page.getControl(var_new_picklistvalue).<span style="color: #0000ff;"><strong>setVisible(true);</strong></span>
// Create a DIV container   var addDiv = document.createElement("&lt;div style='overflow-y:auto; <span style="color: #0000ff;"><strong>height:320px</strong></span>; border:1px #6699cc solid; background-color:#ffffff;' /&gt;");   PL.parentNode.appendChild(addDiv);
// Initialise checkbox controls   for( var i = 1; i &lt; PL.options.length; i++ )   {     var pOption = PL.options[i];     if( !IsChecked( pOption.text , PL, PLV) )       var addInput = document.createElement("&lt;input type='checkbox' style='border:none; width:25px; align:left;' /&gt;" );     else       var addInput = document.createElement("&lt;input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' /&gt;" );
var addLabel = document.createElement( "&lt;label /&gt;");     addLabel.innerText = pOption.text;
var addBr = document.createElement( "&lt;br/&gt;"); //it's a 'br' flag
PL.nextSibling.appendChild(addInput);     PL.nextSibling.appendChild(addLabel);     PL.nextSibling.appendChild(addBr);   } }//end of if }//end of function
///////Supported functions
// Check if it is selected   function IsChecked( pText , PL, PLV)   {     if(PLV.value != "")     {       var PLVT = PLV.value.split(";");       for( var i = 0; i &lt; PLVT.length; i++ )       {         if( PLVT[i] == pText )           return true;       }     }     return false;   }
// Save the selected text, this field can also be used in Advanced Find   function OnSave()   {     //Update &gt;&gt; Provide picklist schema name     var PL = document.all.sync_mktgopptyarea;
var getInput = PL.nextSibling.getElementsByTagName("input");     var result = '';
for( var i = 0; i &lt; getInput.length; i++ )     {       if( getInput[i].checked)       {         result += getInput[i].nextSibling.innerText + ";";       }     }
//save value     control = Xrm.Page.getControl(var_new_picklistvalue);     attribute = control.getAttribute();     attribute.setValue(result);
}//end of function OnSave()
//End ---------------- Multi Select Picklist ---------------------

8 Comments

  1. Hi
    I too succesfully uses James’ script to create multi select picklists, BUT I have a huge problem by implementing this script to my picklists on the form. The onChange event of the picklists involved in this script doesnt get triggered any more!! Have you tried this? My problem is that I need to have 2 picklist created as multi select picklists, but the second picklist can only be shown on the form if a sudden value is picked in the first picklist… Nothing is happening when I checks the sudden value in the first picklist.

  2. No, sorry, I only implemented it for one multi-select picklist on a form.

  3. Hi there,
    I’ve been using this code for about 7-8 months. About 6 weeks ago, the multi-select picklist is not saving values in the corresponding text field(s) when I click Save or Save and Close. When the record is Marked Complete the values are saved. This all seems to have started happening after I installed rollup6. I’ve tried rollup 8 and I still have the same problem.

    Has anyone else come across this issue and developed a fix?

    Help.
    Damian

    • Hmm,
      You’re on-premise. Seems to be working okay with online. Do you want to post your code here, and we can take a look?

      • Hi Ian, I posted the code. I had another one of our developers look at this but their javascript skills are limited. Still no luck the problem keeps occurring.

  4. Hi Ian,
    Here’s the code I’m using.

    //Start —————- Multi Select Picklist ———————

    // var_new_picklist >> Provide schema-name for picklist field
    // var_new_picklistvalue >> Provide schema-name for field which will store the multi selected values for picklist
    // PL >> Provide Picklist field object
    // PLV >> Provide text field object which will store the multi selected values for picklist

    //Method to convert picklist to multi select picklist
    function ConvertToMultiSelect(var_new_picklist, var_new_picklistvalue, PL, PLV)
    {

    if( PL != null && PLV != null )
    {
    PL.style.display = “none”;
    Xrm.Page.getControl(var_new_picklistvalue).setVisible(false);

    // Create a DIV container
    var addDiv = document.createElement(“”);
    PL.parentNode.appendChild(addDiv);

    // Initialise checkbox controls
    for( var i = 1; i < PL.options.length; i++ )
    {
    var pOption = PL.options[i];
    if( !IsChecked( pOption.text , PL, PLV) )
    var addInput = document.createElement("” );
    else
    var addInput = document.createElement(“” );

    var addLabel = document.createElement( “”);
    addLabel.innerText = pOption.text;

    var addBr = document.createElement( “”); //it’s a ‘br’ flag

    PL.nextSibling.appendChild(addInput);
    PL.nextSibling.appendChild(addLabel);
    PL.nextSibling.appendChild(addBr);
    }
    }//end of if
    }//end of function

    ///////Supported functions

    // Check if it is selected
    function IsChecked( pText , PL, PLV)
    {
    if(PLV.value != “”)
    {
    var PLVT = PLV.value.split(“;”);
    for( var i = 0; i > Provide schema-name for field which will store the multi selected values for picklist
    // PL >> Provide Picklist field object
    // Save the selected text, this field can also be used in Advanced Find
    function OnSave(PL, var_new_picklistvalue)
    {
    var getInput = PL.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_new_picklistvalue);
    attribute = control.getAttribute();
    attribute.setValue(result);

    }//end of function OnSave()

    //End —————- Multi Select Picklist ———————

  5. Hi Ian,

    Thank you for posting this. I’ve been trying to implement this but keep getting this ‘OnLoad’ error, would love it if you could help me out. I think I’m going wrong somewhere in editing the Form Properties. Please email me!


Add a Comment

Your email address will not be published. Required fields are marked *