Show / Hide Elements

Almost every visible part of the UI is an element identified by a data-element string. This guide covers the APIs that open/close, enable/disable, and tab between elements.

All identifiers are centralized in packages/webview/src/constants/dataElements.js. The viewer store tracks them in three maps:

• activeElements{} — whether an element is currently open.
• disabledElements{} — whether an element is unmounted from the DOM ({ disabled, style }).
• activeElementsTab{} — the active sub-tab inside a tabbed element.

UI APIs

Open / close

UI.openElement(dataElement)        // Open one element
UI.closeElement(dataElement)       // Close one element
UI.openElements(dataElements)      // Open several: string[]
UI.closeElements(dataElements)     // Close several: string[]
UI.isElementOpen(dataElement)      // => boolean

Opening an element sets activeElements[dataElement] = true. Opening a panel closes sibling panels on the same side (left/right) so only one panel per side is open at a time. Opening the left panel calls core.toggleSidebar(); opening the search panel also opens the left panel and switches its tab to the search tab.

Enable / disable

/**
 * @method UI.disableElements
 * @param {string[] | string} dataElements One data-element or an array.
 */
UI.disableElements(['printButton', 'downloadButton']);

/**
 * @method UI.enableElements
 * @param {string[] | string} dataElements One data-element or an array.
 */
UI.enableElements(['printButton']);

disableElements unmounts the element from the DOM. Important: this only removes the DOM node — it does not disable the underlying feature. For example, disabling printButton removes the button, but printing may still be triggered programmatically or via keyboard. To actually disable a feature, use the feature-specific API (e.g. the engine's permission APIs).

A single string is accepted and dispatched as one element; an array dispatches as several. Any other type logs an error.

Active tab

UI.setActiveElementTab(dataElement, tab);

Sets the active tab inside an element that has tabs (e.g. leftPanel, rightPanel). If the element is not a tabbed element, a "DataElement not found." warning is logged. Tab identifiers are also defined in dataElements.js (e.g. ThumbnailsButton, OutlinesButton, AnnotationButton, LayersButton, SignatureButton, SearchButton for the left panel; General, Appearance, Preference for the right panel).

Common data-elements

Panels

leftPanel, rightPanel, stylePanel, pageModePanel, stampPanel, linkPanel, contentEditorPanel, colorSeparationPanel, redactionPanel, searchPanel, measurePanel, freetextPanel.

Toolbar / header buttons

openFileButton, searchButton, pageModeButton, downloadButton, flattenButton, printButton, theme, settingButton, fullScreenButton, handToolButton, zoomOverlayButton, cropPageButton.

Property-panel buttons

annotationPropertyPanelButton, formPropertyPanelButton, measurePropertyPanelButton, editorPropertyPanelButton, redactionPropertyPanelButton.

Disable-only elements (chrome)

header, pageNavOverlay, thumbnails, layers, outlines, annotation, signature, search.

Dialogs

signatureDialog, compareSettingDialog, settingsDialog, setPasswordModal, signCreatePanel, downloadSettingDialog, printSettingDialog, and ~25 more.

The exact camelCase/kebab-case strings are defined in constants/dataElements.js; always reference the constant rather than guessing the string.

Examples

Start with the left panel closed and a clean toolbar

UI.closeElement('leftPanel');
UI.disableElements(['printButton', 'downloadButton', 'flattenButton']);

Open the right panel on the Appearance tab

UI.openElement('rightPanel');
UI.setActiveElementTab('rightPanel', 'Appearance');

Toggle a custom modal registered with addCustomModal

Custom modals are controlled with the same element APIs using their dataElement:

UI.addCustomModal({ dataElement: 'myModal', /* … */ });
UI.openElement('myModal');
// later
UI.closeElement('myModal');
// or remove it entirely
UI.disableElements(['myModal']);

Internal behavior notes

• openElement(dataElement, capability?) — the optional second argument is an internal capability flag used by some callers.
• Closing the left panel also calls core.webViewerPageMode('none') and closes the search panel.
• setActiveElementTab maps ThumbnailsButton → core.webViewerPageMode('thumbs') and OutlinesButton → 'outline'.
• Mobile guards: setActiveToolMode blocks separation / measurement on mobile and shows the unsupported-mobile dialog; setToolbarGroup has the same guard.

Related

• Custom Modals — register dialogs controlled via these APIs.
• Panels — the panel system.
• API Reference