Page History
...
- 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.

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 withoriginalSize: falsefor 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, andguidedTourHotSpotDescription(all translatable).Expose stable hooks for programmatic and test automation viaidanddataTestId. (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
originalSizeto govern scaling; whenfalse, the viewer scales to fit its allotted area; whentrue, it uses the document’s native dimensions.
...
| Do | Don’t | Article 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.” | visibilityPolicySetId | Provide 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 |
...