Clickable Header Fields in Dynamics CRM 2011

Roshan Mehta, 18 July 2011

Dynamics CRM 2011 introduces the ability for system customizers to add fields to the header and footer of each customizable CRM form. This is especially useful for displaying important information about a particular record at the very top of the form and perhaps includes summary information at the bottom. However, I noticed that when you add an email address or URL field to the header, they are represented in text format and are not clickable like the fields themselves. Thankfully, there are ways around this!

Firstly, the image below is what an e-mail address field looks like in the header of the Contact form. Notice that it is displayed as plain text, and we are presented with the default cursor which indicates that this area is not clickable like the Owner field. It would be nice if we could have a clickable link which would open up our default e-mail browser and automatically prefill the To field with the e-mail address of the Contact.

To edit the appearance of the field in the header, we first need to know the HTML structure of the header, and also the id of the field. Press F12 in Internet Explorer to open up Internet Explorer Development Tools and then click on the email field to select the surrounding div tag. Once you have done this correctly, IE dev tools should show you something similar to the following:

We can see here that we have a main div tag with id header-emailaddress1_d. Inside this is another div without an id which contains the e-mail address as plain text. It would be nice if the inner div tag had an id so we can refer to it directly, but we can still reference it in relation to the outer div.

I have created a single JScript library inside CRM with two functions. The first function sets the styling of the field in the header by modifying the text colour to blue and also adding the blue underline. The second function handles the click event and pops open the default e-mail browser.

Notice that we’ve used childNodes[0] to refer to the inner div which doesn’t have an id. Also note that the code to pop up the default e-mail browser is a simple window.open function with a mailto link. So let’s have a look at the final result.

Now we can tell that the e-mail address is clickable just by looking at it. When we click on the e-mail address, it pops up Microsoft Outlook and prefills the To field and we are ready to send an e-mail to the Contact.