CRM 4.0 Creating Inline Toolbar and Buttons

Here is a nice usability feature that I really like. Currently CRM 4.0 only supports adding functional buttons via form toolbar. This suffices most of the time and mainly on strait forward data input forms. But as CRM takes giant leaps toward becoming a xRM platform, as an application architect and designer, you bow to search for more flexible ways to convey the system to the end user.

The following post presents a simple and effective way of adding an inline toolbar buttons at the section level. This is especially useful when creating complex data entry forms like designers and wizards that require multi-step / section oriented logic. It is also much more simpler to add a button to the form then going through the entire isv.config process.

Adding an inline toolbar to the form is pretty simple and involves 2 steps.
The first step is to add a new text field to the form, where you want the toolbar to appear (e.g. gi_toolbar) and hide it’s label through the form field customizations (i.e. double click on the field and uncheck display label on form checkbox).

Here is how it looks after the above step is completed:

The final step is to add the following code to the entity onload event handler and add an OnCrmPageLoad function which creates a new instance of InlineToolbar and adds the necessary buttons.

The end result looks like this:

function InlineToolbar(containerId)
{
    var toolbar = this;
    var container = document.all[containerId];
    
    if (!container)
    {
        return alert("Toolbar Field: " + containerId + " is missing");
    }
    
    container.style.display = "none";
    container = container.parentElement;
    
    toolbar.AddButton = function(id,text,width,callback,imgSrc)
    {
        var btn = document.createElement("button");
        var btStyle = new StyleBuilder();
         btStyle.Add( "font-family" , "Arial" );
         btStyle.Add( "font-size" , "12px" );
         btStyle.Add( "line-height" , "16px" );
         btStyle.Add( "text-align" , "center" );
         btStyle.Add( "cursor" , "hand" );
         btStyle.Add( "border" , "1px solid #3366CC" );
         btStyle.Add( "background-color" , "#CEE7FF" );
         btStyle.Add( "background-image" , "url( '/_imgs/btn_rest.gif' )" );
         btStyle.Add( "background-repeat" , "repeat-x" );
         btStyle.Add( "padding-left" , "5px" );
         btStyle.Add( "padding-right" , "5px" );
         btStyle.Add( "overflow" , "visible" );
         btStyle.Add( "width" , width );
          
     btn.style.cssText = btStyle.ToString();
     btn.attachEvent("onclick",callback);
     btn.id = id;
     
     if (imgSrc)
     { 
         var img = document.createElement("img");
            img.src = imgSrc;
            img.style.verticalAlign = "middle";
            btn.appendChild(img);
            btn.appendChild(document.createTextNode(" "));
            var spn = document.createElement("span");
            spn.innerText = text;
         btn.appendChild(spn);
     }
     else
     {
         btn.innerText = text;
     }
    
     container.appendChild(btn);
     container.appendChild(document.createTextNode(" "));
    
     return btn;
    }
   
    toolbar.RemoveButton = function(id)
    {
        var btn = toolbar.GetButton(id)
        if (btn)
        {
            btn.parentNode.removeChild(btn);
        }
    }
    
    toolbar.GetButton = function(id)
    {
        return document.getElementById(id);
    }
   
    function StyleBuilder()
    {
     var cssText   = new StringBuilder();
     this.Add      = function( key , value ){cssText.Append( key ).Append( ":" ).Append( value ).Append( ";" );}
     this.ToString = function(){return cssText.ToString();} 
    }

    function StringBuilder()
    {
     var parts     = [];
     this.Append   = function( text ){parts[ parts.length ] = text;return this;}
     this.Reset    = function(){parts = [];}
     this.ToString = function(){return parts.join( "" );}
    }
}

/* Start Script Execution */
function OnCrmPageLoad()
{
    window.GeneralToolbar = new InlineToolbar("gi_toolbar");
    GeneralToolbar.AddButton("btnReset","Reset","15%",Reset_Click);
    GeneralToolbar.AddButton("btnLookup","Lookup","10%",Lookup_Click);
    //GeneralToolbar.RemoveButton("btnLookup");
    GeneralToolbar.AddButton("btnAddNote","Create Note","16px",AddNote_Click,"/_imgs/ico_16_5_d.gif");
}

function Reset_Click()
{
    alert('Reseting Fields...');
}

function Lookup_Click()
{
    alert('lookup records...');
}

function AddNote_Click()
{
    alert('Add new note');
}