PDF Viewer
Displays a PDF from the asset library or the uploads folder — manuals, SOPs, drawings — with page navigation, zoom and download. Rendered in a worker, with no external downloads.
Reach for it when you need:
- The SOP for the equipment on this screen
- Drawings reachable from the plant mimic
Component name: PdfViewer · Category: Display
In the palette: Displays a PDF document from the asset Library or the Uploads folder (manuals, SOPs, drawings) with page navigation, zoom and download. Rendered by PDFium-WASM in a worker — no external downloads.
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
file | asset | "" | The PDF (.pdf), from the asset Library or the Uploads folder. Bindable — bind a tag/expression yielding a path (e.g. Docs/Manuals/pump.pdf) or an upload:// ref (e.g. a File Manager widget's {{ <name>.selectedItem.ref }}) to swap the document at runtime. Only same-origin documents are allowed (a cross-origin URL is rejected). |
page | number | 1 | 1-based page to show. Bindable — drive it from a tag to jump the operator to a page (clamped to the document's range). An operator's own scroll is not overridden until this value changes again. |
fitMode | enum | width | How each page is fit to the widget: fit width, fit whole page, or actual size (100%). Options: width · page · actual. |
scroll | enum | vertical | Page scroll direction. Options: vertical · horizontal. |
showToolbar | boolean | true | Show the toolbar (page navigation, zoom, download). Turn off for a clean embedded page. |
interactive | boolean | true | Allow scroll/zoom gestures in LiveView. The editor always locks gestures until you double-click the widget to enter it. |
output | object | {"currentPage":1,"pageCount":0,"loadError":""} | Read-only runtime outputs the widget publishes — bind a leaf, e.g. {{ <PdfViewer>.output.currentPage }}. |
↳ output.currentPage | number | 1 | The page the operator is currently viewing. |
↳ output.pageCount | number | 0 | The document's total page count (0 until it loads). |
↳ output.loadError | string | "" | A human-readable load error, or empty when the document loaded fine. |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Works fully offline, which matters on an isolated plant network.
A toolbar that fits narrow spaces Changed in 1.0.8
When the widget is narrow — in a small grid cell, a sidebar or on a phone — its toolbar shrinks to fit rather than spilling over. It goes by the widget's own width, not the screen's, so a small widget on a large monitor shrinks too. The toolbar used to clip below about 420 px — taking Download with it — on a widget that can be 160 px wide. Now, first the file name hides and fit and download move into a More menu; at the narrowest only page navigation stays on the bar. Nothing is taken away: every control is still there, and a shortened control keeps its full name for screen readers.
The viewer's chrome follows the app theme and the project's colours, like the WYSIWYG toolbar, instead of a fixed slate-and-blue palette of its own. Changed in 1.0.8