(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

IFrame

The IFrame Component allows you to embed external web content within your application. It provides a secure way to display content from other websites, HTML documents, or web applications while maintaining separation between the embedded content and your main application. This component is ideal for integrating third-party tools, displaying documentation, embedding dashboards, or showing any other web content that needs to be incorporated into your application.

Properties

General Properties

  • displayName - Sets the display name of the component shown in the structure panel. For example, "Payment Gateway IFrame" allows for easy identification of the component's purpose in the application structure, making it easier for developers to locate and work with this specific IFrame.

Visual Properties

  • src - Specifies the URL or path of the content to be displayed in the IFrame. This property supports template expressions to make the source dynamic based on context data. For example, "https://example.com/reports" will embed the reports page, while "${context.reportUrl}" would use a URL from the current context. This property is crucial as it determines what content will be displayed in the IFrame.

  • width - Sets the width of the IFrame in pixels or percentages. For example, "800px" creates a fixed-width IFrame, while "100%" makes the IFrame expand to fill the width of its container. Setting the appropriate width ensures the embedded content is displayed correctly within your layout.

  • height - Sets the height of the IFrame in pixels or percentages. For example, "600px" creates a fixed-height IFrame, while "100%" makes the IFrame expand to fill the height of its container. Setting a proper height prevents unnecessary scrolling and ensures the embedded content is fully visible.

  • paddingClass - Configures spacing around the IFrame using CSS classes. For example, "p-4" adds medium padding on all sides of the component, improving its visual integration within its container.

Event Actions Properties

  • events - Configures the events that the component can trigger and respond to:
    • ON_PAGE_LOAD: Triggered when the content within the IFrame has finished loading. This event can be used to perform actions once the embedded content is ready, such as updating related components or recording analytics about content availability.
    • ON_INIT: Triggered when the IFrame component is initialized. Can be used to perform setup operations or to initialize related components.
    • ON_DESTROY: Triggered when the IFrame component is removed from the DOM. Useful for cleanup operations and releasing resources to prevent memory leaks.

Authorization Properties

  • visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "secureContentPolicy" restricts the IFrame visibility to users with permissions to view potentially sensitive external content. This ensures that embedded content is only shown to authorized users.

Visibility Properties

  • displayConditions - Defines conditions for displaying the component. This allows showing or hiding the IFrame based on complex rules involving form values, user roles, or application state. For example, the IFrame might only be shown if a specific feature is enabled in the system or if the user has completed certain actions.

Testing Hooks Properties

  • id - Specifies a unique identifier for the component used for programmatic access. For example, "paymentGatewayFrame" enables targeted manipulation of this specific IFrame component through scripts or automated tests.

  • dataTestId - Sets the testing hook ID for automated testing. For example, setting to "payment-gateway-iframe" allows test scripts to reliably locate this component during automated testing.

  • enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the IFrame can be highlighted during onboarding or tutorial flows to draw user attention to important embedded content.

  • guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Payment Gateway", "de-DE": "Zahlungs-Gateway"} provides clear identification during guided tours.

  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This area displays our secure payment processing system", "de-DE": "Dieser Bereich zeigt unser sicheres Zahlungsabwicklungssystem"} provides detailed instructions during guided tours.

  • No labels