Wednesday, October 26, 2011

Add a button to MS CRM 2011 Form Header

Hi,

Few days back I had a request to have a button in CRM Form Header. I wondered about the request and started working on its feasibility study. While searching and googling around I found this link which described about adding a button to CRM Form. I took this post as a help and started working on the same, as CRM header fields are not available to us during form onload event. I had to change some of the scripts to make it available for Header. Find below script for the same.

Solution:
1. Create a new text field on CRM 2011 form (type: Multiple Lines of Text).
2. Add the new text field in the Form Header.
3. Add below script function to Form OnLoad event.

function ConvertHeaderFieldToButton(fieldname, buttontext, buttonwidth, clickevent, title)
{
//check if object exists; else return
if (document.getElementById('header_'+fieldname+'_d') == null)
{
 return;
}

var divField = document.getElementById('header_'+fieldname+'_d').all[0];

var btnField = document.createElement("button");

btnField.setAttribute('type','button');
btnField.setAttribute('name',buttontext);
btnField.setAttribute('readonly','readonly');

btnField.style.borderRight="#3366cc 1px solid";
btnField.style.paddingRight="5px";
btnField.style.borderTop="#3366cc 1px solid";
btnField.style.paddingLeft="5px";
btnField.style.fontSize="11px";
btnField.style.backgroundImage="url(/_imgs/btn_rest.gif)";
btnField.style.borderLeft="#3366cc 1px solid";
btnField.style.width=buttonwidth;
btnField.style.cursor="hand";
btnField.style.lineHeight="18px";
btnField.style.borderBottom="#3366cc 1px solid";
btnField.style.backgroundRepeat="repeat-x";
btnField.style.fontFamily="Tahoma";
btnField.style.height="20px";
btnField.style.backgroundColor="#cee7ff";
btnField.style.textAlign="center";
btnField.style.overflow="hidden";
btnField.style.lineHeight="14px";
btnField.title=title;

btnField.attachEvent("onmousedown",push_button);
btnField.attachEvent("onmouseup",release_button);

//add your if condition for respective buttons' click event
if (clickevent == ButtonOnClick)
btnField.attachEvent("onclick",ButtonOnClick);

if (document.getElementById('header_'+fieldname+'_c') != null)
    document.getElementById('header_'+fieldname+'_c').style.visibility = 'hidden';

btnField.appendChild(document.createTextNode(buttontext));

divField = divField.appendChild(btnField);

window.focus();

function push_button()
{
window.event.srcElement.style.borderWidth="2px";
window.event.srcElement.style.borderStyle="groove ridge ridge groove";
window.event.srcElement.style.borderColor="#3366cc #4080f0 #4080f0 #3366cc";
}

function release_button()
{
window.event.srcElement.style.border="1px solid #3366cc";
}

// add a function to call for each button added to header
// definition of the function to call on button click
function ButtonOnClick()
{
alert('Button Click');
}
}

And you are done with your task of adding a button to CRM Form Header.

Hope you find this post helpful for your relevant task.
Feel free to post the query in case you need any aid for Dynamics CRM and this post.

Thanks !!! J

2 comments:

  1. Hey,

    This method is good but i suppose this is unsupported by CRM. It is advised not to use this method for creating a button on the form or header.

    Instead, you can use an Iframe method.

    ReplyDelete
  2. Hi Swaroop,
    You are right, this is an unsupported method. But this can definitely help you out during your hard time when you have to deliver the results in a short time.

    ReplyDelete