Add an iframe to a model-driven app main form

  • Article

You can add inline frames (iframes) to a form to integrate content from another website within the form.

Iframe displaying a web page in a model-driven app

  1. Select Tables on the left navigation pane, and then open the table that you want. If the item isn’t in the side panel pane, select …More and then select the item you want.

  2. Select Forms from the Data experiences area.

  3. In the list of forms, open a form of type Main.

  4. In the form designer, select the section of the canvas where you want to add the iframe.

  5. On the Components left pane, expand Display, select External website, enter the Site URL, and then select Done.

    Add external website to a main form by selecting External website.

    Tab Property Description
    Display options Label Required: A label to display for the iframe.
    Display options Name Required: A unique name for the iframe. The name can contain only alphanumeric characters and underscores.
    Display options Hide label Select if you want the label hidden.
    Display options Hide You can hide the iframe so that it can be made visible by using scripts. More information: Visibility options
    Display options URL Required: The URL for the page to display in the iframe.
    Formatting Column width When the section containing the iframe has more than one column you can set the column to occupy up to the number of columns that the section has.
    Formatting Component height You can control the height of the iframe by specifying a number of rows the control occupies.
    Formatting Use all available vertical space Instead of setting the height by a number of rows, you can allow the iframe height to expand to available space.
    Formatting Scrolling You have three options for scrolling behavior:

    - As Necessary: Display scrollbars when the size of the iframe is larger than the available space.
    - Always: Always display scrollbars.
    - Never: Never display scrollbars.
    Formatting Display border Display a border around the iframe.
    Dependencies Table column dependencies An iframe may interact with columns in the form using script. If a column is removed from the form the script in the iframe may break. Add any columns referenced by scripts in the iframes to the Table column dependencies so that they can't be removed accidentally.
    Advanced Restrict cross-frame scripting, where supported It is considered a security risk to allow pages from a different web site to interact with the app using scripts. Use this option to restrict cross frame scripting for pages you do not have control over.
    Advanced Pass row object-type code and unique identifiers as parameters Data about the organization, user, and the record can be passed to the iframe. More information: Pass parameters to iframes

  6. Save and Publish the form.

Note

  • If the web page doesn't appear in the iframe, it might be because the website doesn't allow iframe rendering. When this occurs, the message URL refused to connect is displayed in the iframe at runtime.
  • Forms are not designed to be displayed within an iframe.
  • Authentication inside an iframe, either through a redirection or popups, isn't supported on mobile.

Pass parameters to iframes

Information about the row can be passed by enabling the Pass row object-type code and unique identifiers as parameters option. The values passed are:

Parameter Description
orglcid The Organization default language LCID.
orgname The name of the organization.
userlcid The user's preferred language LCID
type The table type code. This value can be different for custom tables in different organizations. Use typename instead.
typename The table type name.
id The id value of the row. this parameter has no value until the table row is saved.

Add an iframe using the classic form designer

  1. Sign in to Power Apps.

  2. Select Tables on the left navigation pane, and then open the table that you want. If the item isn’t in the side panel pane, select …More and then select the item you want.

  3. Select the Forms area.

  4. In the list of forms, open a form of type Main.

  5. Select Switch to classic to edit the form in the classic form designer.

  6. On the Insert tab, select IFRAME to view iframde properties.

    iframe properties.

Tab Property Description
General Name Required: A unique name for the iframe. The name can contain only alphanumeric characters and underscores.
URL Required: The URL for the page to display in the iframe.
Pass row object-type code and unique identifiers as parameters Data about the organization, user, and the row can be passed to the iframe. More information: Pass parameters to iframes
Label Required: A label to display for the iframe.
Display label on the Form Whether the label should be displayed.
Restrict cross-frame scripting, where supported It is considered a security risk to allow pages from a different web site to interact with the Dynamics 365 application using scripts. Use this option to restrict cross frame scripting for pages you do not have control over.
Visible by default Showing the iframe is optional and can be controlled using scripts. More information: Visibility options
Enable for mobile Select the checkbox to enable the iframe for mobile.
Formatting Select the number of columns the control occupies When the section containing the iframe has more than one column you can set the column to occupy up to the number of columns that the section has.
Select the number of rows the control occupies You can control the height of the iframe by specifying a number of rows the control occupies.
Automatically expand to use available space Instead of setting the height by a number of rows, you can allow the iframe height to expand to available space.
Select the scrolling type for the iFrame You have three options:

- As Necessary: Show scrollbars when the size of the iframe is larger than the available space.
- Always: Always show scrollbars.
- Never: Never show scrollbars.
Display border Display a border around the iframe.
Dependencies Dependent columns An iframe may interact with columns in the form using script. If a column is removed from the form the script in the iframe may break. Add any columns referenced by scripts in the iframes to the Dependent columns so that they cannot be removed accidentally.

Next steps

Use the Main form and its components