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)
- Header
- Main content pane (Text)
- Footer
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.
Now, an IFRAME needs to load something. Yes, we could by default open about:blank page and then use JavaScript to update it with whatever content we want, but it'd be easier to have some template for future editing (especially if it needs to be edited by someone without JavaScript and CSS skills).
This is the web-page I got, but sure you can have something different.
<HTML><HEAD><BASE>
<META charset=utf-8></HEAD>
<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>
</DIV>
</BODY>
</HTML>
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.
Having done all that the only thing we need is to add some JavaScript. To make some changes in URL of the hyperlink when the form loads (the URL in my case is dependent on the value of another text field on the form), let's add new JavaScript function to the Load event. This all can be done in the form properties.
I ended up with something like this:
function Test()
{
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).
RECENT BLOG ENTRIES
Bigcommerce template editing
How to change content in BigCommerce.com templates: guide for a complete newbie.
Read full story
What if Fancybox does not work at all
If Fancybox library does not work, this might be due to the conflicts with other JS libraries and not the syntax error.
Read full story
Fancybox with ASP.NET form on Umbraco
Using ASP.NET form on Fancybox popup to make login window
Read full story
The author of this web-site supports WWF . Please do your part in saving our planet!
Alex’s expertise in developing and maintaining web applications has been invaluable to the College – J. Wittersheim, Director of Information Management and Funding, Bury College
