(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Document Viewer
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). |
Structure
(Configured in Visual Properties)
- title – Sets the title text displayed above the document viewer, with support for multiple languages. For example,
{"en-US": "Contract Details", "de-DE": "Vertragsdetails"} ensures proper localization of the title based on the user's language settings. This title helps users understand what document they're viewing.
- allowSelectText – Controls whether users can select and copy text from the document. When enabled, users can highlight and copy text content from the displayed document, which is useful for research or citation purposes. When disabled, the document is view-only without text selection capabilities.
(Configured in Datasource Properties)
- dataSourceId – Specifies the data source ID for retrieving the document. This identifies the endpoint that will provide the PDF document data. For example, setting to
"api/documents/contractPdf" connects the viewer to the specific API endpoint that serves the contract document.
- getEntityCollectionHttpRequestParametersMap – Configures HTTP parameters for document data fetching. This object maps parameters needed for the document request, such as query parameters or path variables. For example,
{"documentId": "context.selectedDocumentId"} passes the selected document ID from the context to the API request.
(Configured in General Properties)
- displayName – Sets the display name of the component shown in the structure panel. For example, "Contract Document Viewer" allows for easy identification of the component's purpose in the application structure, making it easier for developers to locate and work with this specific document viewer.
(Configured in Visibility Properties)
- 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)
- originalSize – Determines whether the document is displayed in its original size or scaled to fit the container. When set to true, the document maintains its original dimensions, which is useful for preserving exact layout and readability of carefully formatted documents. When set to false, the document scales to fit the available space.
- paddingClass – Configures spacing around the document viewer component using CSS classes. For example,
"p-4" adds medium padding on all sides of the component to improve visual spacing within its container.
Tests
(Configured in Testing Hooks Properties)
- id – Specifies a unique identifier for the component used for programmatic access. For example,
"contractDocumentViewer" enables targeted manipulation of this specific document viewer component.
- dataTestId – Sets the testing hook ID for automated testing. For example, setting to
"contract-document-view" allows test scripts to reliably locate this component for automated testing scenarios.
- enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the document viewer can be highlighted during onboarding or tutorial flows to explain its functionality to new users.
- guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example,
{"en-US": "Document Viewer", "de-DE": "Dokumentenbetrachter"} provides clear identification during guided tours.
- guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example,
{"en-US": "View documents directly in the application", "de-DE": "Dokumente direkt in der Anwendung anzeigen"} provides detailed instructions during guided tours.
Authorization
(Configured in Authorization 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
[NO DATA AVAILABLE]
Accessibility
[NO DATA AVAILABLE]