Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Document Viewer
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-105271&t=iosNC2AkSTGs5lMh-1
Overview
- The Document Viewer displays PDF documents directly inside the application.
- It offers configurable display options for document viewing.
- It helps users read documents like contracts, reports, or manuals without external viewers.
- It supports localized titles and optional text selection.
- It can connect to a datasource to fetch the PDF content.
...
- visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to
"documentAccessPolicy"restricts the document viewer visibility to users with document access privileges according to the specified policy.
Links
- 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
- Provide a clear, localized label for context with
title(multi-language map) so users know which document they are reading. - 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 via
idanddataTestId. (No component events are defined in the Article; avoid relying on event handlers.)
...
| Do | Don’t | Article setting(s) | Bind the viewer to a concrete source and pass explicit parameters for determinism. | Rely on implicit/global state for which document appears. |
|---|---|---|
| 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 |
...
