Versions Compared

Old Version 2

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

Saved on

compared with

New Version Current

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)

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.

Example Document ViewerImage Added

Specs

Tokens

TokenDescription
displayNameDisplay name shown in the structure panel.
titleTitle text displayed above the document viewer (supports multiple languages).
originalSizeShows the document in its original dimensions when true; otherwise scales to fit.
allowSelectTextAllows users to select and copy text from the document when enabled.
paddingClassSpacing around the component via CSS classes.
dataSourceIdData source ID used to retrieve the PDF document.
getEntityCollectionHttpRequestParametersMapHTTP parameters mapping used when fetching the document.
visibilityPolicySetIdPolicy set ID controlling component visibility.
displayConditionsRules that determine when the component is shown or hidden.
idUnique identifier for programmatic access.
dataTestIdTesting hook ID for automated tests.
enableAsHotspotEnables this component as a guided tour hotspot.
guidedTourHotSpotTitleTitle for the guided tour hotspot (supports translations).
guidedTourHotSpotDescriptionDescription 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.

Structure of the Document ViewerImage Added

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

...

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

...

  • Localize user-visible text with title (language map).
  • Localize guided-tour copy with guidedTourHotSpotTitle and guidedTourHotSpotDescription.
  • Keep title concise to avoid truncation in tight spaces; use the document itself for detailed naming, not the title line.

Dos & Don’ts

DoDon’tArticle 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.”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

...