> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/readme/mendix.md).

# How to integrate WebViewer into a Mendix PDF Viewer

Integrate mendix pdf viewer for viewing, annotating, editing, and creating PDFs in Mendix. Process documents natively in Mendix without third-party applications.

This guide will help you **integrate a free trial of WebViewer into Mendix application** on the browser.

{% embed url="<https://www.youtube.com/embed/a9HNVzbmDLM>" %}

<a href="https://github.com/ApryseSDK/webviewer-mendix-sample" class="button primary">Get WebViewer Mendix Widget</a>

## Prerequisites

Prior to starting, you should have already installed [Node](https://nodejs.org/) and [npm](https://www.npmjs.com/).

Get your Apryse trial key.

{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %}

## 1. Download WebViewer Mendix Web Widget

Download [WebViewer Mendix Web Widget](https://github.com/ApryseSDK/webviewer-mendix-sample/) and extract it.

## 2. Create a new or use an existing Mendix App

Open [Mendix Studio Pro](https://docs.mendix.com/howto/general/install/) 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 app's directory and create a new folder called `CustomWidgets/webViewer` and place the extracted contents from [WebViewer Mendix Web Widget](https://github.com/ApryseSDK/webviewer-mendix-sample/).

By default, Mendix projects are stored in:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
C:\Users\$your_username\Documents\Mendix\
```

{% endcode %}
{% endtab %}
{% endtabs %}

In terminal or command line navigate to `CustomWidgets/webViewer` and run:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
npm install
```

{% endcode %}
{% endtab %}
{% endtabs %}

After the command completes, run:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
npm run dev
```

{% endcode %}
{% endtab %}
{% endtabs %}

This will make a build of the Mendix Web Widget with the latest version of WebViewer, and it will be complete when you see something like this in your terminal:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
[08:57:07] Finished 'bound runWebpack' after 4.09 s
[08:57:07] Starting 'createMpkFile'...
[08:57:07] Finished 'createMpkFile' after 32 ms
[08:57:07] Starting 'copyToDeployment'...
Files generated in dist and ..\..\ folder
[08:57:07] Finished 'copyToDeployment' after 18 ms
```

{% endcode %}
{% endtab %}
{% endtabs %}

Next, we must copy the static 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. In Mendix, 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:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```sh
/path/to/your/mendix/app/theme/resources
└───lib
    ├───core
    ├───ui
    └───ui-legacy
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 3. Place WebViewer into a Page

1. Access the `Domain Model` of the module where the viewer will be integrated, and create a new `Entity`.
2. Right-click the newly created `Entity`, click `Add > Attribute`. Leave everything as is, and ensure its `Type` is set to `String`.
3. Next, open the page inside of your module.
4. Add a `Data view` widget by dragging it from the Toolbox. If you do not have a the `Toolbox` window open on the right, the bottom right corner of the window should have the `Toolbox` tab as an option. Double-click the widget, and give it a data source microflow by selecting `Data source > Type > Microflow`.
5. In the microflow field, click the `Select` button and press `New`.
6. Open newly created microflow, delete the `parameter` object (the object that has has `U` and `(Not set)` underneath) and drag `Create object` from the toolbox onto the arrow. Open the object by double-clicking on it and select the entity we created earlier.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-fbdefb69f84b9ae1bdf2573da3fd9395a176a49d%2Ff2458c6bf4b7749703c333e4187654f4981dcab8-689x415.png?alt=media)

1. Right-click the `Create Entity` activity, then click `Set $NewEntity as Return Value`.
2. Go back to the page you placed the `data view`, and drag `Text box` into `data view`. Open the textbox's properties, find the `Data source` panel, and change the `Attribute` (path) to the string attribute you created in Steps 1 and 2.
3. Press F4, or from the top menu bar select `Project > Synchronize Project Directory`.
4. Go back to the page you placed the `data view`, in the `Toolbar`, under `Add-on widgets` you should now see `Web Viewer`. Drag into the `data view`. Right-click on `Web Viewer` widget and select Attribute by selecting Attribute string you have created.
5. You can now run the app by clicking `Run Locally` at the top.

## 4. Connect Attribute to WebViewer

The WebViewer now loads inside of your page with the default file. Now let's connect the Attribute parameter to be accessible by the WebViewer. Attribute parameter can be used to pass a URL to open specific document.

1. Navigate to the WebViewer location inside of `App/CustomWidgets/webViewer` and open it in your favourite code editor.
2. 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 in `props.value`:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
useEffect(() => {
    if (instance && props.value !== "") {
        instance.loadDocument(props.value);
    }
}, [props.value]);
```

{% endcode %}
{% endtab %}
{% endtabs %}

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](/web/get-started/faq/cors-support.md) 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](/web/open-save-document/open/url.md) or [how to disable certain features](/web/ui-customization/hiding-elements.md).

## Next step

<a href="/web/what-is-webviewer/usage.md" class="button primary">Usage</a><a href="/web/get-started/guides.md" class="button primary">Guides</a><a href="/web/get-started/samples.md" class="button primary">Samples</a><a href="https://sdk.apryse.com/api/web/index.html" class="button primary">API docs</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/readme/mendix.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.