View Mode

View mode disables UI elements that perform editing actions on the document, while preserving navigation, search, and other read-only features. It applies whether your Modular UI is built from a JSON config, APIs, or both.

To enable and disable the view-only mode for Modular UI, use the following APIs:

1// Enabling view-only mode.
2instance.UI.enableViewOnlyMode();
3
4// Disabling view-only mode.
5instance.UI.disableViewOnlyMode();

When view-only mode is enabled, the UI components are filtered through a white list of elements that remain available. Everything else is hidden/disabled automatically.

Default UI with view-only mode enabled

There is a default white list covering allowed panels, tool buttons, preset buttons, and modals in view-only mode. If an allowed panel contains any controls that would edit the document, those controls are automatically hidden or disabled while the panel itself remains visible.

The default white list includes:

• Panels: Signature, Change List, Search, Notes Outlines, Bookmarks, Thumbnails, and Tabs panels.
• Tool buttons: Edit, Pan, Text Select, Content Select (for Docx Editor).
• Preset Buttons: Compare, Download, File Picker, Fullscreen, Print, Save As, Settings, and Toggle Accessibility Mode buttons.
• Modals: Color picker, Custom, Error, Filter, Loading, Open File, Password, Print, Progress, Save, Settings, Signature Validation, and Warning.

There are APIs to handle the view-only white list. The white list is composed of the data-element IDs of the components. This guide shows how to find the data-element of the UI elements.

Add elements to the view-only white list, making them visible/interactive in view-only mode.

1// Keep the View toolbar group available in view-only mode.
2instance.UI.addToViewOnlyWhitelist(['toolbarGroup-View']);

Remove elements from the white list, making them hidden/disabled in view-only mode.

1instance.UI.removeFromViewOnlyWhitelist(['toolbarGroup-View']);

Return elements in the white list that you’ve added (does not include the default white list).

1const customWhiteList = instance.UI.getViewOnlyWhitelist();
2console.log('Custom white list:', customWhiteList);

Update the view-only whitelist, making the elements in the whitelist visible and usable in view-only mode.

1// Replace whatever was added before; now only these will be in the custom white list
2instance.UI.updateViewOnlyWhitelist([
3  'toolbarGroup-View',
4  'rectangleToolButton',
5  'toolbarGroup-Annotate',
6]);

View-only mode affects the UI only, disabling buttons, ribbons, panels, and hot keys that perform editing actions, and it does not change annotation permissions. To block creating, editing, deleting, or replying to annotations, you can check the Annotation Manager enableReadOnlyMode() API. You can check more details about it at Annotation Permissions in JavaScript PDF Viewer.

In view-only mode, keyboard shortcuts continue to work for actions that don’t modify the document, while any shortcut that would edit content is blocked. If you customized key mappings while in edit mode, those mappings are honored in view-only mode. Previously disabled shortcuts remain disabled, and the keyboard shortcuts panel in Settings shows only the view-only subset with editing controls disabled.

Set which shortcuts are allowed to work in view-only mode.

1instance.UI.updateViewOnlyShortcuts([instance.UI.Shortcuts.RECTANGLE]);

Returns the current shortcut whitelist for view-only mode.

1const shortcuts = instance.UI.getViewOnlyShortcuts();
2console.log(shortcuts);