How to set up an iframe on your application

[bethany.k]

These steps walk through the most common way to set up an iFrame. This will cover the basics end-to-end, from creating the data item to getting the iFrame to display content. Depending on your use case, you may need to modify the setup (for example, your iFrame requires authentication, dynamic URLs, or additional workflow logic).

1. Create a data item for the iFrame

• Open the Data Items application and create a new data item that will represent the iFrame.
  • Configuration:
    • Name: Must start with znwInlineIframe
      • Namespaced example: nsPTestznwInlineIframeKittenPicture
      • Non-namespaced example: znwInlineIframeKittenPicture
  • Type: Object
  • Properties: Configure as needed for your use case

2. Add the data item to a table

• Add the iFrame data item to the table where you want it displayed.
• Add EndpointURL field to the same table.

3. Configure the application (this is the application over the table from step 2)

• Ensure the application built over the table is configured to display the iFrame data item.
• Optionally display the EndpointURL field for initial testing/troubleshooting.
• Advanced → Field Dependencies → Common Context → Publishers:
  • Create a new publisher record.
    • Set the From to Detail (for the first field). Select EndpointURL (for the second field).
    • Set the To to the ScopeName you will use in the Content Item Definition application (next step).

4. Create a Content Item Definition (CID)

• Open the Content Item Definitions application and create a new record.
  • Configuration:
    • Name: Must match the iFrame data item name exactly.
    • Source URL: The Help text provides more detail. In this scenario, we will show the Common Context setup.
    • Example:
      • ${CC.ScopeName.FieldName} → ${CC.KittenPictureScope.EndpointURL}
    • ScopeName: Use the same value you entered in the Publisher To field.

5. Populate the EndpointURL

• You can populate the EndpointURL field in one of two ways:
  • Via logic (e.g., a logic block or endpoint call that dynamically generates the URL and sets the EndpointURL field)
  • Manually, if displaying a static URL for testing (like a public image)

6. Launch and Test

• Open your application and verify the iFrame displays correctly.

7. Troubleshooting:

• If you see a 404 Not Found, check that the EndpointURL is populated and points to a real resource.
• Clear your browser cache and do a hard reload to ensure the latest content is loaded.