Tuesday, January 25, 2011

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:




4 comentarii:

Justin said...

You can override the innerHTML of any field to produce the behaviors of an action button on a CRM form. I am sure the same approach would work for the title bar button, just inherit from a different class.

crmForm.all.item(fieldName + "_c").innerHTML = "&=60button title='button title' class='ms-crm-Button' id='unique id' style='width: auto;' onmouseover='Mscrm.ButtonUtils.hoverOn(this);' onmouseout='Mscrm.ButtonUtils.hoverOff(this);' onclick='CustomAction();' type='button'=62button text&=60/button&=62";

CSC said...

Hello Justin,
What do you mean by title bar? If you're talking about the Ribbon in CRM 2011 it cannot be altered via JavaScript, just from the ribbon xml.

Justin said...

Sorry - I meant 'toolbar' button, not 'title' bar button :)

ajnar said...

Does CRM5 have CRMFORM.ALL?

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