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.

Note

The designs you choose for the form are also used for the Dynamics 365 for Outlook reading pane and forms used by Dynamics 365 tablets. Web resources and IFRAMEs aren't displayed using the Dynamics 365 for Outlook reading pane, however, they are supported in Dynamics 365 for tablets. If your IFRAME depends on access to the Xrm object of the page or any form event handlers, you should configure the IFRAME so that it's not visible by default.

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:

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.

Parameter Description
security="restricted" This parameter is no longer supported.
sandbox="" For browsers that support this parameter, the content in the IFRAME is essentially limited to only displaying information. The following restrictions could be applied:

- Browser plug-ins are disabled.
- Forms and scripts are disabled.
- Links to other browsing contexts are disabled.
- Content is treated as from a different domain even if the domain is the same.

This parameter is defined by W3C and is supported by the following browsers:

- Microsoft Edge
- Google Chrome
- Apple Safari
- Mozilla Firefox

For more information about the sandbox parameter see:

- How to safeguard your site with HTML5 sandbox
- Sandbox

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:

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.

Parameter Name Description
typename Table Name The name of the table.
type Table Type Code The integer that uniquely identifies the table in a specific organization.
id Object GUID A GUID that represents a record.
orgname Organization Name The unique name of the organization.
userlcid User Language Code The language code identifier that is being used by the current user.

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

Note

We suggest that you use the table name instead of the type code because the table type code for custom tables may be different between Microsoft Dataverse organizations.

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.

Note

When you change the target page for the IFRAME, parameters aren't passed to the new URL automatically. You must append the query string parameters to the URL before you use the setSrc method.

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