Use IFRAME and web resource controls on a form

IFRAME and web resource controls embed content from another location in pages by using an HTML IFRAME element.

You can use an IFRAME to display the contents from another website in a form, for example, in an ASP.NET page.

It is recommended to use Power Apps component framework components if you're considering to use a web resource to show content that users will interact with.

Displaying a form within an IFrame embedded in another form is not supported.

You can use one of the following web resources to display the contents of web resources in a form:

• Web Page (HTML) web resources

• Image (JPG, PNG, GIF, ICO) web resources

The following sections describe your options if you want these controls to show more than static content.

Select whether to restrict cross-frame scripting

Use the Restrict cross-frame scripting, where supported option when you don't fully trust the content displayed in an IFRAME. When this option is selected, the IFRAME has the parameters set that are listed in the following table.

Enabling IFrame communication across domains

There are times when you want to enable communication for an IFRAME that contains content on a different domain. Window.postMessage is a browser method that provides this capability for Google Chrome, Mozilla Firefox, and Apple Safari. For more information about using postMessage, see the following blog posts:

• Cross domain calls to the parent form

• Cross-Document messaging and RPC

Pass contextual information about the record

You can provide contextual information by passing parameters to the URL defined in the control. The page that is displayed in the frame must be able to process parameters passed to it. All the parameters in the following table are passed if the IFRAME or web resource is configured by using the Pass record object-type code and unique identifier as parameters option.

You can specify whether all the parameters in the following table will be passed.

Language codes are four-digit or five-digit locale IDs. Valid locale ID values can be found at Locale ID (LCID) Chart).

Example

The following sample shows the URL without parameters.

https://myserver/mypage.aspx  

The following sample shows the URL with parameters.

https://myserver/mypage.aspx?id=%7bB2232821-A775-DF11-8DD1-00155DBA3809%7d&orglcid=1033&orgname=adventureworkscycle&type=1&typename=account&userlcid=1033  

Read passed parameters

Passed parameters are typically read in the target .aspx page by using the HttpRequest.QueryString property. In an HTML page, the parameters can be accessed by using the window.location.search property in JavaScript. For more information, see HttpRequest.QueryString Property and search Property.

Pass form data

Use the getValue method on the columns that contain the data that you want to pass to the other website, and compose a string of the query string arguments the other page will be able to use. Then use a Column OnChange event, IFRAME OnReadyStateComplete event, or Tab TabStateChange event and the setSrc method to append your parameters to the src property of the IFRAME or web resource.

If you're using the data parameter to pass data to a Silverlight web resource, you can use the getData and setData methods to manipulate the value passed via the data parameter. For webpage (HTML) web resources, use the setSrc method to manipulate the querystring parameter directly.

Avoid using the OnLoad event. IFRAMES and web resources load asynchronously and the frame may not have finished loading before the Onload event script finishes. This can cause the src property of the IFRAME or web resource you have changed to be overwritten by the default value of the IFRAME or web resource URL property.

Change the URL

You may want to change the target of the IFRAME based on such considerations as the data in the form or whether the user is working offline. You can set the target of the IFRAME dynamically.

Example

The following sample shows you how to set the src property for the IFRAME and any parameters by using the onChange event of a choice column.

//Get the value of an option set attribute
var formContext = executionContext.getFormContext();
var value = formContext.getAttribute("new_pagechooser").getValue();  
var newTarget = "";  
//Set the target based on the value of the option set  
switch (value) {  
    case 100000001:  
        newTarget = https://myServer/test/pageOne.aspx;  
        break;  
    default:  
        newTarget = https://myServer/test/pageTwo.aspx;  
        break;  
}  
//Get the default URL for the IFRAME, which includes the   
// query string parameters  
var IFrame = formContext.ui.controls.get("IFRAME_test");  
var Url = IFrame.getSrc();  
// Capture the parameters  
var params = Url.substr(Url.indexOf("?"));  
//Append the parameters to the new page URL  
newTarget = newTarget + params;  
// Use the setSrc method so that the IFRAME uses the  
// new page with the existing parameters  
IFrame.setSrc(newTarget);

See Also

Client scripting using JavaScript