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.
Specs
Tokens
| Token | Description |
|---|---|
| displayName | Display name shown in the structure panel. |
| title | Title text displayed above the document viewer (supports multiple languages). |
| originalSize | Shows the document in its original dimensions when true; otherwise scales to fit. |
| allowSelectText | Allows users to select and copy text from the document when enabled. |
| paddingClass | Spacing around the component via CSS classes. |
| dataSourceId | Data source ID used to retrieve the PDF document. |
| getEntityCollectionHttpRequestParametersMap | HTTP parameters mapping used when fetching the document. |
| visibilityPolicySetId | Policy set ID controlling component visibility. |
| displayConditions | Rules that determine when the component is shown or hidden. |
| id | Unique identifier for programmatic access. |
| dataTestId | Testing hook ID for automated tests. |
| enableAsHotspot | Enables this component as a guided tour hotspot. |
| guidedTourHotSpotTitle | Title for the guided tour hotspot (supports translations). |
| guidedTourHotSpotDescription | Description for the guided tour hotspot (supports translations). |
...
- 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)
...
- 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.
Guidelines
Usage
...
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
- 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.)
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) | |||
|---|---|---|---|---|---|
| Bind the viewer to a concrete source and pass explicit parameters for determinism. | Rely on implicit/global state for which document appears. | dataSourceId, getEntityCollectionHttpRequestParametersMap | |||
| 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 |
...
