The Microsoft Dynamics CRM Blog
News and views from the Microsoft Dynamics CRM Team

CRM 4.0: Checkbox style Multi-Select Picklist

CRM 4.0: Checkbox style Multi-Select Picklist

  • Comments 33

Our guest blogger is CRM MVP Jim Wang joining us from Reading England. Jim blogs regularly at Microsoft Dynamics CRM – Jim Wang’s technical blog [MVP].

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.

   1: 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.}  

Cheers,

Jim Wang

UPDATE: This technique is actually an unsupported customization. Implementing this will place your implementation in an unsupported state. Be sure to remove this customization before calling support for any issue.

  • hai ,

    i m newbie .I was searching for this it helped me alot thanks alot and hope will find more help in near future

  • It doesnt seem to work for me :(

    Error on page .. any help will be great !!!

  • Kamaldeep,

    A description of the error would be needed in order to trouble shoot.

  • How can I add this script for multiple lists?

    In the form event? it will become too long.

  • Jim, thanks for the code.

    Line 32 & 33 of your code is split up; what is the actual argument value between the double quotes " "? is it supposed to be a blank character?

    Thanks!

  • Hi John,

    It's a  <br />  flag.

    Cheers,

    Jim

  • Hi guys,

    You can go to my blog to copy the whole source code. Please let me know if you have trouble about it.

    Cheers,

    Jim

  • How can I add this script for multiple lists?

    In the form event? it will become too long.

    Stella

  • Jim,

    Thank you so much for the code.  Worked like a charm!  I had 2 multipicklist on the form putting your entire code into a function and calling it with the 2 form elements as parameters.  And voila!

    Thanks again!

    Linna

  • Hi Jim,

    I tried your code and it works pretty smooth, Thanx. But then the issue crops up if I am giving the new_picklist attribute as "Business Required" and trying to save the form, CRM is prompting "No value for products". Hence I have to remove the business required field and assign it as no constraints and it works well.

    Any suggestions would be appreciated?

    Prince

  • Hi, I trayed, but it doesn´t works, just appears both fields (Picklist and Navchar) but not the boxes; what I´m doing bad?

  • http://screencast.com/t/JscC4sFl

    I am just getting the 2 boxes on the screen.  I have named the fields exactly what you did in your code.   This is the only script on the object.  

    Suggestions?

  • I have done everything as you mentioned but it is not displaying anything. Textbox and picklist are coming in their normal formats.

    Suggest something?

  • Brilliant, works really well.  Thanks a lot for this.  I have 5 picklists all using your code wrapped up in a function working just the same as Linna describes above.

    function customerproblems(pickList, pickListValue)

    {

    // PL - the picklist attribute; PLV - used to save selected picklist values

    var PL = pickList;

    var PLV = pickListValue;

    ...then all other code as supplied

    }

    customerproblems(crmForm.all.new_2dproblems,crmForm.all.new_2dproblemvalues)

    customerproblems(crmForm.all.new_lcmsproblems,crmForm.all.new_lcmsproblemvalues)

    customerproblems(crmForm.all.new_maldiproblems,crmForm.all.new_maldiproblemvalues)

    customerproblems(crmForm.all.new_1dproblems,crmForm.all.new_1dproblemvalues)

    customerproblems(crmForm.all.new_productgroup,crmForm.all.new_productgroupvalue)

  • Hello, I have the same problem like the others above.

    I created the attributes, printed them on the form and copied the code into onLoad. Also corrected the br-flag. But I'm still getting two boxes on the screen and no checkboxes with multipicklist style.

    Soon answer would be great!

Page 1 of 3 (33 items) 123
Leave a Comment
  • Please add 6 and 1 and type the answer here:
  • Post