Skip to content

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 ---------------------

Please drop us a note via the form below with your comments or questions on this blog post; or if there is anything we can help you with.