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.
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
- Install the package: the control appears in Extensibility → Form controls and in the form designer's palette under Custom.
- 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).
- 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.
| Property | Type | Default | What it does |
|---|---|---|---|
Allow uploading a PDF allow_upload | boolean | no | Shows 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
- 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.
- The wizard verifies the checksum, every file hash and the signature, and shows what it adds.
- Drag the control onto a form in the designer and set its properties.
With the CLI
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.utpkgVerify 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- Input
Form control
Address
<ut-address> <ut-map>
Address search with suggestions from Google Places (key kept on the server) or a data table, saved as street, city, postcode, country and coordinates.
LookupsNetwork Google Maps Platformvalue json · v1.0.0Try it - Display
Form control
Chart
<ut-chart>
Bar, line, area, pie or doughnut chart of static data, another field's rows, lookup results or a saved report, with keyboard-navigable points.
LookupsSaved reportsvalue json · v1.0.0Try it - Display
Form control
Info card
<ut-info-card>
Info, success, warning, error or neutral callout that can show up to six other form values, formatted for the reader, as text or a key / value list.
Self-containedvalue string · v1.0.0Try it