ComPDF
Contact Sales
DemoSampleAPI ReferenceFAQ
、

PDF Generation Template Editor

Open-source visual PDF generation engine with customizable templates and developer-friendly APIs.

View on GitHub

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 ​

javascript
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 ​

javascript
/**
 * @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 ​

javascript
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 ​

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

Open the right panel on the Appearance tab ​

javascript
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:

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