This is a sample of WebViewer integration into a Mendix low-code app.
WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.
Click the button below to view the full project in GitHub.
1import { Component, ReactNode, createElement } from "react";
2import PDFViewer from "./components/PDFViewer";
3
4import { WebViewerContainerProps } from "../typings/WebViewerProps";
5
6import "./ui/WebViewer.css";
7
8export default class WebViewer extends Component<WebViewerContainerProps> {
9 render(): ReactNode {
10 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
11 // @ts-ignore
12 const mx = window.mx;
13 const viewerProps = {
14 ...this.props,
15 annotationUser: this.props.annotationUser?.value,
16 isVisible: this.props.isVisible?.value,
17 mx
18 };
19 return <PDFViewer {...viewerProps} />;
20 }
21}
22
1<?xml version="1.0" encoding="utf-8"?>
2<widget id="pdftron.webviewer.WebViewer" pluginWidget="true" needsEntityContext="true" offlineCapable="true"
3 supportedPlatform="Web"
4 xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
5 xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
6 <name>WebViewer</name>
7 <description>Apryse WebViewer is a pure client-side JavaScript library that lets you view, edit, and annotate documents and images right in your Mendix application: Apryse WebViewer is the Mendix integration of Apryse's industry-leading document SDK.</description>
8 <icon/>
9 <properties>
10 <propertyGroup caption="General">
11 <propertyGroup caption="File">
12 <property key="fileUrl" type="string" required="false" defaultValue="https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf">
13 <caption>URL</caption>
14 <description>Manually specify a URL to load from.</description>
15 </property>
16 <property key="file" type="file" required="false">
17 <caption>File</caption>
18 <description>A FileDocument type of entity.</description>
19 </property>
20 <property key="enableFilePicker" type="boolean" defaultValue="false">
21 <caption>Show file picker</caption>
22 <description>Allow users to load their own local files.</description>
23 </property>
24 <property key="loadAsPDF" type="boolean" defaultValue="false">
25 <caption>Load as PDF</caption>
26 <description>Converts the loaded document to PDF after loading.</description>
27 </property>
28 </propertyGroup>
29 <propertyGroup caption="Editing">
30 <property key="enablePdfEditing" type="boolean" defaultValue="false">
31 <caption>Enable PDF editing</caption>
32 <description>Enable editing of PDFs in WebViewer.</description>
33 </property>
34 <property key="enableOfficeEditing" type="boolean" defaultValue="false">
35 <caption>Enable Office editing</caption>
36 <description>Switches WebViewer to Office editing.</description>
37 </property>
38 </propertyGroup>
39 <propertyGroup caption="Page Extraction">
40 <property key="enablePageExtraction" type="boolean" defaultValue="false">
41 <caption>Enable page extraction</caption>
42 <description>Enable page extraction so that users can select which pages they want to save to another file.</description>
43 </property>
44 <property key="allowExtractionDownload" type="boolean" defaultValue="false">
45 <caption>Allow extraction download</caption>
46 <description>Allow the extracted pages to be downloaded.</description>
47 </property>
48 </propertyGroup>
49 <propertyGroup caption="Other">
50 <property key="enableFullAPI" type="boolean" defaultValue="false">
51 <caption>Enable full API</caption>
52 <description>Loads the full API for full document processing features. This can impact performance compared to the lean API. Only turn this on if you need it.</description>
53 </property>
54 </propertyGroup>
55 </propertyGroup>
56 <propertyGroup caption="Annotations">
57 <propertyGroup caption="User">
58 <property key="annotationUser" type="attribute" required="false">
59 <caption>User</caption>
60 <description>Name of the user for annotations. Default is 'Guest'.</description>
61 <attributeTypes>
62 <attributeType name="String"/>
63 </attributeTypes>
64 </property>
65 </propertyGroup>
66 <propertyGroup caption="Options">
67 <property key="enableAnnotations" type="boolean" defaultValue="true">
68 <caption>Enable annotations</caption>
69 <description>Enable annotating documents.</description>
70 </property>
71 <property key="enableMeasurement" type="boolean" defaultValue="false">
72 <caption>Enable measurement</caption>
73 <description>Enable measurement tools.</description>
74 </property>
75 <property key="enableRedaction" type="boolean" defaultValue="false">
76 <caption>Enable redaction</caption>
77 <description>Enable the ability to redact content. The full API is required to apply the redactions.</description>
78 </property>
79 <property key="selectAnnotationOnCreation" type="boolean" defaultValue="false">
80 <caption>Select on creation</caption>
81 <description>Automatically select annotations when they are created.</description>
82 </property>
83 </propertyGroup>
84 <propertyGroup caption="XFDF">
85 <property key="xfdfAttribute" type="attribute" required="false" onChange="onExportXfdf">
86 <caption>XFDF Attribute</caption>
87 <description>The XFDF attribute to import from and export to.</description>
88 <attributeTypes>
89 <attributeType name="String"/>
90 </attributeTypes>
91 </property>
92 <property key="onExportXfdf" type="action" required="false">
93 <caption>On export XFDF</caption>
94 <description>Trigger an action when exporting annotations to XFDF. This can occur many times when auto-export is enabled.</description>
95 </property>
96 <property key="enableXfdfExportButton" type="boolean" defaultValue="false">
97 <caption>Enable XFDF Export Button</caption>
98 <description>Enable the button to manually export and save annotations as XFDF.</description>
99 </property>
100 <property key="enableAutoXfdfExport" type="boolean" defaultValue="false">
101 <caption>Enable Auto XFDF Export</caption>
102 <description>Enable automatic saving of the annotation XFDF when annotations change.</description>
103 </property>
104 <property key="enableAutoXfdfImport" type="boolean" defaultValue="false">
105 <caption>Enable Auto XFDF Import</caption>
106 <description>Enable automatic importing of the annotation XFDF when the document loads. Occurs only once on document load.</description>
107 </property>
108 </propertyGroup>
109 </propertyGroup>
110 <propertyGroup caption="UI">
111 <property key="isVisible" type="attribute" required="false">
112 <caption>Is visible</caption>
113 <description>A flag to toggle the visibility of WebViewer without unmounting it.</description>
114 <attributeTypes>
115 <attributeType name="Boolean"/>
116 </attributeTypes>
117 </property>
118 <property key="containerHeight" type="string" required="true" defaultValue="100vh">
119 <caption>Container height</caption>
120 <description>The height of the container, in CSS, that WebViewer mounts to. Ultimately, the height of WebViewer as well.</description>
121 </property>
122 <property key="enableDarkMode" type="boolean" defaultValue="false">
123 <caption>Enable dark mode</caption>
124 <description>Changes to the dark theme.</description>
125 </property>
126 <property key="defaultLanguage" type="enumeration" defaultValue="en">
127 <caption>Default language</caption>
128 <description></description>
129 <enumerationValues>
130 <enumerationValue key="en">English</enumerationValue>
131 <enumerationValue key="de">German</enumerationValue>
132 <enumerationValue key="es">Spanish</enumerationValue>
133 <enumerationValue key="fr">French</enumerationValue>
134 <enumerationValue key="it">Italian</enumerationValue>
135 <enumerationValue key="el">Greek</enumerationValue>
136 <enumerationValue key="ja">Japanese</enumerationValue>
137 <enumerationValue key="ko">Korean</enumerationValue>
138 <enumerationValue key="nl">Dutch</enumerationValue>
139 <enumerationValue key="pt_br">Portugeuse</enumerationValue>
140 <enumerationValue key="ru">Russian</enumerationValue>
141 <enumerationValue key="zh_cn">Chinese Simplified</enumerationValue>
142 <enumerationValue key="zh_tw">Chinese Traditional</enumerationValue>
143 <enumerationValue key="vi">Vietmese</enumerationValue>
144 <enumerationValue key="uk">Ukrainian</enumerationValue>
145 <enumerationValue key="id">Indonesian</enumerationValue>
146 <enumerationValue key="ms">Malaysian</enumerationValue>
147 <enumerationValue key="bn">Bengali</enumerationValue>
148 <enumerationValue key="hi">Hindi</enumerationValue>
149 <enumerationValue key="tr">Turkish</enumerationValue>
150 </enumerationValues>
151 </property>
152 <property key="notesInLeftPanel" type="boolean" defaultValue="false">
153 <caption>Notes in left panel</caption>
154 <description>Moves the notes panel from the right to the left.</description>
155 </property>
156 <property key="enabledElements" type="string" multiline="true" required="false">
157 <caption>Enabled elements</caption>
158 <description>A list of elements (written on individual lines) to enable in the UI. You can find values in the UI using the data-element attribute. Takes priority over disabled elements.</description>
159 </property>
160 <property key="disabledElements" type="string" multiline="true" required="false">
161 <caption>Disabled elements</caption>
162 <description>A list of elements (written on individual lines) to disable in the UI. You can find values in the UI using the data-element attribute.</description>
163 </property>
164 <property key="customCss" type="string" required="false">
165 <caption>Custom CSS</caption>
166 <description>Provide a path to your own CSS to customize styling.</description>
167 </property>
168 </propertyGroup>
169 <propertyGroup caption="Accessibility">
170 <property key="accessibleMode" type="boolean" defaultValue="false">
171 <caption>Enable accessibility mode</caption>
172 <description>Enable accessibility features. E.g tab page selection and page text in the DOM.</description>
173 </property>
174 <property key="highContrastMode" type="boolean" defaultValue="false">
175 <caption>Enable high contrast mode</caption>
176 <description>Enable high contrast colors to help with accessibility.</description>
177 </property>
178 </propertyGroup>
179 <propertyGroup caption="Module">
180 <propertyGroup caption="Document Updates">
181 <property key="enableDocumentUpdates" type="boolean" defaultValue="true">
182 <caption>Enable document updates</caption>
183 <description>Adds a button to the header to allow updating the document on the server (annotations, links, widgets). Requires WebViewer module.</description>
184 </property>
185 <property key="enableSaveAsButton" type="boolean" defaultValue="true">
186 <caption>Enable save as</caption>
187 <description>Adds a button to the header to allow saving a document to the server as a new file. Requires WebViewer module.</description>
188 </property>
189 </propertyGroup>
190 <propertyGroup caption="Real-Time Annotating">
191 <property key="enableRealTimeAnnotating" type="boolean" defaultValue="false">
192 <caption>Enable Real-time Annotating</caption>
193 <description>Annotate in real-time with other users without an additional server. This will make polling requests.</description>
194 </property>
195 <property key="onExportXfdfCommand" type="action" required="false">
196 <caption>On export XFDF command</caption>
197 <description>Trigger an action when exporting annotations to XFDF commands. This can occur multiple files.</description>
198 </property>
199 <property key="autoXfdfCommandImportInterval" type="integer" defaultValue="1000">
200 <caption>Auto Import Interval</caption>
201 <description>The interval in milliseconds to get XFDF updates from the server for the current file.</description>
202 </property>
203 </propertyGroup>
204 <propertyGroup caption="Page Extraction">
205 <property key="allowSavingToMendix" type="boolean" defaultValue="false">
206 <caption>Allow saving to Mendix</caption>
207 <description>Allow the extracted pages to be saved back to Mendix as a separate file.</description>
208 </property>
209 </propertyGroup>
210 </propertyGroup>
211 <propertyGroup caption="License">
212 <property key="l" type="string" required="false">
213 <caption>Key</caption>
214 <description>WebViewer license key. Please reach out to sales@apryse.com for more information.</description>
215 </property>
216 </propertyGroup>
217 </properties>
218</widget>
Did you find this helpful?
Trial setup questions?
Ask experts on DiscordNeed other help?
Contact SupportPricing or product questions?
Contact Sales