CRM 4.0: Checkbox style Multi-Select Picklist

CRM 4.0 doesn't have many out-of-box user controls, e.g: a mulit-select picklist. 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.

You can make a picklist multi-selectable by enable the picklist mulitple 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 mulit-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.

*NOTE: There is a 'br' flag(var addBr = document.createElement(...) ) just been ignord by blogspot, please replace it when you paste the code!!!

/*
Checkbox style Multi-Select Picklist
author: Jim Wang @ January 2009
http://jianwang.blogspot.com
*/

// PL - the picklist attribute; PLV - used to save selected picklist values
var PL = crmForm.all.new_picklist;
var PLV = crmForm.all.new_picklistvalue;

if( PL != null && PLV != null )
{
  PL.style.display = "none";
  PLV.style.display = "none";

  // Create a DIV container
  var addDiv = document.createElement("<div style='overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#ffffff;' />");
  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 ) )
      var addInput = document.createElement("<input type='checkbox' style='border:none; width:25px; align:left;' />" );
    else
      var addInput = document.createElement("<input type='checkbox' checked='checked' style='border:none; width:25px; align:left;' />" );

    var addLabel = document.createElement( "<label />");
    addLabel.innerText = pOption.text;

    var addBr = document.createElement( "<br />"); //it's a 'br' flag

    PL.nextSibling.appendChild(addInput);
    PL.nextSibling.appendChild(addLabel);
    PL.nextSibling.appendChild(addBr);
  }

  // Check if it is selected
  function IsChecked( pText )
  {
    if(PLV.value != "")
    {
      var PLVT = PLV.value.split("||");
      for( var i = 0; i < PLVT.length; i++ )
      {
        if( PLVT[i] == pText )
          return true;
      }
    }
    return false;
  }

  // Save the selected text, this filed can also be used in Advanced Find
  crmForm.attachEvent( "onsave" , OnSave);
  function OnSave()
  {
    PLV.value = "";
    var getInput = PL.nextSibling.getElementsByTagName("input");

    for( var i = 0; i < getInput.length; i++ )
    {
      if( getInput[i].checked)
      {
        PLV.value += getInput[i].nextSibling.innerText + "||";
      }
    }
  }
}

Note: Please be aware of this is an unsupported customization.