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();

CRM 4.0 Network Resource Image Control

As the name suggest this is an on-premise / VPN solution so consider if you need this to work across the web / IFD. The idea is to utilize a simple network share together with VB 6.0 Common Control Open Dialog which can be summoned using JavaScript. The nice thing about the Dialog is that it enables you to see files as thumbnails, set the initial directory and return the selected image path into a text attribute. That’s pretty much what you need to make this work.





You can add an ISV toolbar button to pop the dialog but I find that this solution works hand in glove with the text image button post I wrote a while ago.
Here is what is did in a nutshell:

1. Add a new text attribute. I used the pager attribute on the contact form for the sake of this example.

2. Add a new Fixed Field 1:1 section to the contact form. This is done so the IFRAME
that displays the image will occupy half the screen.



3. Then add a the image IFRAME and pointed it to a default blank.jpg image.



4. Arrange the form attributes as you like … here is what I did.



5. Set the path attribute to read-only so selection is possible only when using the dialog.

6. Add the following code to the contact on load event box.

And Finally don't forget to create a network share anywhere on the server and set appropriate user permission.



That’s it … pretty simple ah … feel free to comment.

TextHelperButton = function(fieldId)
{
    var fldButton = this;

    fldButton.Field = crmForm.all[fieldId];

    if (!fldButton.Field)
    {
        return alert("Unknown Field: " + fieldId);
    }

    fldButton.Click = null;
    fldButton.Image = new ButtonImage();
    fldButton.Paint = function()
    {
        var field_d = document.all[fldButton.Field.id + "_d"];
        if (field_d)
        {
            field_d.style.whiteSpace = "nowrap";
            field_d.appendChild(fldButton.Image.ToObject())
        }
    }

    fldButton.MouseOver = function()
    {
        event.srcElement.src = fldButton.Image.MouseOver;
    }

    fldButton.MouseOut = function()
    {
        event.srcElement.src = fldButton.Image.MouseOut;
    }

    function ButtonImage()
    {
        this.MouseOut  = "/_imgs/lookupOff.gif";
        this.MouseOver = "/_imgs/lookupOn.gif";
        this.Width = 21

        this.ToObject = function()
        {
            var img = document.createElement("IMG");
            img.onmouseover = fldButton.MouseOver;
            img.onmouseout = fldButton.MouseOut;
            img.onclick = fldButton.Click;
            img.src = this.MouseOut;
 
            var cssText = "vertical-align:bottom;";
            cssText+= "margin:1px;";
            cssText+= "position:relative;";
            cssText+= "right:" + (this.Width + 1) + "px";
            img.style.cssText = cssText;
            return img;
        }
    }
}

function OnCrmPageLoad()
{
 /* Build the Avatar path attribute Text Helper Button */
    var avaterBtn = new TextHelperButton("pager");
        avaterBtn.Click = SelectAvatar;
        avaterBtn.Paint();
     
     /* Set the avatar IFRAME when the form loads*/
     if (crmForm.all.pager.DataValue)
     {
  document.all.IFRAME_image.src = crmForm.all.pager.DataValue;
     }
}

function SelectAvatar()
{
     var dialog = new ActiveXObject("MSComDlg.CommonDialog");
     /* You may set the filter to only show image files */
     dialog.Filter = "All Files (*.*)";
     /* Point the dialog to the current (selected) image */
     dialog.FileName = document.all.IFRAME_image.src;
     dialog.MaxFileSize = 1024;
     dialog.ShowOpen();
  
     /* Save the readonly path attribute with the new file selection */
     crmForm.all.pager.DataValue = dialog.FileName;
     /* Force submit since this is a readonly attribute */
     crmForm.all.pager.ForceSubmit = true;
     /* Update the image iframe */
     document.all.IFRAME_image.src = crmForm.all.pager.DataValue;
}

OnCrmPageLoad();

CRM 4.0 Formatting Form Fields

The following is an intuitive Mask/UnMask JavaScript object. If you’re looking to toggle other clients (other than an entity form) you might use it as a template for a server side plug-in. The object makes it easy to enforce various types of formatting such as phone numbers , a social security number, credit card numbers and many more. The sample below formats the account Main and Other phone fields.

When a user gives focus to a phone field the object unmasks the field’s value leaving only numbers (the original user input) or blank. Once focus is lost the mask is applied again, if a value exists, giving it its final display. The object also fires when the form is saved to support a situation where focus is not fired i.e. when the user uses the keyboard to save the record.

There’re also other features such as displaying the format as a title or telling the mask to fire when the form loads. The later is hardly required but you might find it useful to leverage the user interaction with the form … and cleans/reformat imported/external values along the way.

If you take a closer look you’ll notice that the object receives both a format (mask) such as “(##) ###-####” and a regular expression which is an unmask filter e.g. “\\D”. “\\D” means anything but numbers which is what you need to remove/replace to get the user’s original input.

The code goes in the account entity onload event.
Give it a go and feel free to leave comments.

function Mask(format)
{
    var m = this;
   
    /* e.g. (##) ###-#### */
    m.Format = format;
    m.Field  = null;
    /* OnLoad   - Might be Used to cleans imported values. */
    m.OnLoad = false;
    /*
        A regular expression for unwanted (bad) characters. 
        e.g. A field (e.g. phone number) original (before formatting) characters must contain numbers only.  
    */
    m.Filter = null;
   
    var onloadbound = false;
    var onsavebound = false;
    var onfocusbound = false;
   
    m.Mask   = function()
    {
        if (!m.Field)
        {
            return alert("Mask is missing a field");
        } 
 
        /* Sets the textbox title to required Format */
        m.Field.title = m.Format;  
 
        if (!onfocusbound)
        {
            onfocusbound = m.Field.attachEvent("onfocusin", unmask);
            m.Field.attachEvent("onfocusout", mask);
        }
 
        if (m.OnLoad && !onloadbound)
        {
            onloadbound = mask() == undefined;
        }
 
        if (!onsavebound)
        {
            onsavebound = crmForm.attachEvent("onsave",mask);
        }
    }
   
    function unmask()
    {
        m.Field.DataValue = strip();
    }
   
    function mask()
    {
        /* Reformat */
        var formated = m.Format;
        /* value as Array of characters */
 
        var splitValue = strip().split("");
 
        if (splitValue.length == 0)
        {
            m.Field.DataValue = null;
            return;
        }
  
        /* Regex defining a single placeholder */
        var placeHolderReg = new RegExp("#{1}");
        /* Replace each placeholder with a single character */
        for(var i = 0; i < splitValue.length ; i++)
        {
            formated = formated.replace(placeHolderReg,splitValue[i]);          
        }
 
        m.Field.DataValue = formated;
    }
   
    function strip()
    {
        if (!m.Field.DataValue)
        {
            return "";
        }
        /* Strip field from unwanted characters */
        var valueOnlyReg = new RegExp(m.Filter,"gi");
        return m.Field.DataValue.replace(valueOnlyReg,"");
    }
}

function OnCrmPageLoad()
{
    var phoneMask = new Mask("(##)###-####");
    phoneMask.Field = crmForm.all.telephone1;
    phoneMask.Filter = "\\D"; //Unmask Filter - Strip Everything which is not a Number
    phoneMask.Mask();
  
    var cellMask = new Mask("+(##) ### ####");
    cellMask.Field = crmForm.all.telephone2;
    phoneMask.OnLoad = true;
    cellMask.Filter = "\\D"; //Unmask Filter - Strip Everything which is not a Number
    cellMask.Mask();
}

OnCrmPageLoad();