--- title: "Document Viewer" slug: "document-viewer-form" description: "This document shows how to use and add a Document Viewer component to a Form in Decisions. Adding a Document Viewer will display a document on a form. Supported formats include: .txt, .html, .pdf, .css, .png, and .jpg. " tags: ["External Data", "File Management", "Mapping"] updated: 2024-08-21T13:26:07Z published: 2024-08-21T13:26:07Z --- > ## Documentation Index > Fetch the complete documentation index at: https://documentation.decisions.com/llms.txt > Use this file to discover all available pages before exploring further. # Document Viewer | Feature Details | | --- | | **Introduced in Version** | -- | | **Modified in Version** | 8.10 | | **Note** | Document Viewer is now available for [Simple Forms](https://documentation.decisions.com/v9/docs/about-simple-forms). | ## Overview Document Viewer is a type of [Form Control](https://documentation.decisions.com/v9/docs/form-control-glossary) that displays the documents on the Forms during runtime. The control is commonly used to view and interact with documents as part of their workflow. | Supported File Extensions | Unsupported File Extensions | | --- | --- | | .txt | .docx/.doc | | .HTML | .xlsx/.csv | | .pdf | .pptx | | .css | .exe | | .png | .json | | .jpg | .XML | | | .xps | | | .tiff | | | .ods | Document Viewer can be found under the **ToolBox > Controls > Data**. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-07_16h17_09.png) --- ## Configuration Click on the Document Viewer control to open the [Properties Panel](https://documentation.decisions.com/v9/docs/configure-forms) from the right side of the screen. | **Common Properties** | | --- | | Name | Allows to set the name for the Control | | Input Type | Choose the type of input you wish to pass through Form Control. | | | Document | Allows to enter the Document ID. Users can find the [Document ID](https://documentation.decisions.com/v9/docs/adding-documents-to-the-portal) by right-clicking on the document > Manage > Get Document ID. | | | FileData | Allows passing the FileData. For more information, refer to [File Type Overview](https://documentation.decisions.com/v9/docs/file-type-overview). | | | FileReference | Allows passing the FileReference. For more information, refer to [File References](https://documentation.decisions.com/v9/docs/file-type-overview). | | Static Input | When enabled allows uploading a single static file or passing the Document ID to the control. When disabled, allows entering the Data Name. | | Data Name | Allows to enter a user-specific Data Name. Data Name becomes an input parameter to the respective Form Control when the Form is used within a Flow. Users can map the Flow [input](https://documentation.decisions.com/v9/docs/input-output-types-overview?highlight=Input%20Mapping%20Types) to this parameter to pass the **Input Type** (Document ID/FileData/FileReference) dynamically. | | Specify URL Parameters | When enabled opens a new field to pass the URL parameters. | | | URL parameters | Allows to pass the static URL Parameters, e.g., zoom=50. | | Specify URL Parameters From Data Name | When enabled allows passing URL parameters through Data Name. | | | URL parameters Data Name | Provide a user-specific Nata Name. | | Default Page Number | Allows to open a specific page of the document when the Form loads. | | | Page Number from Data Name | Allows passing Page Number through Data Name. | | **Behavior** | | Initially VIsible Source | This feature allows choosing whether the Form control should be visible or remain hidden when the form loads. | | | Constant Data > Initially VIsible | When enabled, the Form control (Document Viewer in this case) will be visible. If disabled, the control will be hidden. | | | From Flow Data > Initially Visible Data | Allows configuring the **Initially Visible Source** through Data Name. | | **View** > CSS Class | Allows the selection of a [CSS class](https://documentation.decisions.com/v9/docs/using-css-in-forms) to be applied to the control. | | **Size and Tabs** > Edit | Provides options to change the dimensions of the control and tab index. | --- ## **Example** In the following example, a Form will be used in a Flow that will display a PDF Document. 1. Create a [Flow](https://documentation.decisions.com/v9/docs/create-flows)**.**Add a [From](https://documentation.decisions.com/v9/docs/create-forms) step to the Flow. 2. In the Form Designer, add a **Button** for end users to submit the Form. Add the **Document Viewer** control from the Toolbox. 3. Resize the **Document Viewer** control to provide a better view. Change its Input Type****to **FileData** and give a **Data Name**. Set **Default Page Number** to 2. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-07_16h18_59.png) 4. This completes the Form. Save the Form and close the Form Designer. 5. In the Flow Designer, select [**SETUP INPUT DATA**](https://documentation.decisions.com/v9/docs/forms#configure)**.**Configure the input data type as **File Data**. 6. Edit the **Input** and add a PDF file as constant to the Flow. Users can also upload a file while Debugging. 7. Save and exit the Flow Input Data window. ![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-21_09h24_31.png) 8. Click on the Form Step. On the Input of the Form, map the **FileData** value to the Input Defined. 9. Debug the Flow. The Form will open the PDF Document direct to Page number 2 as it was configured in Step Number 3.![](https://cdn.document360.io/6ef8bcc1-6489-4486-9ad1-83acff7e5df0/Images/Documentation/2024-08-21_09h25_37.png)