# Document viewer

Document viewer can be used to present documents to the users. Document viewer supports showing documents in PDF format and most commonly used image formats.

If a format is not supported, the user will have to possibility to download the document instead.

## General

General data is required for all portlets.

[General configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#general)

## Listeners

The portlet can listen to the following events:

* On Row Selection
* On Point Selection

<div align="left"><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M8tbrSaGIRYe9EthohB%2F-M8tdKUq3o-yseWI9ODM%2Fimage.png?alt=media&#x26;token=86d2d1f8-ad64-43be-9ff2-c11d964ae93b" alt=""></div>

[Listeners configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#listeners)

## Data

### Data source

The portlet data source configuration enables the portlet to execute specified queries towards the chosen database connector to fetch data, or fetch data from a workflow.

* Database: uses a flow connector to retrieve data from a database
* Workflow: runs a workflow to retrieve data

[Data source configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#database-source)

[Workflow source configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#workflow-source)

### Binary workflow

When fetching large PDF files, using a binary workflow for data retrieval is more efficient. This binary workflow complements the data source configuration. The document identifier (filename) is obtained through the data source query/workflow, but the data is fetched using the binary workflow.

When Binary workflow data (PDF) is configured with a workflow, this workflow will be used to fetch PDF data. To not fetch the PDF data twice the data source query/workflow should be written to leave the PDF data empty.

Note that if the data source query/workflow output contains both images and PDFs, only the data for PDFs should be left empty.

#### Example set-up

1. Create a binary workflow in the Studio; Machine Workflow with output set to Binary output (Stream)

   <div align="left"><figure><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtPTgZOYmpJka4jqs1v-3406065915%2Fuploads%2FpJ0Ag2rDONS66GxAzqim%2Fimage.png?alt=media&#x26;token=355aade9-567d-4c98-9bcf-2b072be11130" alt=""><figcaption></figcaption></figure></div>
2. Configure the binary workflow.

   <figure><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtPTgZOYmpJka4jqs1v-3406065915%2Fuploads%2FOiKH5f6us1oo6uPjzUfa%2Fimage.png?alt=media&#x26;token=f083fd61-b3da-4646-bfab-25345d87b13d" alt=""><figcaption></figcaption></figure>
3. In the Document viewer portlet configure the data source. Make sure that the data source fetches the filename but not the data for PDF files.
4. Map the binary workflow in Binary Workflow Data (PDF)&#x20;

   <div align="left"><figure><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LtPTgZOYmpJka4jqs1v-3406065915%2Fuploads%2FIyAYjTkReBmC0KR626am%2Fimage.png?alt=media&#x26;token=75a1382c-f601-4128-aa2c-7fce80f70b08" alt=""><figcaption></figcaption></figure></div>

### Set up example with mixed output

Use the Binary Document Viewer to display images and enable downloads for unsupported file types, while still allowing PDFs to be handled via the Binary Workflow.&#x20;

Setup Instructions:

1. Query/Machine Step Configuration\
   In your Query or Machine step, include the `Data` column only if the file is not a PDF. For example:

   ```sql
   SELECT
     DocumentMgmtId,
     DocumentMgmtType,
     FileName,
     IIF(DocumentMgmtType <> 'pdf', Data, NULL) AS Data
   FROM DocumentMgmt
   WHERE FileName = {filename}
   ```

   > ❗ It's important to return `NULL` for the `Data` column when the document type is PDF.
2. Binary Workflow Configuration\
   Set up a Binary Workflow that returns:
   * `FileName`
   * `FileType`
   * `Data`

Behavior:

* If `Data` is returned in the data source, the viewer will render images directly or display a Download button for unsupported file types.
* If `Data` is `NULL` (e.g., for PDFs), the Binary Workflow will be triggered to load and display the PDF.

### Presentation

Data: optional for binary workflow

Filename: name of the file

<div align="left"><img src="https://529897662-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0rReCWp3ZqoBtrZI2H%2F-M0rRoA2taa15E9fxCiE%2Fimage.png?alt=media&#x26;token=d322c78b-6edb-4229-847b-3ce5529853c8" alt=""></div>

## Style

Change the header text color and add a header stripe by configuring style.

[Style configuration](https://help.novacuraflow.com/development/flow-portal-2/common-configuration#style)