CRM 4.0 Enhancing Picklists presentation layer

Picklists are usually used to provide a short range of predefined options that further describe our data. To make them usable it’s suggestible to keep the number of Picklist options to a minimum. Although a Picklist presentation layer is functional data is not always that boring and deserves a better re-presentation.

I personally think that controls should convey more emotions and strengthen bond between what is showing and how it’s shown. Take for example a simple Picklist that has values 1-5 that describe the account rating or a Picklist of shipping methods with well known company names. No doubt presenting the following control to the user makes more sense than just selecting a number.



The concept used in this example can be developed further to support more advanced scenarios. The nice thing about it is that most of the bits that handle the actual show and hide of the Picklist menu can be reused. So if you find yourself needing to create a more complex Picklist you should center most of your effort by overriding the buildPopup function (see code).

The code exposes most of the styling attributes which means you don’t have to tear it apart if you feel like redecorating ;+).



In order to facilitate the construction of options and their respective images the code uses a simple technique that accepts an Image base URL and utilizes the picklist id to identify specific images folder. The image names represent their index i.e. 0.gif, 1.gif, 2.gif and so on. If need to use option’s value instead you must also change the code that constructs the image URL.

CRMWeb 
   | -- ISV 
      |-- IMGPL  (this is the ImageBaseUrl)
         |-- selected.gif (A small arrow that points to the selected option)
         |-- gi_rating       (This is the Picklist id)
            |-- 0.gif    (Empty option X image – index 0)
            |-- 1.gif    (first option – index 1)
            |-- 2.gif    (second option – index 2 and so on..,)

Eventually the image URL is http://servername:port/iSV/IMGPL/gi_rating/1.gif
Feel free to comment.

String.prototype.Format = function( args )
{
   return this.replace( /\{(\d{1})\}/ig , function match(){return args[arguments[1]];});
}

function ImagePicklist(picklistId)
{
   var ipl = this;
 
   if (!(ipl.Picklist = crmForm.all[picklistId])) 
         return alert("Picklist is missing");
 
   if (ipl.Picklist.Disabled) 
         return;
 
   ipl.ImageBaseUrl = "/ISV/IMGPL/";
   ipl.HoverStyle = {Color: "#FFFFFF",Background: "#000000"}
   ipl.HasEmptyOption = true;
   ipl.Height = 213;
   ipl.BackgroundColor = "#FFFFFF";
   ipl.Scroll = true;
 
   ipl.Picklist.ondblclick = function(){show();}
   ipl.Picklist.onmousedown  = function(){show();}
   ipl.Picklist.onfocusout = function()
   {
      ipl.Picklist.Popup.document.body.innerHTML = "";
      ipl.Picklist.Popup.hide(); 
   }
 
   function show()
   {
      ipl.Picklist.Disabled = true;
      buildPopup();
      var left  = ipl.Picklist.Position.X;
      var top   = ipl.Picklist.Position.Y;
      var width = ipl.Picklist.offsetWidth;
      var height = ipl.Height 
      ipl.Picklist.Popup.show(left ,top ,width ,ipl.Height ,document.body);
      setTimeout(function(){ipl.Picklist.Disabled = false;},100);
      return false;
   }
 
   ipl.MouseOver = function(option)
   {
      option.style.backgroundColor = ipl.HoverStyle.Background;
      option.style.color = ipl.HoverStyle.Color;
   }
 
   ipl.MouseOut = function(option)
   {
      option.style.backgroundColor = ipl.BackgroundColor;
      option.style.color = "#000000";
   }
 
   ipl.Onclick = function(option)
   {
      ipl.Picklist.onfocusout();  
      ipl.Picklist.selectedIndex = option.index
      ipl.Picklist.focus();
   }
 
   function getPosition(control)  
   {      
      var left = 0;
      var top = control.offsetHeight; 
  
      do  {
         left += control.offsetLeft;
         top  += control.offsetTop;
      }   while (control = control.offsetParent);

      return {X:left,Y:top}
   } 
 
   function buildPopup()
   {
      ipl.Picklist.Position = getPosition(ipl.Picklist);
      ipl.Picklist.Popup.document.body.style.backgroundColor = ipl.BackgroundColor; 
  
      var div = document.createElement("DIV");
      div.style.cssText = "overflow-y:{0};height:{1}px;".Format([(ipl.Scroll?"scroll":"hidden"),(ipl.Height-13)]);
   
      for (var i=(ipl.HasEmptyOption?0:1);i< ipl.Picklist.options.length;i++)
      {
         var option = ipl.Picklist.options[i];
    
         var item = document.createElement("DIV");
         item.index = i;
         item.onmouseover = "document.ImagePicklist.MouseOver(this);";
         item.onmouseout  = "document.ImagePicklist.MouseOut(this)";
         item.onclick = "document.ImagePicklist.Onclick(this)";
         item.title = "Value = {0}".Format([option.value]);
         item.style.lineHeight = "25px"
         item.style.cursor = "hand";
    
         var selItem = null;
         if (option.selected)
         {
            selItem = document.createElement("IMG");
            selItem.style.height = "16px";
            selItem.style.width  = "16px";
            selItem.src = "{0}selected.gif".Format([ipl.ImageBaseUrl]);
            selItem.align = "middle";
         }
         else
         {
            selItem = document.createElement("SPAN");
            selItem.innerHTML = " "; 
            selItem.style.width = "16px";
         }
     
         item.appendChild(selItem);
         item.appendChild(document.createTextNode(" "));
         
         var img  = document.createElement("IMG");
         img.src  = "{0}{1}/{2}.gif".Format([ipl.ImageBaseUrl,ipl.Picklist.id,i]);
     
         item.appendChild(img);
         var optText = null;
         if (option.selected)
         {
            optText = document.createElement("B");
            optText.innerText = " {0}".Format([option.innerText]);
         }
         else
         {
            optText = document.createTextNode(" {0}".Format([option.innerText]));
         }
         item.appendChild(optText);
         div.appendChild(item);
      }
   
      ipl.Picklist.Popup.document.body.innerHTML = div.outerHTML;
   }
  
   { //Initialize
   
      ipl.Picklist.Popup = window.createPopup();
      /* A reference from the window popup to ipl */
      ipl.Picklist.Popup.document.ImagePicklist = ipl;
   
      var popUpBodyStyle = ipl.Picklist.Popup.document.body.style;
      popUpBodyStyle.border  = "1px solid gray";
      popUpBodyStyle.padding = 0;
      popUpBodyStyle.margin  = 5;
   }
}

function OnCrmPageLoad()
{
   
   window.ctcPicklist = new ImagePicklist("customertypecode");
   ctcPicklist.ImageBaseUrl = "/ISV/IMGPL/";
   ctcPicklist.HoverStyle = {Color: "gold",Background: "#FF3454"}
   ctcPicklist.HasEmptyOption = false;
 
   window.accPicklist = new ImagePicklist("accountcategorycode");
   accPicklist.Height = 85;
   accPicklist.Scroll = false;
   accPicklist.BackgroundColor = "yellow";
 
   window.graPicklist = new ImagePicklist("gi_rating");
   graPicklist.Height = 165;
   graPicklist.Scroll = false;
   graPicklist.HoverStyle = {Color: "navy",Background: "#FFFFFF"}
}

OnCrmPageLoad();