Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

IFrame

Link to Figma: tba

Overview

  • The IFrame component embeds external web content inside your application.
  • It keeps the embedded content separate from the main application for security.
  • It supports HTML documents, websites, and full web applications.
  • It is useful for integrating third-party tools, dashboards, or documentation.

...

  • 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 it 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.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Embed third-party pages or apps by setting src to a trusted, task-relevant URL or a template expression (e.g., "${context.reportUrl}").
  • Show the IFrame only when prerequisites are satisfied (e.g., a selection exists) so users don’t see empty frames (displayConditions).
  • Restrict visibility of sensitive or licensed content to authorized audiences (visibilityPolicySetId).
  • Name the instance clearly for authors/QA so it’s easy to find in complex screens (displayName).

Sizing & Layout

  • Size the frame to the embedded content’s expected viewport; use percentages for flexible layouts and pixels for fixed designs (width, height).
  • Add breathing room so the frame doesn’t butt up against adjacent UI (paddingClass).
  • For content that should fill the available area, set width: "100%" and an appropriate height to avoid double scrollbars.

Interactions & Events

  • Bind lifecycle behaviors to events without duplicating state rules: use ON_INIT for any setup (e.g., preparing dynamic src context), ON_PAGE_LOAD for analytics or marking “ready,” and ON_DESTROY for teardown of timers/listeners.

Visibility & Authorization

  • Hide the IFrame entirely for unauthorized users (visibilityPolicySetId).
  • Combine authorization with runtime prerequisites to prevent blank or misleading frames (visibilityPolicySetId, displayConditions).

Content & Localization

  • Localize any user-facing tour copy associated with the frame (guidedTourHotSpotTitle, guidedTourHotSpotDescription).
  • Use displayName for authoring clarity only; it does not surface to end users.

Dos & Don’ts

DoDon’tArticle setting(s)
Bind src to the exact page/app users need (static or via template).Point src to a generic landing page that forces extra navigation.src
Show the frame only when inputs exist (e.g., selected item).Render an empty frame that looks broken.displayConditions
Gate sensitive embeds with policies.Rely on the embedded site to block access after render.visibilityPolicySetId
Use percentages/pixels to size thoughtfully and avoid double scrollbars.Leave default sizes so content overflows or feels cramped.width, height
Add outer spacing so the frame doesn’t touch neighboring UI.Jam the frame edge-to-edge with no visual separation.paddingClass
Treat ON_PAGE_LOAD as the readiness signal.Guess readiness with arbitrary delays.events.ON_PAGE_LOAD
Clean up on unmount.Leave timers/listeners running after navigation.events.ON_DESTROY
Provide stable test hooks.Select the frame with brittle DOM selectors.id, dataTestId
Localize hotspot captions for onboarding.Ship English-only guidance.guidedTourHotSpotTitle, guidedTourHotSpotDescription
Give the instance a purposeful name for authors.Keep ambiguous defaults that hinder maintenance.displayName

Accessibility

  • Hide entire frames that users must not access to reduce confusion and accidental focus (visibilityPolicySetId).
  • Prevent “blank frame” experiences by rendering only when content is available (displayConditions).
  • Provide stable hooks for automated accessibility checks (dataTestId, id).
  • Offer localized guidance during tours (guidedTourHotSpotTitle, guidedTourHotSpotDescription, enableAsHotspot).
  • Use paddingClass to avoid crowding touch targets adjacent to the frame.