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 CRMCRMWeb_imgsico folder.

The final output looks like this:

And… here’s the code masterpiece :)…

// CODE
// Create Dynamic Button for CRM 5
function removeChildNodes(ctrl)
{ 
	while (ctrl.childNodes[0]) 
	{ 
		ctrl.removeChild(ctrl.childNodes[0]); 
	}
}

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:

 

16 comments

  1. Thanks for the article, this is what i searched for a while.
    Unfortunately, as i am a copy & paste coder, i didn´t quite figure out how this is ment to be used.

    Could you please add how to add funcition call from the form, should it be on onload or elsewhere?

  2. Hello Pertti,
    I’ve already provided a call example at the end of the function. All you need is a custom field (nvarchar) that will have it’s content dynamically replaced in runtime with the button. Please tell me if you managed to make your button work.

  3. Cool solution for creating a really nice customization to the forms in CRM 2011.
    And thanks for posting the code, it really helped me along in understanding the mechanics behind the forms.

    Keep up the good work!

  4. Hi,

    Thanks for a nice post. I tried to play with this function and found that it can not take more than 15-16 characters. I want to put atleast 25 characters.

    Any idea? Why this is restricting? is it because we are using button in place of field caption?

    Any fix?

    1. Thanks for the reply.

      I mean to say you can enter as many characters you like but on the form it just show 15-16 characters.

      e.g. if text is “Button 1234567891234567” then on run time form shows “Button 12345678”..

      I can send you screen shot if you like.

      Irfan

      1. Change the number of pixels that you’re passing. e.g.,

        CreateButtonCRM5(‘cred_existingclient’, ‘Custom Button’, ‘200 px’, ’16_cancel.png’, CustomClickFunction);

        instead of

        CreateButtonCRM5(‘cred_existingclient’, ‘Custom Button’, ‘100 px’, ’16_cancel.png’, CustomClickFunction);

  5. I’m curious about the use of crmForm.all. I never used anything before CRM 2011 and have read that the non “Xrm.Page” syntax was deprecated.

    The old ways obviously still work, but for how long? Also, is there any way to do the magic that is available with crmForm.all using the new Xrm.Page? Xrm.Page.ui.controls[i]… don’t seem to give you the same control over the minutiae that crmForm.all.item(…)… gives you.

  6. My button image displays with a bullet (black dot) to the left of it. Everything works. I just don’t understand why it appears like its part of a bullet list. Any thoughts on why?

    Thanks,

    JC

Leave a Reply to Louis Alston Cancel reply

Your email address will not be published. Required fields are marked *