CRM 4.0 Multi Picklist

This post is an extension to my previous post. I have to say I had to agree with the client on this one. Generally when you need a multi picklist you can simply create a new entity to hold the values, create a N:N relationship with the relevant entity and use the left navigation link or display the N:N view in an iframe. But what do you do when you need to put 13 “Multi picklists” on a form. This case is even harder to “plead” when the entity truly holds a single attribute. Eventually I built this multi picklist using this simple js which I hope can save you time if your client chooses not to take the easy way out..

I can't disclose the original entity so I integrated the code on the contact's addresstype attribute for the sake of this post.




Because crm does not support multi value storage for a single field you need to add a new attribute that acts as storage for the user selections.
In the example below the original picklist is new_visa and the new_visa_s is used as “storage”.

The Size property defines the picklist.size / container (TD) row span. The picklist original size is 1 (row span) which mean it will occupy a single row like a regular text field. If you want the picklist to spawn more rows you need to create blank spaces under the picklist field. The code changes the form structure so the picklist does not push the next row elements down as it grows in size.



Finally call the transform method to initiate the transformation form a single to a multi picklist
I only used this on a 1:1 form layout so I can’t say if this works for all form layouts.

function OnCrmPageLoad()
{
 var multiPicklist = new MultiPicklist("new_visa","new_visa_s");
  multiPicklist.Size = 3;
  multiPicklist.Transform();
} 

function MultiPicklist( picklistId , storageId )
{
 var Instance = this;
 var getElem  = document.getElementById;
 Instance.Picklist = getElem( picklistId );
 Instance.Storage  = getElem( storageId  );
 Instance.Size     = 1;
 
 Instance.Transform = function()
 {
  if( !Instance.Picklist )
   return alert( "Picklist " + picklistId + " is undefined" );
 
  if( !Instance.Storage )
   return alert( "Picklist Storage " + storageId + " is undefined" );
  
  //Hide the storage attribute
  hideStorage();
  //fix the layout so the picklist won’t push the next row down
  fixLayout();
  //this is what makes the picklist a multi picklist
  Instance.Picklist.multiple = true;
  Instance.Picklist.size = Instance.Size * 2;
  //Attach to the onsave event
  crmForm.attachEvent( "onsave" , Instance.OnFormSave );
  
  //parse the option list 
  var optionList;
  if((optionList = getStorageOptions()) == null) 
   return;
  //re-select the picklist options
  for( var i = optionList.length - 1 ; i >= 0  ; i-- )
  {
     for( var k = Instance.Picklist.options.length - 1 ; k >= 0 ; k-- )
     { 
         var option = Instance.Picklist.options[k];
         if( option.value == optionList[i] )
             option.selected = true;
     }
  }
 }
 
 Instance.OnFormSave = function()
 {
  //concatenate the selected options
  var optionSummery = "";
  for( var k = 0 ; k < Instance.Picklist.options.length ; k++ )
  { 
   var option = Instance.Picklist.options[k];
   if( option.selected )
    optionSummery += option.value + ","; 
  }
  //remove trailing comma
  Instance.Storage.DataValue = optionSummery.replace(/,$/gi,"");
 }
 
 function fixLayout()
 {
  /*
   The idea is to find the current picklist position cell in the row
   Go down the number of rows as specified by the Size Property
   Delete the cells below the picklist and change the picklist cell rowspan attribute
         */
  var countTD    = 0;
  var picklist_d = getElem( picklistId + "_d" );
  var picklist_c = getElem( picklistId + "_c" );
  var currentTR  = picklist_d.parentElement;
  var currentTD  = picklist_c.previousSibling;
  
  while( currentTD && currentTD.tagName == "TD" )
  {
   countTD++;
   currentTD = currentTD.previousSibling;
  }
  
  for( var i = 1 ; i < Instance.Size ; i++ )
  {
   currentTR = currentTR.nextSibling;
   if( currentTR )
   {
    currentTR.deleteCell(countTD); 
    currentTR.deleteCell(countTD);
   }
  }
  
  picklist_d.rowSpan = Instance.Size;
  picklist_c.rowSpan = Instance.Size;
 }
 
 function getStorageOptions()
 {
  if( Instance.Storage.DataValue == null )
   return null;
  return Instance.Storage.DataValue.split(',');
 }
 
 function hideStorage()
 {
  getElem( storageId + "_d" ).style.visibility = "hidden";
  getElem( storageId + "_c" ).style.visibility = "hidden";
  Instance.Storage.style.visibility = "hidden";
 }
}

OnCrmPageLoad();