Preview entity data in an iFrame (CRM 2011)

We wanted to be able to display a bunch of useful information when a user selected a record from a lookup. I wanted to use as much native CRM stuff as possible so non-developers in the team could change what fields are displayed and where without having to modify any code. I think it turned out pretty cool. Hope some people find it useful.

The result

In the screenshot, the relevant bit is under the “Op Site Data” heading. When a user selects an “Op Site”, the tab pops open and the grey box is displayed showing related data for that record.

So how is it done ?

IFrame

Add a new tab and iFrame to the relevant form. Set the URL of the iFrame to “about:blank”.
Make sure you un-tick “Restrict cross-frame scripting”.

Attach a JavaScript function to the onReadyStateChange event of the iFrame. In this case, I’ve called it iframe_onload.

Related Entity Form

You need to add a new form to the related entity. In this case it’s a custom entity called Op Site. It doesn’t matter what name you give it – I called it “Preview”.

Set the new form up to only display the fields you want. I found it best to use a three column layout.

Print Preview

Now here’s the science bit. Go and look at the new form you created and do a Print Preview. This will bring up a read-only version of the form – this is the basis of what we’ll display in the iFrame. Copy the URL of the preview to the clipboard.

We’ll have to get rid of those Print and Close toolbar buttons and the space-wasting headings and whitespace.

New form in print preview mode

JavaScript

NB This stuff requires jQuery. I was using v1.6.2.

There are two functions to perform this preview. The first handles the opening / closing of the tab and sets the URL for the iFrame. The second cleans up the content of the iFrame so it takes up less room.

First Function

I called this function ShowOpSiteData. It needs to be attached to the Form onLoad event as well as the Field’s onChange event (in this case the field is called Op Site). You will need the URL of the print preview page that you copied earlier.

function ShowOpSiteData() {

  // Collapse the preview tab
  var elTab = Xrm.Page.ui.tabs.get("tab_4");
  elTab.setDisplayState("collapsed");

  // Get the value (GUID) of the selected lookup
  var opSite = Xrm.Page.getAttribute("hpd_opsiteid").getValue();
  if (!opSite) { return; }
  var opSiteId = opSite[0].id;
  if (opSiteId == "") {return;}

  // Set the iFrame URL to the print preview URL.
  // Insert the GUID into the URL.
  if (opSiteId != "") {
    var el = document.getElementById("IFRAME_opsitedata");
    var el2 = document.getElementById("printArea");
    var url = "/_forms/print/print.aspx?allsubgridspages=false&formid=69144f31-713b-4eeb-9d89-096d893be6a2&id=" + escape(opSiteId) + "&objectType=10004";
    el.src = url;
  }

}

Second Function

I called this function iframe_onLoad (originally I had it attached (via code) to the iFrame’s onLoad event). The function needs to be attached to the iFrame’s onReadyStateChange event. This function is where the jQuery comes in – mainly for the Sizzle selector system.

The function basically goes into the iFrame and removes the toolbar, the headings and the big whitespaces. See the comments for full details.

function iframe_onLoad() {

  // Grab the iFrame element.
  // Check it's fully loaded and we have the page is correct.
  var iFrame = document.getElementById("IFRAME_opsitedata");
  if (iFrame.readyState != "complete") {return;}
  if (iFrame.src.indexOf("/_forms/print/print.aspx") == -1) {return;}

  // Grab the preview iFrame as a jQuery object. Remove the toolbar.
  var IF1 = jQuery("#IFRAME_opsitedata");
  IF1.contents().find("tr#printHeader").remove();

  // Grab the sub-iFrame within the preview iFrame.
  var IF2 = IF1.contents().find("iframe#printMain");
  // Remove the big header and icon
  IF2.contents().find("tr.ms-crm-Form-HeaderContainer").remove();
  // Remove the big whitespace at the top
  IF2.contents().find("div.ms-crm-Tab-Print").first().remove();
  // Remove a bunch of whitespace around the second iFrame
  IF2.contents().find("td.ms-crm-Form-Page-Main-cell").css("padding","0px");
  // Reinstate the whitespace next to the scrollbar
  IF2.contents().find("td.ms-crm-Form-Page-Main-cell").css("padding-right","8px");
  // Remove the big whitespace at the bottom
  IF2.contents().find("td.ms-crm-Form-Footer").parent().remove();

  // Remove the header text. The text isn't within any specific tag so just performing a replace.
  // The only part of the code that isn't directly re-usable
  IF2.contents().find("div.ms-crm-Tab-Print").each(function() {
    jQuery(this).html( jQuery(this).html().replace("General","") );
    jQuery(this).html( jQuery(this).html().replace("Response Information","") );
    jQuery(this).html( jQuery(this).html().replace("Notes","") );
  });

  // Expand Op Site Data tab, revealing the fully rendered preview
  var elTab = Xrm.Page.ui.tabs.get("tab_4");
  elTab.setDisplayState("expanded");

}

Success

That’s it! Feel free to leave a comment if you found this useful, spot a problem or have a question.

Advertisements
Leave a comment

14 Comments

  1. Cathy Armbruster

     /  September 22, 2011

    Hello – Thanks for this post. I think it will be very helpful if I can figure out my problem. I cannot get anything to appear in my print preview iFrame. I have the full url (not even building the url at this point – just hard-coded it in your code) specified and the print preview form displays but no data is filled in. If I reference the exact same url in the address line of the browser, I see the correct print preview with data. I cannot determine why it won’t show up on the form though. Any ideas on what may be causing this?

    Reply
    • Cathy,

      Glad you liked the post. That’s very strange – I really can’t think of anything that would cause data to be displayed when accessing the preview directly but not when viewing it through a CRM form – especially when you’re hard-coding the URL.

      I’d be happy to have a look on one of our test servers if you want to send me your customizations zip (use dropbox or something). If not, best of luck finding a solution.


      Peter

      Reply
  2. Cathy Armbruster

     /  September 23, 2011

    Thanks for the offer Peter. I got it working. Restrict cross-frame scripting was selected on the iFrame that I added. Once I unchecked that, it worked great. Thanks again for the post.

    Reply
  3. Barry

     /  January 5, 2012

    Hi,
    thanks for this nice post.
    I’m facing an issue: access denied on line “IF1.contents().find(“tr#printHeader”).remove();”

    Reply
    • Barry,

      You need to ensure “Restrict cross-frame scripting” is un-ticked in the IFrame configuration. I forgot to mention it in my post (have now updated it).

      Hope that helps.

      Pete

      Reply
  4. Barry

     /  January 6, 2012

    Merci beaucoup.
    It works

    Reply
  5. Jennyfer

     /  January 24, 2012

    This is a great post . Thanks a lot ….It comes in really handy in a few scenarios.

    Reply
  6. Sanjeev

     /  February 14, 2012

    I’m facing “And error has occurred”. In my case I’m accessing Case entity from Custom Entity. Alos i’m not getting iFrame’s onReadyStateChange

    Reply
  7. Chris

     /  March 1, 2012

    I’ve successfully got this working however there appears to be an issue with it reverting to the role based form settings. That is, either is displays the “overview” form IN ALL contexts (e.g. entity’s default form) or it display the default “Information” form in ALL contexts. It seems that CRM is honoring the role based forms regardless of how the onload contructs and sets the iframe’s Url… In the end, it gets altered. I used IE developer tools (F12) and confirmed this behavior. Perhaps I’m missing something! 😉

    Reply
  8. Excellent! I tried with mobile form before – but this way is better 🙂

    Reply
  9. ABell

     /  June 16, 2014

    Excellent Post. Thanks.

    For the direct link to PrintPreview form without borders

    Use: “/_forms/print/custformprint.aspx?”
    Instead of: “/_forms/print/print.aspx”

    Then in ReadyStateChange could use something like:

    var iFrame = document.getElementById(“IFRAME_XXXXXX”);

    if (iFrame != null ) {

    var frameDoc = iFrame.contentWindow.document;
    var a = frameDoc.getElementById(‘formHeaderContainer’).style.visibility=’hidden’;
    var b = frameDoc.getElementById(‘form_title_div’).style.visibility=’hidden’;
    var c = frameDoc.getElementById(‘formHeaderContainer’).style.height=’1px’;
    }

    Reply
  10. Sean

     /  April 9, 2015

    ABell,

    Likely you won’t see this but wanted to thank you. Perhaps it’s because I’m using jquery 1.4.1 but I couldn’t get OP’s code to remove the print header/menu from the iFrame for the life of me. Your code works flawlessly.

    Thanks for posting it.

    Reply
  11. Great post, I cant get the hide functions to work in CRM 2015 tho, anyone know what to change to make it work in 2013/2015?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: