File viewer
The File viewer component allows users to preview and interact with different file types (documents and images).
Example
You can use the File viewer component to allow the end-user app to preview and download their payslips.
Note: The File viewer component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following File viewer component properties are available:
Main properties
The following table describes the main properties of the component.
| Property | Description | Required |
|---|---|---|
| Component ID | Enter a unique name for the component. See Templating in components for more details. | Yes |
| Files | Enter the resource to return the files for the component. You can choose an array from the Templating drop-down displayed when selecting the Plus (+) button (only arrays will be available) or type it in using Liquid. For example <a id="res1"></a> Note: You must edit the Resource in the Resources tab. |
Yes |
| Name | The name to be displayed in the toolbar. Import a value using Liquid from the previously imported array in Files. For example, <a id="name"></a>. |
No |
| Content | This is the actual file (in base64 or a URL) to be displayed. Import a value using Liquid from the previously imported array in Files. For example, <a id="content"></a>. |
No |
| Content type | This is the mime type of the file, for example: application/pdf or image/png. Import a value using Liquid from the previously imported array in Files. For example, <a id="contentType"></a>. |
No |
| Alt | Enter a descriptive text in case the image/s cannot be displayed. If left empty, the Name property will be used. Alt property only works for images. | No |
| Responsive | Select to maintain the original image ratio. It overrides the Height property. | No |
| Height | Enter the height in pixels. The default value is set to 520. | Yes |
Note: See Templating drop-down for more details on rendering dynamic content using Liquid.
Interactions properties
The following table describes the interactions properties of the component.
| Property | Description | Required |
|---|---|---|
| Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
| Add rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Note: See Add rules to trigger properties for more information on setting rules for these properties.