Some test text!

menu
Hide/Show DOM elementskeyboard_arrow_down

Hiding/Showing DOM elements in WebViewer UI

Hiding DOM elements is an essential aspect of a customizable UI. WebViewer UI supports hiding/showing elements both initially and dynamically.

linkFinding 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,

Left panel data element

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

linkConstructor 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

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

linkEnabling/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' ]);
});

Note that these are different from opening/closing elements. Instead of changing visibility, these APIs will actually remove/re-render elements in the DOM. To change visibility, you can refer to the sample below.

linkOpening/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' ]);
});

linkList 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

Get the answers you need: Support

close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our upcoming webinar to learn about how to collaborate on videos frame by frame directly in your browser

Save your seat
close