Feb 25 2009

CRM 4 iFrame Printing

Published by at 9:16 pm under Programming,Software

Last year I was working with a client to develop some ISV add-ins for Microsoft Dynamics CRM.  Recently I was alerted to the fact that one of them – a seperate aspx page that loads in an iFrame on the account details panel – wasn’t printing correctly.

It displayed correctly in the normal view form, appeared correctly on the print preview form but when actually printed it was collapsed down to one or two pixels high.

After doing a bit of research, I found this post by Vince Bullinger, in which he gets around the problem by, as far as I can tell, modifying a core CRM css file.  Whilst this will work, it should be noted that any modification to core CRM files is not supported and will almost certainly break or be lost by updates and hotfixes.

Another problem with the code Vince Bullinger gives is that the iFrames a fixed height and that applies to ALL ISV iFrames.  However, with this knowledge I was able to  come up with my own solution that uses a bit of Javascript to ensure that iFrames are printed and at the correct height to display all the content:

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="Summary.aspx.cs" Inherits="CRMWeb.SummaryStatus.Summary" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Summary Status</title>
    <style type="text/css">
        #pageWrapper
        {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="pageWrapper">
    <form id="form1" runat="server">
        <!-- content goes here -->
    </form>
    </div>
    <script language="javascript" type="text/javascript">
        var dh = document.getElementById("pageWrapper").offsetHeight;
        document.parentWindow.frameElement.height = dh;
        document.parentWindow.frameElement.style.display = "block";
        document.parentWindow.frameElement.style.height = dh + "px";
    </script>
</body>
</html>

This solutions requires that you surround the content of your page with a div, in this case <div id=”pageWrapper”></div>.  This is used by the block of Javascript at the end.

The purpose of the Javascript is to use the pageWrapper div to find out the height of the content.  This height is then used to set the height of the iFrame that contains the page and to set the display style of the iFrame to block.

It probably doesn’t require the iFrame height and the iFrames style.height both being set but I decided to take a belts and braces approach.

In addition to ensuring the iFrame content is printed, I am also planning on implementing the code on Vince Bullingers page for loading a specific css stylesheet for printing.

kick it on DotNetKicks.com

2 responses so far