Versions Compared

Key

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

...

  • displayConditions – Defines conditions for displaying the component. This allows showing or hiding the document viewer based on complex rules involving other form values, user roles, or application state.

Structure of the Document ViewerImage Added

Styling

(Configured in Visual Properties)

...

  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-105271&t=iosNC2AkSTGs5lMh-1
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id7/5-document-viewer

Guidelines

Usage

...

  • Choose rendering behavior based on intent: preserve exact layout with originalSize: true (e.g., contracts), or fit to available space with originalSize: false for general reading.
  • Control copying according to content policy by toggling allowSelectText (enable for research/citation workflows; disable for view-only or sensitive PDFs).
  • Optionally aid discovery during onboarding by enabling a guided-tour hotspot via enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription (all translatable).Expose stable hooks for programmatic and test automation via id and dataTestId. (No component events are defined in the Article; avoid relying on event handlers.)

Sizing & Layout

  • Add breathing room around the viewer with paddingClass (e.g., “p-4”), using only the component’s own spacing token.
  • Use originalSize to govern scaling; when false, the viewer scales to fit its allotted area; when true, it uses the document’s native dimensions.

...

DoDon’tArticle setting(s)
Localize the title so users understand what they’re viewing.Hard-code an English-only title.title
Preserve exact layout for formal documents.Force-fit precise layouts that become blurry or misaligned.originalSize
Disable text selection for sensitive PDFs.Leave selection on when copying must be prevented.allowSelectText
Add spacing using the component’s own token.Hack spacing with external CSS not controlled by the component.paddingClass
Hide the viewer until a document is available.Show an empty/blank frame.displayConditions
Hide confidential documents from unauthorized users.Show the component and rely on the document to say “no access.”visibilityPolicySetIdProvide stable automation hooks for QA.Target the viewer with brittle selectors (e.g., DOM order).id, dataTestId
Use localized copy for guided tours.Show untranslated hotspot text.enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription

...