Preview a PDF within AppSheet

Aurelien

Hi dear AppSheet Community !

The aim of this post is to describe, step by step, how to display a PDF preview. The result is an interactive dashboard with a list of files on one side, and a preview of each file on the other.

The trick: the XY type

The XY type is used to display coordinates based on an image. It is a pair of coordinates between 0 and 100.
It can be used, for example, to indicate the location of several machines on a factory layout.

Here's how it works: you enter the relative coordinates on the image, and indicate which image it is.

The XY type is used to display coordinates based on an image. It is a pair of coordinates between 0 and 100.It can be used, for example, to indicate the location of several machines on a factory layout. Here's how it works: you enter the relative coordinates on the image, and indicate which image it is.

In practice: exploiting XY type with a PDF

Initial assumption: we have a FILE table, with a [file] column containing a PDF file.

Step 1: Add an XY column

We add a column [xy], real or virtual, to this FILE table.

Step 2: Set up the XY column

Click on the black pencil attached to this column to access its options and parameters.
Look for the “Type Details” section, and enter a simple expression in the “Background image for the XY coordinates” field.

Click on the black pencil attached to this column to access its options and parameters.Look for the “Type Details” section, and enter a simple expression in the “Background image for the XY coordinates” field.

Step 3: Create a map view using the xy column

We can now create a view based on this column. This will be a Map view, for which we specify that the coordinates are the [xy] column.
As this column is empty, no marker will be displayed. However, the PDF image will be used for the background map.

We can now create a view based on this column. This will be a Map view, for which we specify that the coordinates are the [xy] column.As this column is empty, no marker will be displayed. However, the PDF image will be used for the background map.

Step 4: Create an interactive dashboard

Here is the trick: we create a dashboard with, on one side, a list of files, for example of the Table type, and on the other, the Map view we've just created.
Be sure to check the “Interactive” option on this view.

You can also customize the permissions and display a little to obtain a user-friendly rendering.

Here is the trick: we create a dashboard with, on one side, a list of files, for example of the Table type, and on the other, the Map view we've just created. Be sure to check the “Interactive” option on this view. You can also customize the permissions and display a little to obtain a user-friendly rendering.

Limitations of this method

1) Partial cropping of preview

The PDF background is cropped in the preview, but is still displayed if the user wishes to zoom in on a cropped part.

As mentioned above, this preview only shows the first page. To see more, open the document in a new tab using AppSheet's native "Open File" action button.

2) Display delay

When PDF previews are first displayed, there may be a delay of 2 to 5 seconds. However, once displayed, the image is stored in the browser's cache and re-displayed immediately.

1) Partial cropping of preview The PDF background is cropped in the preview, but is still displayed if the user wishes to zoom in on a cropped part. As mentioned above, this preview only shows the first page. To see more, open the document in a new tab using AppSheet's native "Open File" action button. 2) Display delay When PDF previews are first displayed, there may be a delay of 2 to 5 seconds. However, once displayed, the image is stored in the browser's cache and re-displayed immediately.

Suvrutt_Gurjar

Thank you @Aurelien very much for sharing a useful tip. I think such a PDF preview will be very useful in previewing documents such as certificates of various types, single page letters , packing slips , invoice etc.

Aurelien

Thanks @Suvrutt_Gurjar yes indeed! That's a common request from my clients, hence this idea! 🙂

diogolupcosta

wow! awesome tip! thanks a lot

Gustavo_Eduardo

Thank you so much, dear @Aurelien ! It's so great to see things like this in the AppSheet community!