Hiding/Showing DOM elements in WebViewer UI

Hiding DOM elements is an essential aspect of a customizable UI. PDF.js Express Web Viewer UI supports hiding/showing elements both initially and dynamically.

Find data-element attribute values

To hide/show the DOM elements, first you must find the data-element attribute on the elements from a DOM inspector. For example, if we inspect the left panel,

we can find that it has a data-element value of leftPanel. Now we can use that value to hide/show it.

Constructor option

To hide the DOM elements even before the initial render, you can use a constructor option disabledElements to pass a list of data-element values that should be hidden.

Example

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
  disabledElements: [
    'viewControlsButton',
    'viewControlsOverlay'
  ]
}, document.getElementById('viewer'));

Enabling/disabling elements programmatically

To enable/disable the DOM elements, you can use the following APIs:

Example

const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // remove left panel and left panel button from the DOM
  instance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  // re-enable left panel and left panel button from the DOM
  instance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});

const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // remove left panel and left panel button from the DOM
  instance.UI.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  // re-enable left panel and left panel button from the DOM
  instance.UI.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});

Relevant APIs

To hide/show the DOM elements on the fly, you can use the following APIs:

Note that these are different from opening/closing elements. Instead of changing visibility, these APIs will actually remove/re-render elements in the DOM.

Opening/closing elements programmatically

You can toggle panels, overlays, popups, and modals.

Example

const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // opens (shows) text popup and annotation popup in the UI
  instance.openElements([ 'menuOverlay', 'leftPanel' ]);
  // closes (hides) text popup and left panel in the UI
  instance.closeElements([ 'menuOverlay', 'leftPanel' ]);
});

const wvElement = document.getElementById('viewer');
WebViewer({ ...options }, wvElement).then(() => {
  // opens (shows) text popup and annotation popup in the UI
  instance.UI.openElements([ 'menuOverlay', 'leftPanel' ]);
  // closes (hides) text popup and left panel in the UI
  instance.UI.closeElements([ 'menuOverlay', 'leftPanel' ]);
});

• closeElements
• openElements

List of elements

Header

• header
  • leftPanelButton
  • viewControlsButton
  • panToolButton
  • selectToolButton
  • fitButton
  • zoomOutButton
  • zoomInButton
  • freeHandToolGroupButton
    • freeHandToolButton
    • freeHandToolButton2
    • freeHandToolButton3
    • freeHandToolButton4
  • textToolGroupButton
    • highlightToolButton
    • highlightToolButton2
    • highlightToolButton3
    • highlightToolButton4
    • underlineToolButton
    • squigglyToolButton
    • strikeoutToolButton
  • shapeToolGroupButton
    • rectangleToolButton
    • ellipseToolButton
    • lineToolButton
    • arrowToolButton
    • polylineToolButton
    • polygonToolButton
    • cloudToolButton
  • eraserToolButton
  • signatureToolGroupButton
  • freeTextToolButton
  • stickyToolButton
  • miscToolGroupButton
    • calloutToolButton
    • stampToolGroupButton
    • rubberStampToolGroupButton
    • fileAttachmentToolGroupButton
    • cropToolButton
  • toolsButton
  • searchButton
  • menuButton

Panels

• leftPanel
  • notesPanelButton
  • notesPanel
  • thumbnailsPanelButton
  • thumbnailsPanel
    • thumbnailControl
    • documentControl
  • outlinesPanelButton
  • outlinesPanel
  • layersPanelButton
  • layersPanel
  • bookmarksPanelButton
  • bookmarksPanel
• searchPanel

Overlays

• viewControlsOverlay
  • defaultPageTransitionButton
  • continuousPageTransitionButton
  • singleLayoutButton
  • doubleLayoutButton
  • coverLayoutButton
  • rotateCounterClockwiseButton
  • rotateClockwiseButton
• menuOverlay
  • filePickerButton
  • fullScreenButton
  • downloadButton
  • printButton
• pageNavOverlay
• toolsOverlay
• searchOverlay

Popups

• annotationPopup
  • annotationCommentButton
  • annotationStyleEditButton
  • annotationDeleteButton
  • annotationCropButton
  • annotationRedactButton
  • annotationGroupButton
  • annotationUngroupButton
  • calibrateButton
  • linkButton
  • fileAttachmentDownload
• annotationStylePopup
• toolStylePopup
• stylePopup
• textPopup
  • copyTextButton
  • textHighlightToolButton
  • textUnderlineToolButton
  • textSquigglyToolButton
  • textStrikeoutToolButton
• contextMenuPopup
  • panToolButton
  • stickyToolButton
  • highlightToolButton
  • freeHandToolButton
  • freeTextToolButton

Annotation note connector line

• annotationNoteConnectorLine

Modals

• signatureModal
  • signatureModalCloseButton
  • signatureModalClearButton
  • signatureModalSignButton
  • inkSignaturePanelButton
  • textSignaturePanelButton
  • imageSignaturePanelButton
• printModal
• loadingModal
• errorModal
• passwordModal