PDF Previews and Reading

A lot of explorations concerning PDF previewing and reading have been provided in the community. Here’s a little snippet showing how I approach this challenge and a document that shows it in action.

User Expectations

When we think of including PDF documents in a Coda app, the typical reaction is — … this user experience is not helpful.

What would be better?

Well, this is the requirements bar we set at Stream It:

  1. Must provide full in-line PDF document preview with scrolling.
  2. Must support expanded larger view with one click.
  3. Dynamic preview sizing in tables.
  4. Drag-and-drop additions; no custom or document-dependent formula edits.

The number-one requirement from users I’ve spoken with is the ability to scroll (or swipe) in the preview thumbnail because that’s how users find specific passages. Lacking the ability to perform a full text search, this is obviously the next best thing.

Coda checks all of these boxes if you know how to extract the URL of a Coda-bound file and embed it in a Canvas field. This document exposes these details.

Extracting the Coda URL for PDF Files

This is achieved with a formula in the hidden field PDF URL. It’s a little tricky but highly useful.

ParseJson(_Merge(thisRow.[PDF File]) + "", "#/publicUrl")

Embedding in a Canvas

With the URL for each file, it’s now possible to embed the document into a canvas field.

Embed(thisRow.[PDF URL])

In the example document, I’ve embedded the formula in each canvas item for demonstration purposes, but at Stream It, we tend to use canvas templates in cases like this. There’s a good discussion of templating canvasses here and here

9 Likes

That’s pretty neat work-around :slight_smile: Thanks for sharing it

This is amazing - thank you so much for sharing! SO useful!

2 Likes

thanks @Bill_French for sharing this

it is EXTREMELY useful
but not self evident

max

2 Likes

How did you hide the other columns from the canvas view?

Simple. Edit the layout of the Canvas field and remove all fields but Canvas itself.

1 Like

Thank you! I appreciate it :slight_smile: