Microsoft CRM Dynamics 2011 offers a nice print preview that will handle almost all of your needs; however, without the ability to execute JavaScript on the print preview, it’s can sometimes fall short. Generally this isn’t a problem because you can create an SSRS report and be on your merry way; however, today we’re going to look at a different option – using the print preview.
The Scenario
Let’s say you have someone who really wants the customer’s URL added to the header. They also want the text to always be blue, both on the form and when printed. So you add it to the header and add some JavaScript to change the style, no problem.
You take a look at the print preview and find that the color isn’t blue like the customer strongly prefers. Talking to the customer they love this printout except the color has to be blue. You could go through and change this to an SSRS report, but why create another thing for the customer to maintain on something so simple as a blue URL? If only we could execute just a tiny piece of JavaScript on the report… but wait you can!
Executing JavaScript on the Print Preview
To execute JavaScript on the Print Preview, you’ll need to embed a web resource. You will want to make sure it is not visible by default since it really is only there for the JavaScript. I also pass in the record object-type, because chances are you’ll need this for something other than a blue URL.
Now, let’s take a look at this mysterious web resource:
<HTML>
<HEAD>
<SCRIPT type=text/javascript>
if (top.location.href.indexOf("/print/print.aspx") != -1){
top.frames[0].document.getElementById('header_websiteurl_d').firstChild.style.color = '#0000FF';
}
</SCRIPT>
<META charset=utf-8>
</HEAD>
<BODY contentEditable=true>
<FONT size=2 face="Tahoma, Verdana, Arial">Testing...</FONT>
</BODY>
</HTML>
Breaking Down the JavaScript
Looking back at the web resource, the only thing that really matters is the JavaScript. The web resource exists in a hidden iFrame, so we’ll just go ahead and execute the code once the iFrame gets called.
The first thing we’ll check for is if we are in the print preview. We only want to execute the JavaScript inside this web resource if we are on the print preview. So we check the URL of the window to see where we are at:
if (top.location.href.indexOf("/print/print.aspx") != -1){
Next we’ll grab the element we want and change the color of the text to blue:
top.frames[0].document.getElementById('header_websiteurl_d').firstChild.style.color = '#0000FF';
To get to the page being printed, we have to use top.frames[0]. We then will find the id we want changed (and in this case actually need to change the firstChild’s CSS). Any of your “document.getElementById” code on the main form should work so long as you prepend it with top.frames[0].
Seeing the Final Result
Now we see a pretty, blue link on our print preview form and printed document.
Understanding the Drawbacks
This scenario worked perfectly; however not all scenarios will. One of the biggest problems is the inability to access the XRM variable. You can get to an XRM variable on the “printMain” iFrame; however, that XRM variable is very limited. Instead, you can really only use document.getElementById.
Summary
Modifying the Print Preview is quite easy with JavaScript. You won’t get all of the advantages that you get with the normal form, but you can do everything on that print preview that you can do on the form. So whether you plan to resize an iFrame, modify a label, or whatever, you can easily do so while printing as well. Hope you enjoy!
Post by: Paul Way,
