(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Document Viewer

The Document Viewer Component is a specialized viewer designed to display PDF documents within your application. It provides an intuitive interface for viewing documents with configurable display options, making it ideal for applications that need to present documents such as contracts, reports, manuals, or any PDF content directly within the interface without requiring users to download or use external viewers.

Properties

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.

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.

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

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

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

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.

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.

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.

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.