Summary of article:

• Adding an IFrame to your Form
• Adjusting the size of the IFrame
• Make the IFrame Dynamic
• Adding a Web Resource
• Adding the Event Handlers
• URL Encoding
• Warning: Not all sites will play well with IFrames

Have you ever wanted to add a webpage into one of your CRM forms?

Well here is how you can add a dynamic IFrame to your CRM Forms.

In the example below we will add an IFrame on the Account Form that will show the Bing search results for the Account. This same technic can be used to add IFrame to other sites, like a LinkedIn Search on the Contact Form.

Adding an IFrame to your Form

First things first, we will need to add a plain IFrame to our form. This can be done through the form editor by following the steps below.

1. Open the Main Account Form in the Form Editor, select the Insert Tab and click on the IFRAME button.
2.  Give your Form a name and set a static URL for the page to initially load. Then click Ok to add the IFrame to the form.
   
3. Save and Publish the Form.

If you setup the IFrame above you should now see a the Bing Search website embedded in your form.

Adjusting the size of the IFrame

The default size of the IFrame is set to 6 Rows. While this keeps your screen real-estate open for other things like attribute fields, it may seem to small in many cases. You can increase the size of the IFrame by double-clicking the IFrame to go into its properties and selecting the Formatting Tab.

Make the IFrame Dynamic

Embedding a website into your CRM Form has limited uses without having it automatically pass some information from the form to the webpage like passing the IFrame a field value or id. Just showing the Bing website is not going to be very helpful. However, having it automatically show the results for the account can add value.

To do this we will need to add a Form Script that will get the Account Name and update the URL of the IFrame.

Adding a Web Resource

1. In the Form Editor click on Form Properties from the Home Tab.
2. Under Form Libraries Click on Add.
3. Press New.
4. Give the Web Resource a name and Display Name. Then select Type “JScript”.
5. Click on the Text Editor and Enter the text below.
   function updateBingIFrame()
{
//get the name
var accountName = Xrm.Page.getAttribute("name").getValue();
//Check that there is a name
if (accountName)
{
//Update the IFrame
var bingIframe = Xrm.Page.ui.controls.get("IFRAME_Bing");
var newUrl = "http://www.bing.com/?q=" + encodeURIComponent(accountName);
bingIframe.setSrc(newUrl);
}
}
6. Click Ok, Save and Close, then Ok.

Adding the Event Handlers

The Event Handlers are what determines when an action is triggered. There are three places you can have your Form Scripts triggered; OnLoad of the form, OnSave of the from, or OnChange of a field. First we will add an OnLoad Event Handler to update the IFrame when it loads. Then we will add an OnChange Event Handler so the IFrame will refresh if the name field is updated.

1. Scroll to the bottom of the Form Properties window and Click on Add under Event Handlers. The Control should initially be set to Form and Event OnLoad.
2. Select the Library you created in the steps above and enter the function name updateBingIFrame . Please note you do not need to add () at the end of the function, this will cause an error if you do.
3. Click Ok.

Next, add the OnChange Event.

1.  At the bottom of the Form Properties window set the Control to Account Name. Then click the Add button.
2. Select the Library you created in the steps above and enter the function name updateBingIFrame . Please note you do not need to add () at the end of the function, this will cause an error if you do.
3. Click Ok.

Save and Publish your form and you should now have a dynamic IFrame. If you open an account record you should see the IFrame loaded with the Bing results for that account. If you change the account name you should see it automatically refresh the results.

URL Encoding

Don’t forget to Encode your URLs. If not you may run into errors like the one below or you may notice that the string you are sending gets abruptly cut off.

The path of the item ‘/….’ is not valid. The full path must be less than 260 characters long; other restrictions apply. If the report server is in native mode, the path must start with slash. (rsInvalidItemPath)

This is because particular error occurs when try to open a report and pass an & in one of your query string parameters. Since & is used to separate out each of the parameters your browser gets very confused if you include it in a parameter value without encoding it.

In our Example, if you had account name was AT&T you would see the search results for AT in the IFrame if your form script does not encode the account name.

You can easily encode the url using the built-in JavaScript functions encodeURIComponent() or encodeURI().

var NewURL = 'http://www.bing.com/search?q=' + encodeURIComponent(Xrm.Page.data.getAttribute("customernumber").getValue());

Warning: Not all sites will play well with IFrames

Have you ever noticed that all of the examples like the one above use Bing Live Search and not Google. That’s not just because CRM is a Microsoft product. If you attempt to setup a similar search IFrame using google you will discover that google does not allow you place their site within an IFrame. Be aware they are not the only ones.