Using the PDF Viewer with the File Explorer Component

File Explorer and PDF Viewer

Watch the video

The File Explorer component displays a file system tree structure that allows users to navigate around various folders. It can be rooted to any folder including shared network folders, and can filter file types by their file extension like 'pdf.' The File Explorer is typically used in conjunction with the PDF Viewer component in order to create a PDF viewing window. This is very useful for viewing documents from within a project.

Let's set up the File Explorer and the PDF Viewer to create a window to view a PDF documents.

1. In the Designer, drag a File Explorer component and PDF Viewer component on to a window and place them side by side.

2. Select the PDF Viewer component and click the binding icon next to the File Path property.

3. Select the Property binding type, and drill down to the File Explorer Selected Path property. Click OK.

   

4. Next, select the File Explorer component. In the Vision Property Editor, set the Selected Path property to a folder path. You can type in a path or bind the root directory by clicking on the binding icon for the Selected Path as shown in the image below. The Root Directory restricts which directories are accessible on the component. This is typically used to restrict access to a particular folder so that the user doesn't have access to the entire file system. All folders nested within the Root Directory can be accessed on the component.

   note

   If you set the File Explorer's Root Directory to a network folder, all clients will be able to access documents within all folders in that network folder.

   

5. To filter for only PDF file types, enter 'pdf' (without quotes) in the File Extension Filter property, otherwise, all file types will be displayed inside the Root Directory.

   

6. In Preview Mode, click on one of the reports in your Root Directory. The PDF Viewer works by passing the file path of the file you selected to the PDF Viewer. You'll also notice several PDF Viewer properties that drive the appearance of the PDF Viewer: Page Fit Mode, Hide or Show Toolbar, Utility Bar, Highlight, Select, Save, and Print.

   note

   Clicking on the Save icon in the runtime saves a copy of the report to the client computer, not the Ignition Gateway.