Home > MS CRM 4.0 > CRM 4.0: Checkbox style Multi-Select Picklist

CRM 4.0: Checkbox style Multi-Select Picklist


CRM 4.0 doesn’t have many out-of-box user controls, such as multi-select picklists. The standard CRM picklist can only save one value in the database, it’s not easy to extend this functionality, in addition, you have to deal with the Advanced Find feature.

PickList

You can make a picklist multi-selectable by enable the picklist multiple attribute , e.g: crmForm.all.new_picklist.multiple = true; And then save the selected values somewhere else. However, it does not very impressive the user because the user has to use the CTRL key to select options, which is not user-friendly (Thanks for Alastair Westland (PM @ Parity) who work with me to improve the interface design:)

The script below will draw a checkbox style multi-select picklist control on the CRM form, and then get options from the real picklist attribute. So how to use it?

1. Create a standard picklist attribute with all options in CRM, put it on the CRM Form. e.g: new_picklist;
2. Create another nvarchar attribute in CRM to save the selected text, put it on the CRM Form and hide the label. e.g. new_picklistvalue;
3. Put the following script in the Form.OnLoad() event.

 01./*

   2: 02.Checkbox style Multi-Select Picklist 
   3: 03.author: Jim Wang @ January 2009 
   4: 04.http://jianwang.blogspot.com 
   5: 05.*/  
   6: 06.  
   7: 07.// PL - the picklist attribute; PLV - used to save selected picklist values  
   8: 08.var PL = crmForm.all.new_picklist;  
   9: 09.var PLV = crmForm.all.new_picklistvalue;  
  10: 10.  
  11: 11.if( PL != null && PLV != null )  
  12: 12.{  
  13: 13.  PL.style.display = "none";  
  14: 14.  PLV.style.display = "none";  
  15: 15.  
  16: 16.  // Create a DIV container  
  17: 17.  var addDiv = document.createElement("<div style='overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#ffffff;' />');  
  18: 18.  PL.parentNode.appendChild(addDiv);  
  19: 19.  
  20: 20.  // Initialise checkbox controls  
  21: 21.  for( var i = 1; i < PL.options.length; i++ )  
  22: 22.  {  
  23: 23.    var pOption = PL.options[i];  
  24: 24.    if( !IsChecked( pOption.text ) )  
  25: 25.      var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />' );  
  26: 26.    else  
  27: 27.      var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />' );  
  28: 28.  
  29: 29.    var addLabel = document.createElement( "<label />");  
  30: 30.    addLabel.innerText = pOption.text;  
  31: 31.  
  32: 32.    var addBr = document.createElement( "  
  33: 33."); //it's a 'br' flag  
  34: 34.  
  35: 35.    PL.nextSibling.appendChild(addInput);  
  36: 36.    PL.nextSibling.appendChild(addLabel);  
  37: 37.    PL.nextSibling.appendChild(addBr);  
  38: 38.  }  
  39: 39.  
  40: 40.  // Check if it is selected  
  41: 41.  function IsChecked( pText )  
  42: 42.  {  
  43: 43.    if(PLV.value != "")  
  44: 44.    {  
  45: 45.      var PLVT = PLV.value.split("||");  
  46: 46.      for( var i = 0; i < PLVT.length; i++ )  
  47: 47.      {  
  48: 48.        if( PLVT[i] == pText )  
  49: 49.          return true;  
  50: 50.      }  
  51: 51.    }  
  52: 52.    return false;  
  53: 53.  }  
  54: 54.  
  55: 55.  // Save the selected text, this filed can also be used in Advanced Find  
  56: 56.  crmForm.attachEvent( "onsave" , OnSave);  
  57: 57.  function OnSave()  
  58: 58.  {  
  59: 59.    PLV.value = "";  
  60: 60.    var getInput = PL.nextSibling.getElementsByTagName("input");  
  61: 61.  
  62: 62.    for( var i = 0; i < getInput.length; i++ )  
  63: 63.    {  
  64: 64.      if( getInput[i].checked)  
  65: 65.      {  
  66: 66.        PLV.value += getInput[i].nextSibling.innerText + "||";  
  67: 67.      }  
  68: 68.    }  
  69: 69.  }  
  70: 70.}  

 

 

Advertisements
Categories: MS CRM 4.0
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: