Adding Images to the Form Header

In keeping with the theme of contact images we will explore how the image can be added to the header section of the contact form in order to illustrate how images can be added to the header section. Although the image can be added to the form body, the issue is that it is of course a scrollable area and therefore it scrolls out of view when you scroll down on the page. On the flip side, the image can take a sizeable chunk of real estate so you may not want to display when the form first loads and instead "hide" it in a collapsible section so that the user can expand the section to view the image. But this is also not ideal.

A better solution might therefore be to have the contact image display in the header section of the form (or perhaps footer) so that it remains in view as long as the form is open as illustrated below.

There are probably other ways of configuring this option (e.g. html page web resources), but I ended up using an IFrame.

Add an IFrame to the header section with the following settings:

Then in the form onload jscript pass in the URL that points to the image. You can obviously build the URL dynamically based on your needs. I don't believe there is currently a way to access the header elements via the standard Xrm navigation, so you can do so using document navigation:

document.getElementById("IFRAME_Image").src = url;