Saturday, October 10, 2009

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');
}

11 comments:

Shai said...

Great Post and sample ,make it very simple and clean to implement.
Thanks,

pbmartin said...

It looks great, but I can't get it to work on the Account form. I've changed the field name to the field name on our system, but the form loads without any perceivable error, then presents the page with a blank toolbar field.

I've tried this on Preview and Published.

Any advice?

Adi Katz said...

Ensure the script is enabled (checkbox in the form onload event). Put an alert(); and check it out.
If the alert works the script should work as well.

sowjanya said...

Thanks friend.Ur post really helped me to get solution to my problem.I struggled for 2 days to get the solution and finally I saw ur post.Thanks a lot

Anonymous said...

Would this be supported in future releases of CareDirector?

Adi Katz said...

I don’t see why not. The DOM is changed for a specific field and the reference to this field is supported so there’s a good chance this will upgrade to the next version.

Robiii said...

How would I add a button to your inline toolbar to launch a specific workflow for the active record shown in the form?

Kona said...

When "bulk edit" to bring up the same form, somehow the 3 buttons not showing up (shows a blank text box). Do I missed some step?

Thanks for the tip!!!

Anonymous said...

Sorry, but how do I do : add an OnCrmPageLoad ?

(2nd part of stap two)

Thanks in advance form Nope

Jessica Alba said...

Toolbar development is best method to increase traffic to your website. It is easy or cost effective method to increase business. Nice post.

Anonymous said...

For people getting a blank toolbar field, add this to the end of the script

OnCrmPageLoad();