Display form control

PDF viewer

<ut-pdf-viewer>

Shows a PDF inside the form, from an Attachments field or an upload, page by page with zoom, rotation and the text read out to screen readers.

Officialv1.0.0

Try it

Live preview

The real control in the same sandboxed frame the app uses. Switch to dark mode or read-only to see how it adapts.

Service agreement

Shows a two-page sample PDF from a mapped Attachments field.

Value the form receives

null

Sandboxed frame (opaque origin, its own CSP), talking to this page only through the typed postMessage bridge — exactly as on a form.

About

What it does

Put the document people need to read right next to the questions about it: the contract to approve, the quote to check, the policy to acknowledge, the invoice to code. Map an Attachments field in the designer and the viewer shows its first PDF, or allow uploads so people can choose a PDF themselves; the uploaded file becomes the field's value.

Pages render one at a time, sharp on high-density screens, with previous and next page, zoom in and out, fit to width and rotate. The viewer is keyboard friendly (Page Up and Page Down turn pages, + and - zoom, Home and End jump to the first and last page) and each page is announced as "Page 2 of 7, contract.pdf" followed by the page's text, so screen-reader users can read the document too.

PDF.js runs entirely inside the form's sandbox: no worker, no network access and no script evaluation, and the file is read through the form's own file service, which only hands over files that belong to the form. Password-protected, damaged and non-PDF files show a clear message instead of a broken page.

Good for

  • The contract or quote to review on an approval step
  • A policy document to read before acknowledging it
  • An uploaded invoice shown beside the fields that code it

After installing

  1. Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom.
  2. Drag PDF viewer onto a form and map its Document context to an Attachments field of the form (the first PDF in it is shown).
  3. Optionally turn on Allow uploading a PDF so people can choose a PDF themselves; the uploaded file is stored as this field's value.

Reference

Value, properties and accessibility

Value

[{ id, name, size, type }] (Attachments)

Stored as the field's value (type files), validated by the server against the control's schema; the control also reports its own validity while people type.

Read-only views (completed tasks, mobile, emails) show the value as list.

Keyboard and screen readers

Role: region, named by the field label.

Tab to the toolbar buttons (previous / next page, zoom out / in, fit to width, rotate) and to the page. On the page: Page Down / Page Up turn pages (after scrolling to the end of a zoomed page), Home / End go to the first / last page, + / - zoom, 0 fits the width. Each page is an image named "Page 2 of 7, file name", followed by the page's text for screen readers.

Properties (set in the form designer)
PropertyTypeDefaultWhat it does
Allow uploading a PDF allow_uploadbooleannoShows a Choose a PDF button; the uploaded PDF becomes this field's value and is shown instead of the mapped document.

Context (other fields it reads)

  • document — Document: An Attachments field of the form: the first PDF in it is shown.

The designer maps each one to a field of the same form; the control receives those values read-only.

Capabilities and security

Files
Uploads go through the Attachments pipeline (the same checks and storage). Reads are limited to files the form already gives the control: its own value, or an Attachments field the designer maps.

Install

Install it in your workspace

Works on UserTasks cloud and any self-hosted instance. The control lands in Extensibility → Form controls, enabled, and appears in the form designer's Custom palette.

In the app

  1. Open Extensibility → Form controls → Browse gallery (it opens Packages → Browse gallery on the Form controls tab) and choose Install on PDF viewer. Or download form-control-pdf-viewer-1.0.0.utpkg and drag it onto Automations → Packages.
  2. The wizard verifies the checksum, every file hash and the signature, and shows what it adds.
  3. Drag the control onto a form in the designer and set its properties.

With the CLI

shell
curl -fLO https://usertasks.com/gallery/form-control-pdf-viewer-1.0.0.utpkg
usertasks packages inspect form-control-pdf-viewer-1.0.0.utpkg
usertasks packages install form-control-pdf-viewer-1.0.0.utpkg

Verify the download

File SHA-256
b8ffa5fded37dd4a712e70fcd1a56b0266e0634f637eba89eda70ffe9dda1b95
Package checksum (what is signed)
sha256:8a89c1a983796bc0d52e99d68db50eced74c757b367963f1f690b7a6a1b5f05a
<ut-pdf-viewer> module SHA-256
25fc50254b2275adca2f4a3c386c300d808b9e9386dcb9185254f96da1dcf5b6
Signer
UserTasks Gallery · 49:f3:04:90:47:02:4d:07:28:61:3d:dc:bb:aa:db:11

More form controls

All controls