CRM 2011 Custom Form Button

Using some of the basic DOM vs JavaScript capabilities, you can use the following code to dynamically generate a custom button for your CRM Form in Microsoft Dynamics CRM 2011 (scroll to the end of this post to see an example of how to use it). The button will look just like the ones in the toolbar.
All you need is a random CRM field (the type doesn't matter) to host the button (the original field content will be hidden). Also, you'll need a custom function to pass for the onclick event.
Note: the image you use for the button must be placed inside the %programfiles%\Microsoft Dynamics CRM\CRMWeb\_imgs\ico folder.

The final output looks like this:

And... here's the code masterpiece :)...

// CODE

// Create Dynamic Button for CRM 5
function CreateButtonCRM5(fieldName, buttonText, buttonWidth, iconName, clickEvent)
{
functiontocall=clickEvent;
crmForm.all.item(fieldName + "_c").style.display = "none";

var li = document.createElement("LI");
li.setAttribute('id', fieldName + 'LI');
li.setAttribute('className', 'ms-crm-Menu');
li.setAttribute('title', buttonText);
li.setAttribute('onclick', functiontocall);
li.setAttribute('onmousedown', push_custom_button);
li.setAttribute('onmouseup', release_custom_button);
li.style.width=buttonWidth;
li.style.cursor="hand";
li.style.textAlign="center";
li.style.overflow="hidden";

var span = document.createElement("span");
span.setAttribute('className', 'ms-crm-Menu-Label');
span.setAttribute('id', fieldName + 'Span');
span.style.cursor = "hand";
li.appendChild(span);
li.onmouseover = function() { span.setAttribute('className', 'ms-crm-Menu-Label-Hovered'); }
li.onmouseout = function() { span.setAttribute('className', 'ms-crm-Menu-Label'); }

var a = document.createElement("a");
a.setAttribute('id', fieldName + 'A');
a.setAttribute('className', 'ms-crm-Menu-Label');
a.onclick = function() { return false; }
a.setAttribute('target', '_self');
a.setAttribute('href', 'javascript:onclick();');
a.style.cursor = "hand";
span.appendChild(a);

var img = document.createElement("img");
img.setAttribute('id', fieldName + 'Img');
img.setAttribute('className', 'ms-crm-Menu-ButtonFirst');
img.setAttribute('src', '/_imgs/ico/' + iconName);
img.style.cursor = "hand";

var span2 = document.createElement("span");
span2.setAttribute('id', fieldName + 'Span2');
span2.setAttribute('className', 'ms-crm-MenuItem-TextRTL');
span2.innerText = buttonText;
span2.style.cursor = "hand";
a.appendChild(img);
a.appendChild(span2);

removeChildNodes(crmForm.all.item(fieldName + "_d"));
crmForm.all.item(fieldName + "_d").appendChild(li);
}

function push_custom_button()
{
window.event.srcElement.style.marginLeft="1px";
window.event.srcElement.style.marginTop="1px";
}

function release_custom_button()
{
window.event.srcElement.style.marginLeft="0px";
window.event.srcElement.style.marginTop="0px";
}

// USE
function CustomClickFunction()
{
alert("your code goes here...");
}

// Create the button, using the new_custombutton field as a container
CreateButtonCRM5('new_custombutton', 'Custom Button','100 px', '16_cancel.png', CustomClickFunction);


BONUS:
For the developers out there who are still using CRM 4.0, you can use the following function to generate a custom button, CRM styled, based on the same principles as previous article/function.

// Create Dynamic Button for CRM 4
function CreateButtonCRM4(fieldName, buttonText, buttonWidth, clickEvent)
{
functiontocall=clickEvent;
crmForm.all.item(fieldName + "_c").style.display = "none";

crmForm.all.item(fieldName).DataValue = buttonText;
crmForm.all.item(fieldName).style.borderRight="#3366cc 1px solid";
crmForm.all.item(fieldName).style.paddingRight="5px";
crmForm.all.item(fieldName).style.borderTop="#3366cc 1px solid";
crmForm.all.item(fieldName).style.paddingLeft="5px";
crmForm.all.item(fieldName).style.fontSize="11px";
crmForm.all.item(fieldName).style.backgroundImage="url(/_imgs/btn_rest.gif)";
crmForm.all.item(fieldName).style.borderLeft="#3366cc 1px solid";
crmForm.all.item(fieldName).style.width=buttonWidth;
crmForm.all.item(fieldName).style.cursor="hand";
crmForm.all.item(fieldName).style.lineHeight="18px";
crmForm.all.item(fieldName).style.borderBottom="#3366cc 1px solid";
crmForm.all.item(fieldName).style.backgroundRepeat="repeat-x";
crmForm.all.item(fieldName).style.fontFamily="Tahoma";
crmForm.all.item(fieldName).style.height="20px";
crmForm.all.item(fieldName).style.backgroundColor="#cee7ff";
crmForm.all.item(fieldName).style.textAlign="center";
crmForm.all.item(fieldName).style.overflow="hidden";
crmForm.all.item(fieldName).attachEvent("onmousedown",push_custom_button);
crmForm.all.item(fieldName).attachEvent("onmouseup",release_custom_button);
crmForm.all.item(fieldName).attachEvent("onclick",functiontocall);
crmForm.all.item(fieldName).contentEditable= false;
}

and the output: