30 September 2012
Dynamics CRM 2011 entity form customization: how to add dynamic hyperlink to the header of the form.
What I really like about Dynamics CRM 2011 is its flexibility in terms of UI editing. Most if not all things are editable this or other way. This week I was asked to provide a hyperlink on the opportunity form and make it dynamically lead to the external quote file.
There are four areas on the Dynamics CRM form that can be customized to accomplish this task.
- Navigation bar (on the left)
- Main content pane (Text)
To add a link to navigation bar the built-in form designer can be used. Adding the link to the main content pane is easiest via simple text field with 'hyperlink' type. Both ways work, but neither has the desired look that I was asked for.
The last option available is the header (given that the footer is out of the question, because it's not visible without scrolling). How can we add the hyperlink (or pretty much any content) to the form header? Again, there are a number of ways, but I'd like to show how this can be done using an IFRAME control.
First of all we need a couple of web resources. To add them open settings window and browse to the 'Web resources' section.
We'll need two things: first - a nice-looking icon. This is by all means optional, but we'd like to have an attractive UI, don't we? To add an icon we just need to add a webresource and specify its type as PNG (if the icon is in PNG format). Note the URL of this web-resource - you'll need it when adding the actual web-page.
This is the web-page I got, but sure you can have something different.
<BODY style="PADDING: 0px; BACKGROUND-COLOR: #f6f8fa; MARGIN: 0px;" contentEditable=true>
<DIV style="FONT-SIZE: 13px">
<IMG style="VERTICAL-ALIGN: middle" src="<...>/WebResources/new_downloadicon">
<A style="MARGIN-LEFT: 10px" id=hlink href="" target=_new>Download quote</A>
You probably noticed the url of the image <..>/WebResources/new_downloadicon - that is the url of the icon that you can get after creating this icon web-resource.
Also an important thing is the ID of the hyperlink - we also need that to dynamically set the HREF attribute later.
Now let's open the opportunity entity in form designer. Here we need to add the IFRAME object to the header of the form. To do that switch the edit mode to 'header' (this is the button on the ribbon bar). Second - insert the IFRAME object (can be found on the 'Insert' part of the ribbon).
When adding the IFRAME we need to specify the URL. This the URL of the web-page you've added one step earlier and it will look like http://<..>/%7B14ed241e-8d7d-4a67-5402-828947d4c356%7D/WebResources/new_myhtml?preview=1.
From a formatting point of view I'd recommend using three column structure, with scrolling always disabled and invisible border.
I ended up with something like this:
window.frames['IFRAME_test'].document.getElementById('hlink').href = 'http://www.google.com';
Certainly this is for example only. 'IFRAME_test' is the ID of my IFRAME (I set it when adding an IFRAME object). 'hlink' is the hyperlink ID (taken from the page we display in IFRAME). And you can set href to anything you like depending on something else (using conditions and everything else).
Window.frames[...] code may not work in browsers other than IE, this is true. But until Microsoft finally releases the service update with the option to use Dynamics CRM 2011 with other browsers this problem does not exists.
This is what we can have at the end of the process (I took this from my russian localized CRM, but apart from the language the UI is the same everywhere).
Post a comment