Share

CRM 2011 – iFrames & Saving by

After spending time on several of the CRM forums, I noticed a few people having trouble with iFrames and saving data inside of the iFrame. While a forum post is a little difficult to write a full response, I wanted to share some insight on capturing the form save event to then trigger a save event inside of your iFrame.

From a business case, this is a fantastic way to tie multiple systems together. If all you are doing is syncing data, then look first at a plugin or scribe. However, if you are looking for the user to interact with multiple systems simultaneously, then an iFrame is a wonderful way to integrated with an existing system. A good example might be where CRM is only storing the summary information and the iFrame contains the details. The user may update the details which should save both the CRM record and the details of the web site.

Prerequisites

First, let’s assume you have an iFrame inside an entity.

Secondly, we need to uncheck the “Restrict cross-frame scripting” check box on the iFrame properties.

image

Lastly, it’s a good idea to make sure our iFrame is using HTTPS to prevent mixed mode security warnings.

 

Talking Directly

If you try to talk directly to the iFrame via something like:

Xrm.Page.ui.controls.get('IFRAME_opp').getObject().contentWindow.document

Unless you are On-Premise, you may encounter the “Access is Denied” warning. This will show itself when dealing with URLs on a different domain (or subdomain). Cross domain scripting is a security feature within the browser. Now an easy fix is to disable the browser settings, but this isn’t a good solution.

 

Messaging

Instead of talking directly, we need send a messages to our iFrame. To send a message, we’d do something like:

Xrm.Page.ui.controls.get('IFRAME_opp').getObject().contentWindow.postMessage('test', "*")

To receive the message on the iFrame, you need to listen for the message event. Let’s take a look at the JavaScript on our example iFrame page:

   1: function receiveMessage(e) {
   2:   
   3:    if (e.origin == 'https://way.crm.dynamics.com'){
   4:  
   5:       if (e.data == 'test'){
   6:          document.getElementById('msgBox').innerHTML = 'testing...<br />' + e.origin + '<br />' + e.data; 
   7:       }
   8:  
   9:       if (e.data == 'save'){
  10:          saveForm();
  11:       }
  12:    }
  13:  
  14: }
  15:  
  16: saveForm = function() {
  17:    document.getElementById('msgBox').innerHTML = 'saving...';
  18: }
  19:  
  20: window.attachEvent("onmessage", receiveMessage);

 

It is very important to check the origin and the message if you are dealing with publicly facing sites.

If the idea of messaging is new to you, here are some additional resources:

 

The OnSave

To initiate the message from the CRM 2011 form, you need to register an OnSave event from within the “Form Properties”.

image

 

How about .NET Pages?

If your iFrame is an ASPX page, all of this still applies. The only difference is that you want to have an ASP.Net button on your page to call the server side code. Instead of the saveForm event, simply call the click event of the button.

When dealing with server side saves though, you can either post a message back to say “I’m done” which will then complete the CRM save or you can put a set timeout in the onSave on the CRM side.

 

Conclusion

Hopefully you have seen how easy it is to integrate with another web site while inside of CRM 2011. If you have had problems with iFrames in the past, I really encourage you to use iFrames for your integration needs as they can really enhance your users experience and can allow for improved data across systems. I hope you enjoy!