Document Viewer

Note: If you only want to render images, we recommend using the Image control.

Use the Document Viewer control to render a document and display it inline in your app. For example, to display an invoice document or a receipt which may be located in various sources, such as storage buckets, entities, or public links.

Note:

If you are working with a storage bucket in your app, the Source property of a Document Viewer control must be an AppsFile variable:

1. Add a Download from storage bucket rule to your app.

2. Bind an AppsFile variable to the Download from storage bucket rule.
3. Bind the same AppsFile variable to the Source property of the Document Viewer.

Important:

If you are using Google Chrome, depending on your settings, the browser may download the document instead of opening it. This can cause the document to not display correctly in the app.

If you are experiencing this issue, follow these steps:

1. Paste the following in your Google Chrome address bar: chrome://settings/content

2. Scroll down to the end of the page and select Additional content settings. A dropdown selection opens.

3. Select PDF documents.

4. Select the Open PDFs in Chrome option.

General

• Source - The source of the document you want to display. The supported file types are PDF documents and images (JPEG, PNG, BMP, GIF, and WEBP).
• Hidden- If true, hides the control at runtime.
• Disabled - If true, disables the control at runtime.

Events

No events.

Style

• Control Alignment - By default, inherits the parent alignment. A different alignment other than the parent can be set. To default back to the parent alignment, deselect the overridden options.

  Note: The alignment is dependent on the layout selected for the parent (Vertical vs Horizontal).

• Border - The border for the control. Border Thickness, Color, and Radius can be configured.

• Margin- The margin of the control. By default, a margin of 4px is set. Top/Bottom and Left/Right margin properties are combined. These properties can be detached using the Link button at the right side of the Margin section.

• Size - The width and height of the control. By default, the size is set to auto, which means 320x410px. To set minimum or maximum values, click the three dot icon (...).