Customizing elements

In this document
chevron_rightShow/hide elements
chevron_rightOpen/close elements
chevron_rightList of elements

WebViewer UI (beta) allows you to customize the UI on the fly programmatically.

Show/hide elements

These functions add or remove UI elements from the DOM.

viewerInstance.showElement('dataElement');
viewerInstance.hideElement('dataElement');
viewerInstance.showAllElements();

dataElement can be found by inspecting the DOM. For example,

$(viewerElement).on('ready', () => {
  viewerInstance.hideElement('notesButton');
});

will remove the notes button from the top tool bar. You can also refer to this full list of elements you can show/hide. showAllElements can be used to reset your customization.

Open/close elements

These functions open or close UI elements.

viewerInstance.openElement('dataElement');
viewerInstance.closeElement('dataElement');

Open and close is for any elements except buttons. For example,

$(viewerElement).on('documentLoaded', () => {
  viewerInstance.openElement('notesPanel');
});

will open notes panel. You can open or close any elements in full list of elements except for buttons. Calling this on buttons will have no effect.

List of elements

Buttons

  • annotationToolsButton
  • panToolButton
  • viewControlsButton
  • notesButton
  • thumbnailsButton
  • outlineButton
  • searchButton
  • menuButton
  • stickyToolButton
  • freeHandToolButton
  • textHighlightToolButton
  • textUnderlineToolButton
  • textSquigglyToolButton
  • textStrikeoutToolButton
  • freeTextToolButton
  • calloutToolButton
  • signatureToolButton
  • lineToolButton
  • arrowToolButton
  • polylineToolButton
  • stampToolButton
  • rectangleToolButton
  • ellipseToolButton
  • polygonToolButton
  • polygonCloudToolButton
  • filePickerButton
  • fullScreenButton
  • downloadButton
  • printButton
  • pageTransitionButtons
  • defaultPageTransitionButton
  • continuousPageTransitionButton
  • layoutButtons
  • singleLayoutButton
  • doubleLayoutButton
  • coverLayoutButton
  • rotateButtons
  • rotateCounterClockwiseButton
  • rotateClockwiseButton
  • fitButtons
  • fitToWidthButton
  • fitToPageButton
  • zoomButtons
  • zoomInButton
  • zoomOutButton
  • annotationCommentButton
  • annotationFillEditButton
  • annotationStrokeEditButton
  • annotationFontEditButton
  • annotationDeleteButton
  • copyTextButton

Panels

  • annotationToolsPanel
  • notesPanel
  • thumbnailsPanel
  • outlinePanel
  • searchPanel

Overlays

  • viewControlsOverlay
  • menuOverlay
  • pageNavOverlay
  • zoomControlsOverlay

Popups

  • annotationPopup
  • textPopup
  • contextMenuPopup

Modals

  • signatureModal
  • printModal
  • loadingModal

Others

  • toolBar