Apryse WebViewer
Overview
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.
Our powerful WebViewer Widget brings real-time collaboration, digital signature workflows, measuring tools, form filling, redaction, and many other document capabilities to your app, in PDFs, MS Office files, CAD, images, and many more formats.
WebViewer is ready to use right out of the box. If you want, add custom annotations and custom workflows. For example, save documents to Mendix and update documents stored in Mendix.
WebViewer Module:
https://marketplace.mendix.com/link/component/202600
Try the live web demo:
https://showcase.apryse.com/
Documentation
WebViewer is a powerful JavaScript-based PDF Library that's part of the Apryse PDF SDK. It provides a slick out-of-the-box responsive UI that interacts with the core library to view, annotate and manipulate PDFs that can be embedded into any web project.
This repo is specifically designed for any users interested in customizing and integrating WebViewer into Mendix low-code app. You can watch a video here to help you get started.
Before you begin, make sure you have installed Node.js in your development environment.
Open Mendix Studio Pro and create a new project by selecting File > New Project from the top menu bar, and choose the Blank app.
After creating a new app or inside of the existing app, navigate to the root directory and create a new folder called CustomWidgets/WebViewer and place the extracted contents from this sample inside.
By default, Mendix projects are stored in:
C:\Users\$your_username\Documents\Mendix\
In the terminal or command line, navigate to CustomWidgets/WebViewer and run:
npm install
After the command completes, run:
npm run dev
This will contiuously make a build of the Mendix Web Widget with WebViewer as the code changes and copy it into the app widget folder. It will be complete when you see something like this in your terminal:
bundles C:\Users\$your_username\Documents\Mendix\MyApp\CustomWidget\WebViewer\src\WebViewer.tsx → dist/tmp/widgets/pdftron/webviewer/WebViewer.js...
LiveReload enabled
created dist/tmp/widgets/pdftron/webviewer/WebViewer.js in 37.1s
bundles C:\Users\$your_username\Documents\Mendix\MyApp\CustomWidget\WebViewer\src\WebViewer.tsx → dist/tmp/widgets/pdftron/webviewer/WebViewer.mjs...
LiveReload enabled on port 35730
created dist/tmp/widgets/pdftron/webviewer/WebViewer.mjs in 2s
bundles C:\Users\$your_username\Documents\Mendix\MyApp\CustomWidget\WebViewer\src\WebViewer.editorPreview.tsx → dist/tmp/widgets/WebViewer.editorPreview.js...
created dist/tmp/widgets/WebViewer.editorPreview.js in 1.3s
[2022-07-05 13:23:22] waiting for changes...
Next, we must copy the static lib assets required for WebViewer to run. The files are located in CustomWidgets/WebViewer/node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible.
We can place it into theme/resources. Create a new folder called lib and place the contents from node_modules/@pdftron/webviewer/public there.
theme/resources should have a directory structure like so:
/path/to/your/mendix/app/theme/resources
└───lib
├───core
└───ui
Beginning with Mendix 9, the theme/resources path is no longer valid. As such, please move the resources to respective folders for web and mobile. For example, for web it will look like this:
/path/to/your/mendix/app/theme/web/resources
└───lib
├───core
└───ui
In your Mendix toolbox, you should see the WebViewer widget near the very bottom.
-
Click and drag the widget on to your page. You can bind to an entity if you wish. More details in the next section.
-
Run your Mendix app and you should see WebViewer loaded on the page that you added it on. By default, it will have loaded a default document.
-
Right click the widget and access the properties. You can change the loaded document using the URL property. This is useful for single document viewing purposes.
We can bind WebViewer to an attribute to dynamically change documents. In the following example, we will add widgets to allow users to provide a document URL which make WebViewer load the new document.
-
Access the
Domain Modelof the module where the viewer will be integrated, and create a newEntity. This entity will contain the file URL that we will load from. You can name it whatever you want. -
Right-click the newly created
Entity, clickAdd > Attribute. You can name it whatever you want but ensure itsTypeis set toString. -
Next, open the page inside of your module.
-
Add a
Data Viewwidget to the page by dragging it from the Toolbox. -
Double-click the widget, and give it a data source microflow by selecting
Data source > Type > Microflow. This will create the entity when we change the URL. -
In the microflow field, click the
Selectbutton and pressNewto create a new microflow. You can name it whatever you want. -
Open the created microflow and drag
Create objectfrom the toolbox onto the microflow flow line. If there is a parameter object (the object that hasUand(Not set)underneath), delete it. -
Open
Create objectby double-clicking on it and select the entity we created earlier. -
Right-click the
Create Entityactivity, then clickSet $NewEntity as Return Value. -
Go back to the page where you placed the
Data View, and drag aText boxintoData Viewfor the user to enter a URL. -
Open the textbox's properties and find the
Data Sourcepanel. -
Change the
Attributeto the string attribute you created in Steps 1 and 2. This will set the attribute when it is changed in the text box. -
Press F4 or from the top menu bar select
Project > Synchronize Project Directoryto synchronize with the local file changes. -
Return to the page you placed the
Data View. In the Toolbox, underAdd-ons, you should now seeWebViewer. -
Drag the
WebViewerwidget into theData View. -
Right-click on the
WebViewerwidget and set theAttributeproperty to the attribute created on your entity. -
You can now run the app by clicking
Run Locallyat the top.
WebViewer can now load the URL that is passed through the text box! When the URL and Attribute are used, Attribute takes priority. How does it work on the WebViewer side?
-
Navigate to the WebViewer location inside of
App/CustomWidgets/webViewerand open it in your favourite code editor. -
Open WebViewer component available in
src/components/PDFViewer.tsx. Inside of it, you can see WebViewer constructor where you can pass various customization options and call APIs on the instance object. The Attribute that you have created in previous steps is passed inprops.file:
In the code snippet, we are listening for any of the changes in props and then calling loadDocument API to load a new document. You can connect it with your existing flows or pass URLs from your file storage. Make sure you have the CORS configured in case you run into any errors.
You can now customize the widget by checking out other guides we have available. Perform your customizations inside of src/components/PDFViewer.tsx. Do not forget to run npm run dev within the Widget's console or terminal and update the files in your App by pressing F4, or from the top menu bar selecting Project > Synchronize Project Directory.
You can now checkout other guides like how to open your own documents or how to disable certain features.
See API documentation.
https://apryse.com/form/trial-support
See license.