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 }}.
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.

Right-click behaves differently in the Designer

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.