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

Show More

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

Show More

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

Step 2: Set up the XY column

Show More

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

Show More

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

Show More

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

Show More

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!

[Minhku]

Thank you for the awesome tips! For a single page pdf, this trick is indeed brilliant.

[ThisIsIdrees]

Impressive

Thanks man

[DEVIMPLOY_Autom]

Good tip, I noticed that when doing this action with a virtual column, it crashes the application. Is this supposed to be done only with a physical column?

[Steve]

Either real or virtual should work fine. That the app crashes suggests something else entirely. What, specifically, happens in this crash? In what environments does it crash? The app editor? In a browser? The mobile app? Android? iOS?

[DEVIMPLOY_Autom]

The crash happened on the Smartphone. I accessed the app, then even clicking on other Views, it did not respond, I happened to close the app and return to the Main Screen of the cell phone. In the browser it worked fine.

[Steve]

That’s definitely odd. Does your app use the new mobile framework? It has some substantial bugs that could play into this. Beyond that, you might try clearing the app’s cache and even reinstalling it to see if either has an effect.

[jaichith]

Good . Same way try to bring something new for printing too. With large contents like rows and columns in faster manner.

[재덕_설]

Thank you!!
Your work on the preview screen made a big difference.

[Syamsudin]

Thanks for sharing