Explore

Full PDF Document Preview

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:

Must provide full in-line PDF document preview with scrolling.

Must support expanded larger view with one click.

Dynamic preview sizing in tables.

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 this example, 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⁠

In-line Previews

⁠

Expanded In-line View

⁠

Preview PDF Files

Preview PDF Files

Name

PDF File

Canvas

Stream It & Human Trafficking

Stream It TLAHT Initiative.pdf

⁠

Stream It: Deception

Stream It_ Deception.pdf

⁠

Stream It: Vehicle Geo-fencing

Stream It Geo Fencing Brochure 20200309.pdf

⁠

There are no rows in this table

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.