Javascript Button Making, with Style!

First Blog ever, HIGH FIVE!


Working with Dynamics CRM, you’ll inevitably need to add bespoke controls to custom or system entities in order to manipulate the data contained on a form. Here’s a example of one custom button I use which has a function of Inserting a generic signature once clicked.

Being fairly new to JavaScript, my initial attempts to add functionality like this to CRM 4 was somewhat ... "sickening" 

but after numerous attempts using what I've found on the CRM community forums, I've think I’ve now got the most efficient combination of the code so far, but more importantly, they now look like REAL buttons. 

Here’s my most recent method and coding for this.

First the basics

* Create a new attribute of type nvarchar (named Button1 to use in the code below)

* Add the field to your form wherever you want the button to be located.


The Code below can paste directly into the Form’s OnLoad event (making sure to tick “Event is enabled”) This converts the attribute to a functioning button. Rather than use a standard "light blue" background this variation ensures that it is styled in such a way that fits the rest of Dynamics CRM 4's UI.


I'm still new to Javascript, so forgive me if some of my habits aren't common place

The first section of script is the "ButtonScript" function will transform the nvarchar attribute to a Stylish CRM button with pretty gradients. Of course, you can update fields such as FontSize, FontFamily etc. however I find this combination gives best results.


The final few lines of "buttonScript" attach the preceeding events required for the nvarchar attribute to perform as a button (otherwise you'll get a pretty, yet useless, rectangle)

function buttonstyle(fieldname, buttontext, buttonwidth,clickevent)

            {

            functiontocall=clickevent;

            crmForm.all[fieldname].DataValue = buttontext;

            crmForm.all[fieldname].style.borderRight="#3366cc 1px solid";

            crmForm.all[fieldname].style.paddingRight="5px";

            crmForm.all[fieldname].style.borderTop="#3366cc 1px solid";

            crmForm.all[fieldname].style.paddingLeft="5px";

            crmForm.all[fieldname].style.fontSize="11px";
 //This is the important line below - it gives you the smooth gradient (rather than a blue button with no class)

            crmForm.all[fieldname].style.backgroundImage="url(/_imgs/btn_rest.gif)";

            crmForm.all[fieldname].style.borderLeft="#3366cc 1px solid";

            crmForm.all[fieldname].style.width=buttonwidth;

            crmForm.all[fieldname].style.cursor="pointer";

            crmForm.all[fieldname].style.lineHeight="18px";

            crmForm.all[fieldname].style.borderBottom="#3366cc 1px solid";

            crmForm.all[fieldname].style.backgroundRepeat="repeat-x";      

            crmForm.all[fieldname].style.fontFamily="Tahoma";

            crmForm.all[fieldname].style.height="20px";

            crmForm.all[fieldname].style.backgroundColor="#cee7ff";

            crmForm.all[fieldname].style.textAlign="center";

            crmForm.all[fieldname].style.overflow="hidden";

            crmForm.all[fieldname].attachEvent("onmousedown",push_button);

            crmForm.all[fieldname].attachEvent("onmouseup",release_button);

            crmForm.all[fieldname].attachEvent("onclick",functiontocall);

            crmForm.all[fieldname].attachEvent("onmouseover",over_button);

            crmForm.all[fieldname].attachEvent("onmouseleave",off_button);

            }

           

//Allignment Shift on Click, gives 3D effect        

//ON

function push_button()

            {

            window.event.srcElement.style.marginLeft="1px";

            window.event.srcElement.style.marginTop="1px";

            }

//OFF

function release_button()

            {

            window.event.srcElement.style.marginLeft="0px";

            window.event.srcElement.style.marginTop="0px";

            }

//Mouse over effect, changes image.

//ON

function over_button()

            {

            window.event.srcElement.style.backgroundImage="url(/_imgs/btn_on_lookup.gif')";

            }

//OFF

function off_button()

            {

            window.event.srcElement.style.backgroundImage="url(/_imgs/btn_rest.gif)";

            }

           

//Give the button something to do - e.g Alert something

function button1press() 

            {

            alert('You have Pushed my button');

            }

// Apply to Attribute

buttonstyle('button1','My buttons text','120px',Button1press);

In addition, If you're adding more buttons in the future, it's a simple matter of creating and publishing the new field like before, but now all you need to do is add your extra functions ie, 


function button2press() {'Do something'}
function butto3press() {'Do something else'}
...


and call the same "ButtonStyle"  function to each, ie


buttonstyle('button2','My Second button text','120px',Button2press);
buttonstyle('button3','My Third button text','120px',Button3press);


your buttons will maintain consistency, which makes the UI easier to work with once you start adding more and more. Also, Any updates to the main styling will apply to all buttons on the form (Very handy when it comes to tweaking your work!)


All Comments welcome, but be nice! I'm new to this.
Craig Hamer