PDFTron WebViewer

Namespace: UI

UI

WebViewer Instance UI namespace. Contains functions and properties related to UI related parts of WebViewer

Example

webViewerInstance.UI.someProperty
webViewerInstance.UI.someAPI()

Classes

Header
MentionsManager
MultiPageManipulationControls

Namespaces

Fonts
Hotkeys
NotesPanel
OutlinesPanel
TabManager
ThumbnailsPanel
VerificationOptions

Members

<static> AnnotationKeys

A constant containing keys that identify annotations.
Properties:
Name Type Description
SIGNATURE string The key represents the signature annotation
FREE_HAND string The key represents the free hand annotation
FREE_HAND_HIGHLIGHT string The key represents the free hand highlight annotation
FREE_TEXT string The key represents the free text annotation
DATE_FREE_TEXT string The key represents the date free text annotation
DISTANCE_MEASUREMENT string The key represents the distance measurement annotation
PERIMETER_MEASUREMENT string The key represents the perimeter measurement annotation
ARC_MEASUREMENT string The key represents the arc measurement annotation
RECTANGULAR_AREA_MEASUREMENT string The key represents the rectangualr area measurement annotation
CLOUDY_RECTANGULAR_AREA_MEASUREMENT string The key represents the cloudy rectangular area measurement annotation
AREA_MEASUREMENT string The key represents the area measurement annotation
ELLIPSE_MEASUREMENT string The key represents the ellipse measurement annotation
COUNT_MEASUREMENT string The key represents the count measurement annotation
CALLOUT string The key represents the callout annotation
LINE string The key represents the line annotation
ARROW string The key represents the arrow annotation
POLYGON string The key represents the polygon annotation
CLOUD string The key represents the cloud annotation
HIGHLIGHT string The key represents the highlight annotation
UNDERLINE string The key represents the underline annotation
SQUIGGLY string The key represents the squiggly annotation
STRIKEOUT string The key represents the strikeout annotation
REDACTION string The key represents the redaction annotation
RECTANGLE string The key represents the rectangle annotation
ELLIPSE string The key represents the ellipse annotation
ARC string The key represents the arc annotation
POLYLINE string The key represents the polyline annotation
STICKYNOTE string The key represents the sticky note annotation
IMAGE string The key represents the image annotation
STAMP string The key represents the stamp annotaiton
EDIT string The key represents the edit annotation
PAN string The key represents the pan annotation
CONTENT_EDIT_TOOL string The key represents the content edit tool annotation
ADD_PARAGRAPH_TOOL string The key represents the add paragraph tool annotation
TEXT_SELECT string The key represents the text select annotation
MARQUEE_ZOOM_TOOL string The key represents the marquee zoom tool annotation
ERASER string The key represents the eraser annotation
CROP_PAGE string The key represents the crop page annotation
FILE_ATTACHMENT string The key represents the file attachment annotation
SOUND string The key represents the sound annotation
THREE_D_ANNOTATION string The key represents the 3D annotation
TEXT_FIELD string The key represents the text field annotation
SIGNATURE_FORM_FIELD string The key represents the signature form field annotation
CHECK_BOX_FORM_FIELD string The key represents the check box form field annotaiton
RADIO_BUTTON_FORM_FIELD string The key represents the radio button form field annotation
LIST_BOX_FORM_FIELD string The key represents list box form field annotation
COMBO_BOX_FORM_FIELD string The key represents the combo box form field annotation

<static> annotationPopup

An instance of Popup that can be used to edit items in the annotation popup component
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.annotationPopup.someAPI();
  });

<static> AnnotationStylePopupTabs

The different available style tabs in the annotation popup.
Properties:
Name Type Description
TEXT_COLOR string Indicates the text style tab in the annotation popup window
STROKE_COLOR string Indicates the stroke color tab in the annotation popup window
FILL_COLOR string Indicates the fill color tab in the annotation popup window

<static> contextMenuPopup

An instance of Popup that can be used to edit items in the context menu popup component
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.contextMenuPopup.someAPI();
  });

<static> Events

Contains string enums for WebViewer UI events.
Properties:
Name Type Description
ANNOTATION_FILTER_CHANGED string UI.Events.annotationFilterChanged
DOCUMENT_LOADED string UI.Events.documentLoaded
DOCUMENT_MERGED string UI.Events.documentMerged
FILE_DOWNLOADED string UI.Events.fileDownloaded
FINISHED_SAVING_PDF string UI.Events.finishedSavingPDF
LOAD_ERROR string UI.Events.loaderror
DRAG_OUTLINE string UI.Events.dragOutline
DROP_OUTLINE string UI.Events.dragOutline
PANEL_RESIZED string UI.Events.panelResized
THEME_CHANGED string UI.Events.themeChanged
TOOLBAR_GROUP_CHANGED string UI.Events.toolbarGroupChanged
SELECTED_THUMBNAIL_CHANGED string UI.Events.selectedThumbnailChanged
THUMBNAIL_DRAGGED string UI.Events.thumbnailDragged
THUMBNAIL_DROPPED string UI.Events.thumbnailDropped
USER_BOOKMARKS_CHANGED string UI.Events.userBookmarksChanged
OUTLINE_BOOKMARKS_CHANGED string UI.Events.outlineBookmarksChanged
VIEWER_LOADED string UI.Events.viewerLoaded
VISIBILITY_CHANGED string UI.Events.visibilityChanged
FULLSCREEN_MODE_TOGGLED string UI.Events.fullscreenModeToggled
BEFORE_TAB_CHANGED string UI.Events.beforeTabChanged
TAB_DELETED string UI.Events.tabDeleted
TAB_ADDED string UI.Events.tabAdded
TAB_MOVED string UI.Events.tabMoved
LANGUAGE_CHANGED string UI.Events.languageChanged
MULTI_VIEWER_READY string UI.Events.multiViewerReady
Example
WebViewer(...).then(function(instance) {
    const UIEvents = instance.UI.Events;
    instance.UI.addEventListener(UIEvents.ANNOTATION_FILTER_CHANGED, e => {
      const { types, authors, colors } = e.detail;
      console.log(types, authors, colors);
    });
  });

<static> Feature

Contains string enums for all features for WebViewer UI
Properties:
Name Type Description
Measurement string Measurement tools that can create annotations to measure distance, perimeter and area.
Ribbons string A collection of toolbar groups to switch between.
Annotations string Render annotations in the document and be able to edit them.
Download string A download button to download the current document.
FilePicker string Ctrl/Cmd + O hotkey and a open file button that can be clicked to load local files.
LocalStorage string Store and retrieve tool styles from window.localStorage.
NotesPanel string A panel that displays information of listable annotations.
Print string Ctrl/Cmd + P hotkey and a print button that can be clicked to print the current document.
Redaction string Redaction tools that can redact text or areas. Need fullAPI to be on to use this feature.
TextSelection string Ability to select text in a document.
TouchScrollLock string Lock document scrolling in one direction in mobile devices.
Copy string Ability to copy text or annotations use Ctrl/Cmd + C hotkeys or the copy button.
MultipleViewerMerging string Ability to drag and drop pages from one instance of WebViewer into another
ThumbnailMerging string Ability to drag and drop a file into the thumbnail panel to merge
ThumbnailReordering string Ability to reorder pages using the thumbnail panel
PageNavigation string Ability to navigate through pages using mouse wheel, arrow up/down keys and the swipe gesture.
MouseWheelZoom string Ability to zoom when holding ctrl/cmd + mouse wheel.
Search string Ctrl/Cmd + F hotkey and a search button that can be clicked to search the current document.
MathSymbols string Ability to add math symbols in free text editor
OutlineEditing string Ability to add, move and delete outlines in the outlines panel. This feature is only available when `fullAPI: true` is used.
NotesPanelVirtualizedList string Ability to use a virtualized list in the note panel. Will limit the number of notes rendered on the DOM
NotesShowLastUpdatedDate string Show last updated date in notes panel instead of created date
MultiTab string toggle feature to open multiple documents in the same viewer instance
MultiViewerMode string toggle feature to activate 2 viewers in Compare Mode.
Initials string toggle feature to activate initials signing mode in the Signature Modal
SavedSignaturesTab string toggle feature to enable the saved signatures tab in the Signature Modal and use it to sign elements.
WatermarkPanel string toggle feature to enable the watermark panel
WatermarkPanelImageTab string toggle feature to enable the image tab in watermark panel
ContentEdit string toggle feature to enable content editing in a pdf document
Example
WebViewer(...)
  .then(function(instance) {
    var Feature = instance.UI.Feature;
    instance.UI.enableFeatures([Feature.Measurement]);
    instance.UI.disableFeatures([Feature.Copy]);
  });

<static> FitMode

Contains all possible modes for fitting/zooming pages to the viewer. The behavior may vary depending on the LayoutMode.
Properties:
Name Type Description
FitPage string A fit mode where the zoom level is fixed to the width or height of the page, whichever is smaller.
FitWidth string A fit mode where the zoom level is fixed to the width of the page.
Zoom string A fit mode where the zoom level is not fixed.
Example
WebViewer(...)
  .then(function(instance) {
    var FitMode = instance.UI.FitMode;
    instance.UI.setFitMode(FitMode.FitWidth);
  });

<static> hotkeys

An instance of Hotkeys that can be used to enable, disable or register custom hotkeys in the viewer
See:

<static> iframeWindow

WebViewer iframe window object
Example
WebViewer(...)
  .then(function(instance) {
    const iframeWindow = instance.UI.iframeWindow;
    // iframeWindow.SomeNamespace
    // iframeWindow.document.querySelector('.some-element');
  });

<static> Languages

Contains string enums for the default languages found in WebViewer.
Properties:
Name Type Description
EN string English (en)
CS string česky, čeština (cs)
EL string Ελληνικά (el)
DE string Deutsch (de)
ES string Español (es)
FR string Français (fr)
HU string Magyar (hu)
IT string Italiano (it)
JA string 日本語 (ja)
KO string 한국어 (ko)
NL string Nederlands (nl)
PT_BR string Português (pt_br)
PL string Polski (pl)
UK string українська (uk)
RU string Pусский (ru)
RO string Romanian (ro)
SV string Svenska (sv)
TR string Türk (tr)
TH string ไทย (th)
VI string Tiếng Việt (vi)
ID string Bahasa Indonesia (id)
MS string Melayu (ms)
HI string हिन्दी (hi)
BN string বাংলা (bn)
ZH_CN string 简体中文 (zh_cn)
ZH_TW string 繁體中文 (zh_tw)
Example
WebViewer(...).then(function(instance) {
    instance.UI.setLanguage(instance.UI.Languages.FR);
  });

<static> LayoutMode

Contains string enums for all layouts for WebViewer. They are used to dictate how pages are placed within the viewer.
Properties:
Name Type Description
Single string Only the current page will be visible.
Continuous string All pages are visible in one column.
Facing string Up to two pages will be visible.
FacingContinuous string All pages visible in two columns.
FacingCover string All pages visible in two columns, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)
FacingCoverContinuous string All pages visible, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)
Example
WebViewer(...)
  .then(function(instance) {
    const LayoutMode = instance.UI.LayoutMode;
    instance.UI.setLayoutMode(LayoutMode.Single);
  });

<static> mentions

An instance of MentionsManager that can be used to allow mentioning people in a textarea in the notes panel.
See:

<static> multiPageManipulationControls

An instance of MultiPageManipulationControls that can be used to edit the items included in the overlay
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.multiPageManipulationControls.someAPI();
  })

<static> NotesPanelSortStrategy

Contains string enums for all the possible sorting algorithms available in NotesPanel.
Properties:
Name Type Description
POSITION string Sort notes by position.
CREATED_DATE string Sort notes by creation date.
MODIFIED_DATE string Sort notes by last modification date.
STATUS string Sort notes by status.
AUTHOR string Sort notes by the author.
TYPE string Sort notes by type.
COLOR string Sort notes by color.
Example
WebViewer(...)
  .then(function(instance) {
    const sortStrategy = instance.UI.NotesPanelSortStrategy;
    instance.UI.setNotesPanelSortStrategy(sortStrategy.AUTHOR);
  });

<static> pageManipulationOverlay

An instance of PageManipulationOverlay that can be used to edit the items included in the overlay
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.pageManipulationOverlay.someAPI();
  })

<static> RedactionSearchPatterns

Available search patterns that can be passed to UI.replaceRedactionSearchPattern.

Properties:
Name Type Description
EMAILS string Search pattern for emails
CREDIT_CARDS string Search pattern for credit card numbers
PHONE_NUMBERS string Search pattern for phone numbers

<static> settingsMenuOverlay

An instance of MenuOverlay that can be used to edit items in the settings menu overlay component.
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.settingsMenuOverlay.someAPI();
  });

<static> textPopup

An instance of Popup that can be used to edit items in the text popup component
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.textPopup.someAPI();
  });

<static> thumbnailControlMenu

An instance of ThumbnailControlMenu that can be used to edit the items included in the thumbnail menu overlay
Implements:
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.thumbnailControlMenu.someAPI();
  })

<static> ToolbarGroup

Contains string enums for all toolbar options for WebViewer.
Properties:
Name Type Description
VIEW string Sets the current toolbar as the view group.
ANNOTATE string Sets the current toolbar as the annotate group.
SHAPES string Sets the current toolbar as the shapes group.
INSERT string Sets the current toolbar as the insert group.
MEASURE string Sets the current toolbar as the measure group.
EDIT string Sets the current toolbar as the edit group.
FILL_AND_SIGN string Sets the current toolbar as the fill and sign group.
FORMS string Sets the current toolbar as the forms group.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setToolbarGroup(instance.UI.ToolbarGroup.VIEW);
  });

VerificationOptions

VerificationOptions namespace
See:

Methods

<static> addCustomModal(options)

Add custom modal element to WebViewer.

Controlling custom modals is done using the element API, for example openElements, closeElements, toggleElement, and disableElements. dateElement string passed on these function should be same as you set in options.dataElement.

Every custom modal will add new <div> element with CustomModal and <options.dataElement string> set as class attribute Modal with identical options.dataElement will get replaced by the latest modal options.

For styling these components, see Customizing WebViewer UI Styles

Note that in most cases WebViewer is run inside an iframe and in order for options.disableEscapeKeyDown to automatically work, the iframe must be the active element. This can be done by setting the focus to the iframe programmatically.
Parameters:
Name Type Description
options object
Properties
Name Type Argument Default Description
dataElement string Unique name of custom modal.
disableBackdropClick boolean <optional>
 false Disable closing modal when user clicks outside of content area
disableEscapeKeyDown boolean <optional>
 false Disable closing modal when user hit escape from keyboard
render UI.renderCustomModal Function rendering custom model contents, this is optional
header object JSON object with title, className, style and children parameter
body object JSON object with title, className, style and children parameter
footer object JSON object with title, className, style and children parameter
Example
WebViewer(...).then(function(instance) {
    const modal = {
      dataElement: 'meanwhileInFinlandModal',
      header: {
        title: 'Modal header',
        className: 'myCustomModal-header',
        style: {}, // optional inline styles
        children: []
      },
      body: {
        className: 'myCustomModal-body',
        style: {}, // optional inline styles
        children: [  divInput1, divInput2 ], // HTML dom elements
      },
      footer: {
        className: 'myCustomModal-footer footer',
        style: {}, // optional inline styles
        children: [
          {
            title: 'Cancel',
            button: true,
            style: {},
            className: 'modal-button cancel-form-field-button',
            onClick: (e) => { console.log('ff') }
          },
          {
            title: 'OK',
            button: true,
            style: {},
            className: 'modal-button confirm ok-btn',
            onClick: (e) => { console.log('xx') }
          },
        ]
      }
    };
    instance.UI.addCustomModal(modal);
    instance.UI.openElements([modal.dataElement]);
  });

<static> addDateTimeFormat(dateTimeFormat)

Adds a date and time format for the UI date and time dropdowns. List of formats can be found here: dayjs API.
Parameters:
Name Type Description
dateTimeFormat object An object containing the date and time formats with the respective keys. At least one of the date or time keys must be present.
Properties
Name Type Argument Description
date string <optional>
 String of date format
time string <optional>
 String of time format
timeFirst boolean <optional>
 Boolean value to indicate if time should be before date in UI
Example
WebViewer(...)
 .then(function(instance) {
    instance.UI.addDateTimeFormat({
        date: 'MM/DD/YYYY',
        time: 'HH:mm:ss',
        timeFirst: true
      });
  });

<static> addEventListener(eventName, listener)

Add an event listener for the given WebViewer UI event.
Parameters:
Name Type Description
eventName string UI event name.
listener function Callback function that will be invoked when the event is dispatched.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.addEventListener(instance.UI.Events.ANNOTATION_FILTER_CHANGED, e => {
      const { types, authors, colors } = e.detail;
      console.log(types, authors, colors);
    });
  });

<static> addMeasurementScalePreset(options)

Adds a new preset option for measurement scales.
Parameters:
Name Type Description
options object Options for adding a new preset option.
Properties
Name Type Argument Description
measurementSystem string The measurement system, can be either 'metric' or 'imperial'.
displayName string The display name of the new preset option.
presetScale Core.Scale The scale object of the new preset option.
index number <optional>
 The index at which to insert the new preset option. If not provided, the new preset will be added to the last of the preset options list.
Example
WebViewer(...)
  .then(function(instance) {
    const newScale = new instance.Core.Scale([[1, 'mm'], [300, 'mm']]);
    instance.UI.addMeasurementScalePreset({
      measurementSystem: 'metric',
      displayName: '1:300',
      presetScale: newScale,
      index: 5
    });
  });

<static> addPanel(options)

Adds a custom panel in left or right side of the UI.
Parameters:
Name Type Description
options object
Properties
Name Type Description
dataElement string data-element for panel.
location string Location of the panel in UI, left or right.
render string | UI.renderCustomPanel Either the name of a predefined panel to render or a function that returns a panel element.
Examples
WebViewer(...)
  .then(function(instance) {
    instance.UI.addPanel({
      dataElement: 'myNewOutlinesPanel',
      render: instance.UI.Panels.OUTLINE,
    })

    instance.openElement('myNewOutlinesPanel');
  });
WebViewer(...)
  .then(function(instance) {
    instance.UI.addPanel({
      dataElement: 'fooBarElement',
      location: 'left',
      render: function() {
        var div = document.createElement('div');
        div.innerHTML = 'Hello World, foobar panel';
        return div;
      }
    });

    instance.openElement('fooBarElement');
  });

<static> addRedactionSearchPattern(searchPattern)

Adds a new search pattern to the redaction search panel
Parameters:
Name Type Description
searchPattern UI.RedactionSearchPattern A search pattern to add to the redaction search panel
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.addRedactionSearchPattern(
      {
        label: 'Social Security Number',
        icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 30 30"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
        type: 'socialSecurityNumber',
        regex: /\b\d{3}-?\d{2}-?\d{4}\b/,
      }
    );
  });

// Or to search kewyord(s):
WebViewer(...)
.then(function(instance) {
  instance.UI.addRedactionSearchPattern(
    {
      label: 'Confidential Information',
      type: 'confidentialInformation',
      regex: /confidential information/i, //Regex based search for text, case insensitive
    }
  );
});

<static> addSearchListener(searchListener)

Adds a listener function to be called when search is completed.
Parameters:
Name Type Description
searchListener UI.searchListener Callback function that will be triggered when search completed
Example
WebViewer(...)
  .then(function(instance) {
    function searchListener(searchValue, options, results) {
      console.log(searchValue, options, results);
    };

    instance.UI.addSearchListener(searchListener);
  });

<static> addSortStrategy(sortStrategy)

Adds a sorting strategy in notes panel.
Parameters:
Name Type Description
sortStrategy object Sorting strategy that will be used to sort notes
Properties
Name Type Description
name string Name of the strategy, which will be shown in notes panel's dropdown
getSortedNotes UI.getSortedNotes Function that takes unsorted notes (annotations) and returns them sorted
shouldRenderSeparator UI.shouldRenderSeparator Function that returns when a separator should be rendered
getSeparatorContent UI.getSeparatorContent Function that returns the content of a separator
Example
WebViewer(...)
  .then(function(instance) {
    var mySortStrategy = {
      name: 'annotationType',
      getSortedNotes: function(notes) {
        return notes.sort(function(a ,b) {
          if (a.Subject < b.Subject) return -1;
          if (a.Subject > b.Subject) return 1;
          if (a.Subject === b.Subject) return 0;
        });
      },
      shouldRenderSeparator: function(prevNote, currNote) {
        return prevNote.Subject !== currNote.Subject;
      },
      getSeparatorContent: function(prevNote, currNote) {
        return currNote.Subject;
      }
    };

    instance.UI.addSortStrategy(mySortStrategy);
  });

<static> cancelPrint()

Stops on-going page processing to cancel a print job.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;
    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.print();
      instance.UI.cancelPrint();
    });
  });

<static> closeDocument()

Closes the document that's currently opened.
Returns:
A promise resolved after document is closed.
Type
Promise.<void>
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      setTimeout(function() {
        instance.UI.closeDocument().then(function() {
          console.log('Document is closed');
        });
      }, 3000);
    });
  });

<static> closeElements(dataElements)

Sets visibility states of the elements to be hidden. Note that closeElements works only for panel/overlay/popup/modal elements.
Parameters:
Name Type Description
dataElements Array.<string> Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    // closes (hides) text popup and left panel in the UI
    instance.UI.closeElements([ 'menuOverlay', 'leftPanel' ]);
  });

<static> createToolbarGroup(toolbarGroup)

Creates a new Toolbar group (Ribbon)
Parameters:
Name Type Description
toolbarGroup object
Properties
Name Type Argument Description
name string The label for the new Toolbar Group or the key value to get the label from translation files.

Refer to the lib/ui/i18n folder to find the existing keys in the translation files
dataElementSuffix string

The suffix value you want to use to select your Toolbar group by data element. All toolbar groups have the data element in this format toolbarGroup-<dataElementSuffix>.

For example, if you set the dataElementSuffix as 'Draw', the dataElement of your ribbon will be toolbarGroup-Draw
children Array A list of elements to be added on the toolbar group header. Check this guide to see the available options to be used as a toolbar group child.
useDefaultElements boolean <optional>

If true, the common elements used in most toolbar groups will be added to the children list.

These elements are a spacer in the beginning and at the end of the header, the undo and redo buttons, and the eraser button.

In the example below you can see these elements being added. By default, the value will be false and these elements will not be added.
Example
WebViewer(...)
   .then(function(instance) {
    const { annotationManager, documentViewer } = instance.Core;
    const annotHistoryManager = documentViewer.getAnnotationHistoryManager();

    // In case you want to use the Toolbar Group label with translation, you can
    // set the values with the setTranslations API and use the translation key
    // as the name parameter

    instance.UI.setTranslations('en',
     {
        'option.toolbarGroup.draw': 'Draw'
      }
    );

    instance.UI.createToolbarGroup(
    {
      name: 'option.toolbarGroup.draw',
      dataElementSuffix: 'Draw',
      useDefaultElements: false,
      children: [
        { type: 'spacer' },
        {
          type: 'toolGroupButton',
          toolGroup: 'freeHandTools',
          dataElement: 'freeHandToolGroupButton',
          title: 'annotation.freehand'
        },
        {
          type: 'toolGroupButton',
          toolGroup: 'ellipseAreaTools',
          dataElement: 'ellipseAreaToolGroupButton',
          title: 'annotation.areaMeasurement'
        },
        {
          type: 'toolGroupButton',
          toolGroup: 'rectangleTools',
          dataElement: 'shapeToolGroupButton',
          title: 'annotation.rectangle'
        },
        { type: 'divider'},
        // Undo Button
        {
          type: 'actionButton',
          style: { 'marginLeft': '0px' },
          dataElement: 'undoButton',
          title: 'action.undo',
          img: 'icon-operation-undo',
          onClick: () => {
            annotHistoryManager.undo();
          },
          isNotClickableSelector: () => !annotHistoryManager.canUndo()
        },
        // Redo Button
        {
          type: 'actionButton',
          dataElement: 'redoButton',
          title: 'action.redo',
          img: 'icon-operation-redo',
          onClick: () => {
            annotHistoryManager.redo();
          },
          isNotClickableSelector: () => !annotHistoryManager.canRedo()
        },
        { type: 'toolButton', toolName: 'AnnotationEraserTool' },
        { type: 'spacer', hidden: ['tablet', 'mobile', 'small-mobile'] }
      ]
    })
  }
})

<static> dangerouslySetNoteTransformFunction(noteTransformFunction)

Accepts a function that will be called every time a note in the left panel is rendered. This function can be used to add, edit or hide the contents of the note.

Please carefully read the documentation and the notes below before using this API

This API is experimental and should be used sparingly. If you find you are heavily relying on this function, it is recommended that you fork the UI repo and make the changes directly in the source code (Note.js).

The structure of the HTML that is passed into this function may change may change without notice in any release. Please make sure to test this function thoroughly when upgrading WebViewer versions.

There may be unexpected behaviour when using this API. The HTML that is provided is controlled by React, and sometimes React will override any changes you make. If you find any unexpected behaviour when using this API, then this API probably won't work for your use case and you will have to make the changes directly in the source code.

Do not use document.createElement to create DOM elements. Instead, use the provided `createElement` utility function provided as the third parameter. Do not use HTMLElement.removeChild or any other APIs that remove elements from the DOM. Doing so will cause React to lose reference to this node, and will crash. If you need to hide an HTML element, set the style to `display: none` instead.

Parameters:
Name Type Description
noteTransformFunction UI.NoteTransformFunction The function that will be used to transform notes in the left panel
Example
Webviewer(...)
  .then(instance => {
    instance.UI.dangerouslySetNoteTransformFunction((wrapper, state, createElement) => {
      // Change the title of every note
      wrapper.querySelector('.author-and-time > .author').innerHTML = 'My custom note title';

      // Add a button that alerts the user when clicked
      const button = createElement('button');
      button.onmousedown = (e) => {
        if(state.isSelected) {
          alert('Hello world!');
        } else {
          alert('Goodbye world!');
        }
      };
      button.innerHTML = 'Alert me'
      wrapper.appendChild(button);

      // Add a button that makes the annotation blue
      const button = createElement('button');
      button.onmousedown = (e) => {
        state.annotation.StrokeColor = new instance.Annotations.Color(0, 0, 255);
        instance.UI.annotManager.redrawAnnotation(state.annotation)
      };
      button.innerHTML = 'Make me blue'
      wrapper.appendChild(button);
    })
  });

<static> disableApplyCropWarningModal()

Disable the confirmation modal when applying a crop to a page
Example
WebViewer(...)
 .then(function(instance) {
    instance.UI.disableApplyCropWarningModal();
  });

<static> disableBookmarkIconShortcutVisibility()

Hide bookmark icon shortcuts on the top right corner of each page.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.disableBookmarkIconShortcutVisibility();
  });

<static> disableClearSearchOnPanelClose()

Disable clearing search results when user closes search panel. When disabled, search results are kept even if user closes and reopens search panel. Note, mobile devices never clear search results even if this setting is enabled. This is because the panel needs to be closed to view the search results on the document.
Example
WebViewer(...)
 .then(function(instance) {
    instance.UI.disableClearSearchOnPanelClose();
  });

<static> disableDesktopOnlyMode()

Disables desktop only mode on WebViewer UI. This means that at small browser width/height, mobile/tablet CSS styling will be applied.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.disableDesktopOnlyMode();
  });

<static> disableElements(dataElements)

Unmount multiple elements in the DOM. Note that this ONLY removes the DOM elements without disabling related features.
Parameters:
Name Type Description
dataElements Array.<string> Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.
Examples
WebViewer(...)
  .then(function(instance) {
    // remove left panel and left panel button from the DOM
    instance.UI.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  });
WebViewer(...)
  .then(function(instance) {
    // remove the 'Edit' toolbar group
    instance.UI.disableElements(['toolbarGroup-Edit']);
  });

<static> disableFadePageNavigationComponent()

Always keep the Page Navigation Component on screen. Default behaviour is to fade it after certain period of inactivity.
Example
WebViewer(...)
  .then(function(instance) {
    // Keeps the page navigation component on screen all the time
    instance.UI.disableFadePageNavigationComponent();
  });

<static> disableFeatures(features)

Disable certain features in the WebViewer UI.
Parameters:
Name Type Description
features Array.<string> Array of features to disable.
See:
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.disableFeatures(instance.Feature.Measurement);
  });

<static> disableHighContrastMode()

Turns high contrast mode off.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.disableHighContrastMode();
  });

<static> disableMultipleScalesMode()

Disable multiple scales mode.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.disableMultipleScalesMode();
  });

<static> disableMultiViewerSync()

Example
WebViewer(...)
 .then((instance) => {
    instance.UI.disableMultiViewerSync();
  });

<static> disableNativeScrolling()

Disable native mobile device scrolling behavior if it had previously been enabled. Note that native mobile device scrolling behavior is off by default.
Example
WebViewer(...)
  .then(function(instance) {
    UI.disableNativeScrolling();
  });

<static> disableNoteSubmissionWithEnter()

Disable the ability to submit notes by only pressing Enter if it had previously been enabled. This will revert note submission to the default which is Ctrl/Cmd + Enter.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.disableNoteSubmissionWithEnter();
  });

<static> disablePageDeletionConfirmationModal()

Disable the confirmation modal when deleting a page from the thumbnail view
Example
WebViewer(...)
 .then(function(instance) {
    instance.UI.disablePageDeletionConfirmationModal();
  });

<static> disableReplyForAnnotations(isReplyDisabledCallback)

Disable reply for annotations if the callback function returns true. The callback function gets evaluated when the Comments panel is open, an annotation is selected, and the selected annotation has a comment. Only one callback function will be stored and invoked. If multiple criteria is needed to disable replies you must write them in a single callback function.
Parameters:
Name Type Description
isReplyDisabledCallback UI.disableReplyForAnnotationsCallback Callback function that returns true if reply will be disabled for the annotation passed in. False otherwise.
Example
WebViewer(...)
  .then(instance => {

    // disable reply for Freehand annotations
    instance.UI.disableReplyForAnnotations((annotation) => {
      return annotation instanceof instance.Annotations.FreeHandAnnotation;
    });

    // disable reply for annotations authored by Guest
    instance.UI.disableReplyForAnnotations((annotation) => {
      return annotation['Author'] === 'Guest';
    });

    // disable reply for annotations created more than 10 seconds ago
    instance.UI.disableReplyForAnnotations((annotation) => {
      const createdDate = new Date(annotation['DateCreated']);
      const todayDate = new Date();
      return (todayDate - createdDate) > 10000;
    });
  });

<static> disableToolDefaultStyleUpdateFromAnnotationPopup()

Disables syncing of annotation style updates to the associated tool that created the annotation. So if an annotation's style is changed the tool default styles will not be updated.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.disableToolDefaultStyleUpdateFromAnnotationPopup();
  });

<static> disableTools( [toolNames])

Disable multiple tools. This API uses disableElements internally to remove tool buttons from the DOM, and also disable the corresponding hotkeys.
Parameters:
Name Type Argument Default Description
toolNames Array.<string> | Array.<Core.Tools.ToolNames> <optional>
 all tools Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be disabled.
Example
WebViewer(...)
  .then(function(instance) {
    const { Tools } = instance.Core;
    // disable sticky annotation tool and free text tool
    instance.UI.disableTools([Tools.ToolNames.STICKY, Tools.ToolNames.FREETEXT]);
  });

<static> displayErrorMessage(message)

Displays the custom error message
Parameters:
Name Type Description
message string An error message
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.displayErrorMessage('My error message');
  });

<static> dispose()

Cleans up listeners and data from the WebViewer instance. Should be called when removing the WebViewer instance from the DOM.
Example
webViewerInstance.UI.dispose()

<static> downloadPdf( [options])

Downloads the pdf document with or without annotations added by WebViewer UI.
Parameters:
Name Type Argument Description
options object <optional>
 An object that contains the following download options.
Properties
Name Type Argument Default Description
filename string <optional>
 The filename of the downloaded document.
downloadType string <optional>
 'pdf' The type to download the file as, by default this is "pdf". PDF and image files can only be downloaded as PDFs, but office files can be downloaded as "pdf" or as "office" if you want to get the original file without annotations.
xfdfString string <optional>
 An xfdf string containing annotation data to be used when downloading. Use this option instead of `includeAnnotations` if not all annotations need to be contained in the downloaded file.
includeAnnotations boolean <optional>
 true Whether or not to include annotations added by WebViewer UI.
flatten boolean <optional>
 Whether or not to flatten all the annotations in the downloaded document. Only useful fullAPI is enabled and either `xfdfString` or `includeAnnotations` is used.
documentToBeDownloaded Core.Document <optional>
 A document to be download instead of the one loaded by Document Viewer.
useDisplayAuthor boolean <optional>
 Whether to export annotations with the Display Author name from annotationManager.getDisplayAuthor()
flags number <optional>
 Core.SaveOptions.REMOVE_UNUSED The flags with which to save the document. Possible values include `Core.SaveOptions.REMOVE_UNUSED` (remove unused objects during save) and `Core.SaveOptions.LINEARIZED` (optimize the document for fast web view and remove unused objects).
Returns:
A promise that is resolved once the document is downloaded.
Type
Promise.<any>
Example
WebViewer(...)
  .then(async function(instance) {
    const docViewer = instance.Core.documentViewer;
    const annotManager = instance.Core.annotationManager;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', async function() {
      // download pdf without annotations added by WebViewer UI
      await instance.UI.downloadPdf({
        includeAnnotations: false,
      });

      console.log('Downloaded the first time!')

      // download pdf with all annotations flattened
      await instance.UI.downloadPdf({
        includeAnnotations: true,
        flatten: true,
      });

      console.log('Downloaded a second time!')

      // download pdf without links
      const xfdfString = await annotManager.exportAnnotations({ links: false });
      await instance.UI.downloadPdf({
        xfdfString: xfdfString,
      });

      console.log('Downloaded a third time!')
    });
  });

<static> enableApplyCropWarningModal()

Enable the confirmation modal when applying a crop to a page
Example
WebViewer(...)
 .then(function(instance) {
    instance.UI.enableApplyCropWarningModal();
  });

<static> enableBookmarkIconShortcutVisibility()

Show bookmark icon shortcuts on the top right corner of each page for quickly adding or removing a bookmark.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableBookmarkIconShortcutVisibility();
  });

<static> enableClearSearchOnPanelClose()

Enable clearing search results when user closes search panel. When this is enabled and user closes search panel all search results are cleared. Note, mobile devices never clear search results even if this setting is enabled. This is because the panel needs to be closed to view the search results on the document.
Example
WebViewer(...)
 .then(function(instance) {
    // Will not affect on mobile devices
    instance.UI.enableClearSearchOnPanelClose();
  });

<static> enableDesktopOnlyMode()

Enables desktop only mode on WebViewer UI. This means that at small browser width/height, mobile/tablet CSS styling will not be applied.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableDesktopOnlyMode();
  });

<static> enableElements(dataElements)

Remount the hidden elements in the DOM.
Parameters:
Name Type Description
dataElements Array.<string> Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    // remove left panel and left panel button from the DOM
    instance.UI.enableElements([ 'leftPanel', 'leftPanelButton' ]);
  });

<static> enableFadePageNavigationComponent()

Fade the Page Navigation Component after it has not been interacted with. Reappears whenever the document is scrolled.
Example
WebViewer(...)
  .then(function(instance) {
    // Sets behaviour to fade the page navigation component.
    // enabled by default
    instance.UI.enableFadePageNavigationComponent();
  });

<static> enableFeatures(features)

Enable certain features in the WebViewer UI.
Parameters:
Name Type Description
features Array.<string> Array of features to enable.
See:
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableFeatures(instance.Feature.Measurement);
  });

<static> enableHighContrastMode()

Turns high contrast mode on to help with accessibility.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableHighContrastMode();
  });

<static> enableMultipleScalesMode()

Enable multiple scales mode.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableMultipleScalesMode();
  });

<static> enableMultiViewerSync( [primaryViewerKey])

Parameters:
Name Type Argument Default Description
primaryViewerKey number <optional>
 1 Which DocumentViewer to set as primary for initial zoom sync (1 or 2)
Example
WebViewer(...)
 .then((instance) => {
    instance.UI.enableMultiViewerSync(1) // Value can be 1 (for left side) or 2 (for right side)
  });

<static> enableNativeScrolling()

Enable native mobile device scrolling behavior. By default custom behavior is used to handle vertical and horizontal scroll locking.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableNativeScrolling();
  });

<static> enableNoteSubmissionWithEnter()

Enable the ability to submit notes by only pressing Enter. Default mode is Ctrl/Cmd + Enter.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableNoteSubmissionWithEnter();
  });

<static> enablePageDeletionConfirmationModal()

Enable the confirmation modal when deleting a page from the thumbnail view
Example
WebViewer(...)
 .then(function(instance) {
    instance.UI.enablePageDeletionConfirmationModal();
  });

<static> enableToolDefaultStyleUpdateFromAnnotationPopup()

Enables syncing of annotation style updates to the associated tool that created the annotation. Note that this is enabled by default.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableToolDefaultStyleUpdateFromAnnotationPopup();
  });

<static> enableTools( [toolNames])

Enable multiple tools.
Parameters:
Name Type Argument Default Description
toolNames Array.<string> <optional>
 all tools Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be enabled.
Example
WebViewer(...)
  .then(function(instance) {
    // enable sticky annotation tool and free text tool
    instance.UI.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
  });

<static> exportBookmarks()

Returns a dictionary with page indices as keys and the bookmark text as the values
Returns:
A dictionary with page indices as keys and the bookmark text as the values. ex: {"0":"Bookmark 1","2":"Bookmark 2"}
Type
Object
Example
WebViewer(...)
  .then(function(instance) {
    // Save the annotation data for doc123
    const bookmarks = instance.UI.exportBookmarks();
    const bookmarksString = JSON.stringify(bookmarks);
    fetch('/server/bookmarksHandler.js?documentId=doc123', {
      method: 'POST',
      body: bookmarksString // written into a json file on server
    });
  });

<static> exportUserSettings()

Export the current user settings as JSON object.
Returns:
JSON object containing the current user settings
Type
object
Example
WebViewer(...)
  .then(function (instance) {
    const userSettings = instance.UI.exportUserSettings();
    console.log(userSettings);
  });

<static> extractPagesWithAnnotations(pageNumbersToExtract)

Extract pages from the current document
Parameters:
Name Type Description
pageNumbersToExtract Array.<number> An array of pages to extract from the document. Annotations on the pages are included
Returns:
A promise that resolve to a File object
Type
Promise.<File>
Example
// 6.0 and after
WebViewer(...)
  .then(function(instance) {
    instance.UI.extractPagesWithAnnotations ([1,2,3]).then(function(fileData){
    });
  });

<static> focusNote(annotationId)

Focuses a note input field for the annotation. If the notes panel is closed, it is automatically opened before focusing.
Parameters:
Name Type Description
annotationId string Id of an annotation.
Example
WebViewer(...)
  .then(function(instance) {
    var annotManager = instance.Core.annotationManager;

    annotManager.addEventListener('annotationChanged', function(annotations, action) {
      annotations.forEach(function(annotation) {
        // Focus the note when annotation is created
        if (action === 'add' && annotation.Listable) {
          instance.UI.focusNote(annotation.Id); // note it is a capital i
        }
      });
    });
  });

<static> getAnnotationReadState(annotationId)

Return the read/unread state of an annotation. True for read, false for unread.
Parameters:
Name Type Description
annotationId string Id of the annotation.
Throws:
Will throw an error if the annotation with the given ID does not exist.
Returns:
Whether the annotation is read.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    const isAnnotationRead = instance.UI.getAnnotationReadState('test-annotation-id');

<static> getAnnotationStylePopupTabs( [annotationKey])

Returns the style popup tab configurations for the specified annotation type. If there was no annotation key specified, it will return the style popup tab configurations for all the annotations.
Parameters:
Name Type Argument Description
annotationKey string <optional>
 Indicate the type of an annotation, see UI.AnnotationKeys.
Returns:
Type
Array.<AnnotationStyleTabConfiguration>
Example
WebViewer(...)
    .then(function(instance) {
        console.log(instance.UI.getAnnotationStylePopupTabs());
      );
    });

<static> getAvailableLanguages()

Returns all available languages as a list.
Returns:
All available languages
Type
Array.<string>
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.getAvailableLanguages());
  });

<static> getCurrentLanguage()

Return the current language used in WebViewer.
Returns:
Current language code
Type
string
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.getCurrentLanguage());
  });

<static> getCustomData()

A getter that returns a stringified version of the 'custom' property that is passed to the WebViewer constructor Refer to the passing custom data section.
Returns:
returns a stringified version of the 'custom' property that is passed to the WebViewer constructor
Type
string

<static> getFitMode()

Return the current fit mode of the WebViewerInstance UI.
Returns:
Current fit mode
Type
string
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      console.log(instance.UI.getFitMode());
    });
  });

<static> getIsHighContrastMode()

Check whether high contrast mode is enabled or not.
Deprecated:
  • since version 8.0. Use isHighContrastModeEnabled Instead
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.getIsHighContrastMode();
  });

<static> getLayoutMode()

Return the current layout mode of the WebViewerInstance.
Returns:
Current layout mode
Type
string
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      console.log(instance.UI.getLayoutMode());
    });
  });

<static> getLocalizedText()

Return the localized text for the given key. This functions exactly the same as the t API from the i18n library.
This may be used to leverage the existing localization setup in WebViewer in custom elements, modals, etc.
Returns:
The translation key
Type
string | Array.<string>
Example
WebViewer(...)
  .then(function(instance) {
    const button = document.createElement('button');
    button.innerText = instance.UI.getLocalizedText('action.add');

    instance.UI.setHeaderItems(header => {
      const renderButton = () => button;

      const newCustomElement = {
        type: 'customElement',
        title: 'action.add',
        render: renderButton
      };
      header.push(newCustomElement);
    });

    instance.UI.addEventListener(instance.UI.Events.LANGUAGE_CHANGED, () => {
        // Manually update components
        button.innerText = instance.UI.getLocalizedText('action.add');
    });

    instance.UI.setLanguage(instance.UI.Languages.FR);
    // The button text will be 'Ajouter' (French) instead of 'Add' (English)
  });

<static> getMaxZoomLevel()

Return the max zoom level
Returns:
max zoom level
Type
number
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      console.log(instance.UI.getMaxZoomLevel());
    });
  });

<static> getMeasurementScalePreset(measurementSystem)

Returns all the measurement scale preset options for the given measurement system.
Parameters:
Name Type Description
measurementSystem string The measurement system, can be either 'metric' or 'imperial'.
Returns:
All the measurement scale preset options for the given measurement system.
Type
Array.<Array.<(string|Core.Scale)>>
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.getMeasurementScalePreset('metric'));
  });

<static> getMinZoomLevel()

Return the min zoom level
Returns:
min zoom level
Type
number
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      console.log(instance.UI.getMinZoomLevel());
    });
  });

<static> getSelectedThumbnailPageNumbers()

Get the currently selected pages
Returns:
an array of select page numbers
Type
Array.<number>
Example
// 6.0 and after
WebViewer(...)
  .then(function(instance) {
    instance.UI.getSelectedThumbnailPageNumbers();
  });

<static> getToolMode()

Return the current tool object.
Returns:
Instance of the current tool
Type
Core.Tools.Tool
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.getToolMode().name, instance.UI.getToolMode());
  });

<static> getWatermarkModalOptions()

Gets the watermark options created in print modal.
Returns:
Returns the watermark options created in print modal.
Type
object

<static> getZoomLevel()

Return the current zoom level
Returns:
Zoom level (0 ~ 1)
Type
number
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      console.log(instance.UI.getZoomLevel());
    });
  });

<static> hideFormFieldIndicators()

Hide form field indicators.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.hideFormFieldIndicators();
  });

<static> hideOutlineControl()

hide outline control
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.hideOutlineControl();
  });

<static> importBookmarks(bookmarks)

Imports user bookmarks
Parameters:
Name Type Description
bookmarks object A dictionary with page indices as keys and the bookmark text as the values. ex: {"0":"Bookmark 1","2":"Bookmark 2"}. Behaviour is undefined otherwise.
Example
WebViewer(...)
  .then(function(instance) {
    // load the user bookmarks data for id 'doc123'
    fetch('/server/bookmarksHandler.js?documentId=doc123', {
      method: 'GET'
    }).then(function(response) {
      if (response.status === 200) {
        response.text().then(function(bookmarksString) {
          // {"0":"Bookmark 1","2":"Bookmark 2"}
          const bookmarks = JSON.parse(bookmarksString);
          instance.UI.importBookmarks(bookmarks);
        });
      }
    });
  });

<static> importUserSettings(userSettings)

Import user settings from JSON object.
Parameters:
Name Type Description
userSettings object JSON object containing the new user settings
Example
WebViewer(...)
  .then(function (instance) {
    const userSettings = instance.UI.exportUserSettings();
    const newUserSettings = {
      'theme': 'dark',
      'keyboardShortcut': { ...userSettings.keyboardShortcut, 'search': 'command+m' }
    };
    instance.UI.importUserSettings(newUserSettings);
  });

<static> isElementDisabled(dataElement)

Returns whether the element is disabled.
Parameters:
Name Type Description
dataElement string data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.
Returns:
Whether the element is disabled.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isElementDisabled('leftPanel'));
  });

<static> isElementOpen(dataElement)

Returns whether the element is open.
Parameters:
Name Type Description
dataElement string data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.
Returns:
Whether the element is open.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isElementOpen('leftPanel'));
  });

<static> isFullscreen()

Returns whether in fullscreen mode.
Returns:
Whether in fullscreen mode.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isFullscreen());
  });

<static> isHighContrastModeEnabled()

Check whether high contrast mode is enabled or not.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.isHighContrastModeEnabled();
  });

<static> isInDesktopOnlyMode()

Returns a boolean to denote if the UI is in desktop only mode.
Returns:
boolean to denote if the UI is in desktop only mode
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.isInDesktopOnlyMode();
  });

<static> isMultipleScalesModeEnabled()

Returns whether multiple scales mode is enabled.
Returns:
True if multiple scales mode is enabled, false if multiple scales mode is disabled.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isMultipleScalesModeEnabled());
  });

<static> isMultiViewerSyncing()

Returns:
returns true if sync is enabled false if disabled
Type
boolean
Example
WebViewer(...)
 .then((instance) => {
    console.log(instance.UI.isMultiViewerSyncing());
  });

<static> isToolDisabled(toolName)

Returns whether the tool is disabled.
Parameters:
Name Type Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
Returns:
Whether the tool is disabled.
Type
boolean
Example
WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isToolDisabled());
  });

<static> loadDocument(documentPath [, options])

Load a document inside WebViewer UI.
Parameters:
Name Type Argument Description
documentPath string | File | Blob | Core.Document | Core.PDFNet.PDFDoc Path to the document OR File object if opening local file.
options UI.loadDocumentOptions <optional>
 Additional options
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.loadDocument('https://www.pdftron.com/downloads/pl/test.pdf', {
      documentId: '1',
      filename: 'sample-1.pdf'
    });
  });

<static> openElements(dataElements)

Sets visibility states of the elements to be visible. Note that openElements works only for panel/overlay/popup/modal elements.
Parameters:
Name Type Description
dataElements Array.<string> Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    // opens (shows) text popup and annotation popup in the UI
    instance.UI.openElements([ 'menuOverlay', 'leftPanel' ]);
  });

<static> overrideSearchExecution(overrideSearchExecutionCallback)

Add custom override function for default search on UI. overrideSearchExecutionCallback function will be executed with search value and search options when user executes search from UI. This function won't be executed when search is triggered through programmatic searches.
Parameters:
Name Type Description
overrideSearchExecutionCallback function Function that will executed instead of default search functionality.
Example
WebViewer(...)
 .then(function(instance) {
    function searchFn(searchValue, options) {
      console.log(searchValue, options);
    };

    instance.UI.overrideSearchExecution(searchFn);
  });

<static> print()

Print the current document.
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;
    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.print();
    });
  });

<static> printInBackground( [options])

Programmatically print the document without opening a modal with the print options provided. Not supported by legacy-ui
Parameters:
Name Type Argument Description
options object <optional>
 Options for the printing.
Properties
Name Type Argument Default Description
pagesToPrint Array.<number> <optional>
 Optionally pass in the pages you want to print. By default, all pages will be printed.
includeAnnotations boolean <optional>
 false If true, will print the documents with the annotations
includeComments boolean <optional>
 false If true, will append comments to the document printed
isPrintCurrentView boolean <optional>
 If true, will print the current viewport view of the current page
maintainPageOrientation boolean <optional>
 If true, will maintain the pages orientation as set in the webviewer during printing
onProgress function <optional>
 A callback function that is executed on each page processed
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.printInBackground({
        includeComments:true,
        includeAnnotations: true,
        maintainPageOrientation: true,
        onProgress: function(pageNumber, htmlElement) {},
      });
    });
  });

<static> registerTool(properties [, annotationConstructor] [, customAnnotationCheckFunc])

Registers tool in the document viewer tool mode map, and adds a button object to be used in the header. See Customizing tools to learn how to make a tool.
Parameters:
Name Type Argument Description
properties object Tool properties.
Properties
Name Type Argument Description
toolName string Name of the tool.
toolObject Core.Tools.Tool Instance of the tool.
buttonImage string Path to an image or base64 data for the tool button.
buttonName string <optional>
 Name of the tool button that will be used in data-element.
buttonGroup string <optional>
 Group of the tool button belongs to.
tooltip string <optional>
 Tooltip of the tool button.
showColor 'always' | 'active' | 'never' <optional>
 Controls when the tool button should show the color.
showPresets boolean <optional>
 Option to whether show or hide preset styles. Default is true.
annotationConstructor function <optional>
 Deprecated Please use customAnnotationCheckFunc instead. Will be removed in the future.
customAnnotationCheckFunc function <optional>
 Function that takes in a parameter of an annotation. Returns a boolean if the specified annotation is a certain type of annotation. This function is used by the viewer to check if the annotation passed in is associated(created) with the registered tool.
Example
WebViewer(...)
  .then(function(instance) {
    // assume myCustomTool and myCustomAnnotation are already defined
    const myTool = {
      toolName: 'MyTool',
      toolObject: myCustomTool,
      buttonImage: 'path/to/image',
      buttonName: 'myToolButton',
      buttonGroup: 'miscTools',
      tooltip: 'MyTooltip'
    };

    instance.UI.registerTool(myTool, undefined, annot => annot && annot.isCustomAnnot);
  });

<static> reloadOutline()

Reloads the Bookmark Outline in the WebViewer UI.
Example
WebViewer(...)
  .then(function(instance) {
    const { documentViewer } = instance.Core;

    // you must have a document loaded when calling this api
    documentViewer.addEventListener('documentLoaded', async () => {
      const doc = documentViewer.getDocument();
      const pdfDoc = await doc.getPDFDoc();
      const firstBookmark = await doc.getFirstBookmark();

      const bookmarkToDelete = await firstBookmark.find('bookmark-to-delete');
      if (bookmarkToDelete !== null && await bookmarkToDelete.isValid()) {
        await bookmarkToDelete.delete();
        instance.UI.reloadOutline();
      }
    });
  });

<static> removeEventListener(eventName, listener)

"Remove an event listener for the given WebViewer UI event.
Parameters:
Name Type Description
eventName string UI event name.
listener function Event handler function that should no longer be bound to the event.
Example
WebViewer(...)
  .then(function(instance) {
    const listener = e => {
      const { types, authors, colors } = e.detail;
      console.log(types, authors, colors);

      instance.UI.removeEventListener(instance.UI.Events.ANNOTATION_FILTER_CHANGED, listener);
    };
    instance.UI.addEventListener(instance.UI.Events.ANNOTATION_FILTER_CHANGED, listener);
  });

<static> removeMeasurementScalePreset(measurementSystem, index)

Adds an existing preset option for measurement scales.
Parameters:
Name Type Description
measurementSystem string The measurement system, can be either 'metric' or 'imperial'.
index number The index at which to remove the existing preset option.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.removeMeasurementScalePreset('metric', 5);
  });

<static> removeRedactionSearchPattern(searchPattern)

Removes a search pattern from the redaction search panel
Parameters:
Name Type Description
searchPattern UI.RedactionSearchPatterns | string A search pattern to remove from the redaction search panel. If you added a custom search pattern with UI.addRedactionSearchPattern, you must pass the type of the search pattern you added.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.removeRedactionSearchPattern(instance.UI.RedactionSearchPatterns.EMAILS);
  });

// If you added a custom search pattern for Social Security Number where the type is 'socialSecurityNumber'.
WebViewer(...)
.then(function(instance) {
  instance.UI.removeRedactionSearchPattern('socialSecurityNumber');
});

<static> removeSearchListener(listener)

Removes the search listener function.
Parameters:
Name Type Description
listener UI.searchListener Search listener function that was added.
Example
WebViewer(...)
  .then(function(instance) {
    function searchListener(searchValue, options, results) {
      console.log(searchValue, options, results);
    };

    instance.UI.addSearchListener(searchListener);
    instance.UI.removeSearchListener(searchListener);
  });

<static> replaceRedactionSearchPattern(searchPattern, regex)

Sets a specific regex to be used when searching for one of the supported patterns in the redaction search panel
Parameters:
Name Type Description
searchPattern UI.RedactionSearchPatterns A search pattern for which the regex should be replaced
regex string The regex to be used for the search pattern
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.replaceRedactionSearchPattern(instance.UI.RedactionSearchPatterns.EMAILS, /\w+@\w+\.\w+/);
  });

<static> searchText(searchValue [, options])

Searches the document one by one for the text matching searchValue. To go to the next result this function must be called again. Once document end is reach it will jump back to the first found result.
Parameters:
Name Type Argument Description
searchValue string The text value to look for.
options object <optional>
 Search options.
Properties
Name Type Argument Default Description
caseSensitive boolean <optional>
 false Search with matching cases.
wholeWord boolean <optional>
 false Search whole words only.
wildcard boolean <optional>
 false Search a string with a wildcard *. For example, *viewer.
regex boolean <optional>
 false Search for a regex string. For example, www(.*)com.
searchUp boolean <optional>
 false Search up the document (backwards).
ambientString boolean <optional>
 false Get the ambient string in the result.
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.searchText('test', {
        caseSensitive: true,
        wholeWord: true
      });
    });
  });

<static> searchTextFull(searchValue [, options])

Searches the full document for the texts matching searchValue.
Parameters:
Name Type Argument Description
searchValue string The text value to look for.
options object <optional>
 Search options.
Properties
Name Type Argument Default Description
caseSensitive boolean <optional>
 false Search with matching cases.
wholeWord boolean <optional>
 false Search whole words only.
wildcard boolean <optional>
 false Search a string with a wildcard *. For example, *viewer.
regex boolean <optional>
 false Search for a regex string. For example, www(.*)com.
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.searchTextFull('test', {
        wholeWord: true
      });
    });
  });

<static> selectThumbnailPages(pageNumbers)

Select thumbnails in the thumbnail panel. This requires the "ThumbnailMultiselect" feature to be enabled
Parameters:
Name Type Description
pageNumbers Array.<number> array of page numbers to select
Example
// 6.1 and after
WebViewer(...)
  .then(function(instance) {
    instance.UI.enableFeatures(['ThumbnailMultiselect']);

    const pageNumbersToSelect = [1, 2, 3];
    instance.UI.selectThumbnailPages(pageNumbersToSelect);
  });

<static> setActiveHeaderGroup(headerGroup)

Sets a header group to be rendered in the Header element. This API comes useful when replacing the entire header items in small screens.
Parameters:
Name Type Description
headerGroup string Name of the header group to be rendered. Default WebViewer UI has eight header groups: 'default', 'small-mobile-more-buttons', 'toolbarGroup-View', 'toolbarGroup-Annotate', 'toolbarGroup-Shapes', 'toolbarGroup-Insert', 'toolbarGroup-Measure', and 'toolbarGroup-Edit'.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setActiveHeaderGroup('toolbarGroup-Annotate'); // switch to 'Annotate' group header
  });

<static> setActiveLeftPanel(dataElement)

Sets a panel to be active in the leftPanel element. Note that this API does not include opening the leftPanel.
Parameters:
Name Type Description
dataElement string Name of the panel to be active in leftPanel. Default WebViewer UI has three panel options: thumbnailsPanel, outlinesPanel and notesPanel.
Example
WebViewer(...)
  .then(function(instance) {
    // open left panel
    instance.UI.openElements([ 'leftPanel' ]);
    // view outlines panel
    instance.UI.setActiveLeftPanel('outlinesPanel');

<static> setActivePalette(toolName, colorPalette)

Sets the active color palette of a tool and its associated annotation
Parameters:
Name Type Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
colorPalette 'text' | 'border' | 'fill' The palette to be activated. One of 'text', 'border' and 'fill'.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setActivePalette('AnnotationCreateFreeText', 'fill')
  });

<static> setAnnotationContentOverlayHandler(customOverlayHandler)

Adds a custom overlay to annotations on mouseHover, overriding the existing overlay.
Parameters:
Name Type Description
customOverlayHandler function A function that takes an annotation and returns a DOM Element, which is rendered as a tooltip when hovering over the annotation. Returning null or false will render nothing. Returning 'undefined' will use default behavior.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setAnnotationContentOverlayHandler(annotation => {
        const div = document.createElement('div');
        div.appendChild(document.createTextNode(`Created by: ${annotation.Author}`));
        div.appendChild(document.createElement('br'));
        div.appendChild(document.createTextNode(`Created on ${annotation.DateCreated}`));
        return div;
    });
  });

<static> setAnnotationReadState(options)

Set the read/unread state of an annotation. The default state of annotations is read.
Parameters:
Name Type Description
options object
Properties
Name Type Description
isRead boolean whether setting the annotation to read state; false for setting it as unread.
annotationId string Id of the annotation to be set.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setAnnotationReadState({ isRead: true, annotationId: 'test-annotation-id' });
  });

<static> setAnnotationStylePopupTabs(annotationKey, newAnnotationStyleTabs [, initialTab])

Sets the available style tabs in the style popup for a specific annotation type.
Parameters:
Name Type Argument Description
annotationKey string The annotation type. See UI.AnnotationKeys.
newAnnotationStyleTabs Array.<string> Indicates the available style tabs for the annotation. See UI.AnnotationStylePopupTabs.
initialTab string <optional>
 The initial style tab. It should be one of the elements in newAnnotationStyleTabs if passed to the API.
Example
WebViewer(...)
    .then(function(instance) {
      instance.UI.setAnnotationStylePopupTabs(
        instance.UI.AnnotationKeys.FREE_TEXT,
        [
          instance.UI.AnnotationStylePopupTabs.TEXT_COLOR,
          instance.UI.AnnotationStylePopupTabs.FILL_COLOR
        ],
        instance.UI.AnnotationStylePopupTabs.FILL_COLOR
      );
    });

<static> setColorPalette(An)

Sets the colors in the palette globally or for specific tools and their associated annotations
Parameters:
Name Type Description
An Array.<string> | UI.PaletteOption array of hex colors that will override the default colors for every tool. An object can be passed to specify colors for particular tools.
Example
WebViewer(...)
  .then(function(instance) {
    // this sets the palette globally. All the tools will use these colors. Can use empty string for blank spaces and 'transparency' for a transparent color.
    instance.UI.setColorPalette(['#FFFFFF', '', '#DDDDDD', 'transparency']);

    // use a different set of colors for the freetext and rectangle tool.
    instance.UI.setColorPalette({
      toolNames: ['AnnotationCreateFreeText', 'AnnotationCreateRectangle'],
      colors: ['#333333'],
    })
  });

<static> setCustomApplyRedactionsHandler(customApplyRedactionsHandler)

Parameters:
Name Type Description
customApplyRedactionsHandler UI.CustomApplyRedactionsHandler The function that will be invoked when clicking on the 'Redact All' button.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomApplyRedactionsHandler((annotationsToRedact, originalApplyRedactionsFunction) => {
      // custom code
      ...
      originalApplyRedactionsFunction();
    })
  });

<static> setCustomMeasurementOverlay(customOverlayInfo)

Adds a custom overlay to annotations if that annotation currently support it. Currently only the Ellipsis annotation supports it.
Parameters:
Name Type Description
customOverlayInfo array an array of customOverlay configurations. The configuration object has five properties: title, label, validate, value, and onChange
Example
WebViewer(...)
  .then(function(instance) {
      instance.UI.setCustomMeasurementOverlayInfo([
      {
        title: "Radius Measurement", //Title for overlay
        label: "Radius", // Label to be shown for the value
        // Validate is a function to validate the annotation is valid for the current custom overlay
        validate: annotation => annotation instanceof instance.Annotations.EllipseAnnotation,
        // The value to be shown in the custom overlay
        value: annotation => annotation.Width / 2,
        // onChange will be called whenever the value in the overlay changes from user input
        onChange: (e, annotation) => {
          // Do something with the annot like resize/redraw
          instance.Core.annotationManager.redrawAnnotation(annotation);
        }
      }
    ])
  });

<static> setCustomModal(options)

Parameters:
Name Type Description
options object
Properties
Name Type Argument Default Description
dataElement string Unique name of custom modal.
disableBackdropClick boolean <optional>
 false Disable closing modal when user clicks outside of content area
disableEscapeKeyDown boolean <optional>
 false Disable closing modal when user hit escape from keyboard
render UI.renderCustomModal Function rendering custom model contents
Deprecated:

<static> setCustomMultiViewerAcceptedFileFormats(customMultiViewerAcceptedFileFormats)

Parameters:
Name Type Description
customMultiViewerAcceptedFileFormats UI.CustomMultiViewerAcceptedFileFormats
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomMultiViewerAcceptedFormats(['pdf']);
  });

<static> setCustomMultiViewerSyncHandler(customMultiViewerSyncHandler)

Parameters:
Name Type Description
customMultiViewerSyncHandler UI.CustomMultiViewerSyncHandler The function that will be invoked when syncing documents in multi viewer mode.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomMultiViewerSyncHandler((primaryDocumentViewerKey, removeHandlerFunctions) => {
      // some code
    })
  });

<static> setCustomNoteFilter(filterAnnotation)

Filter the annotations shown in the notes panel
Parameters:
Name Type Description
filterAnnotation UI.filterAnnotation Function that takes an annotation and returns if the annotation(note) should be shown in the notes panel.
Example
WebViewer(...)
  .then(function(instance) {
    // only show annotations that are created by John
    instance.UI.setCustomNoteFilter(function(annotation) {
      return annotation.Author === 'John';
    });
  });

<static> setCustomNoteSelectionFunction(customNoteSelectionFunction)

Parameters:
Name Type Description
customNoteSelectionFunction UI.CustomNoteSelectionFunction The function that will be invoked when clicking on a note in notes panel. The function will only be invoked when the underlying annotation is not already selected.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomNoteSelectionFunction(annotation => {
      // some code
    })
  });

<static> setCustomPanel(options)

Adds a custom panel in left panel
Parameters:
Name Type Description
options object
Properties
Name Type Description
tab object Tab options.
Properties
Name Type Description
dataElement string data-element for tab.
title string Tooltip for tab.
img string Url for an image.
panel object Panel options.
Properties
Name Type Description
dataElement string data-element for panel.
render UI.renderCustomPanel Function that returns panel element.
Example
WebViewer(...)
  .then(function(instance) {
    var myCustomPanel = {
      tab:{
        dataElement: 'customPanelTab',
        title: 'customPanelTab',
        img: 'https://www.pdftron.com/favicon-32x32.png',
      },
      panel: {
        dataElement: 'customPanel',
        render: function() {
          var div = document.createElement('div');
          div.innerHTML = 'Hello World';
          return div;
        }
      }
    };

    instance.UI.setCustomPanel(myCustomPanel);
  });

<static> setCustomSettings(customSettings)

Set custom settings shown in Advanced Setting tab in Settings modal. A custom setting item includes a label, a description, and a toggle button.
Parameters:
Name Type Description
customSettings Array.<UI.CustomSettingItem> Array of custom setting items.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomSettings([
      {
        label: 'Enable High Contrast Mode',
        description: 'Turns high contrast mode on to help with accessibility.',
        isChecked: () => instance.UI.isHighContrastModeEnabled(),
        onToggled: (enable) => {
          if (enable) {
            instance.UI.enableHighContrastMode();
          } else {
            instance.UI.disableHighContrastMode();
          }
        }
      }
    ]);
  });

<static> setDefaultPrintOptions(options)

Sets the default print options.
Parameters:
Name Type Description
options object The default print options of the document to print. Must be an object.
Properties
Name Type Argument Description
includeComments boolean <optional>
 Whether or not will print the documents with the comments
includeAnnotations boolean <optional>
 Whether or not will print the documents with the annotations
maintainPageOrientation boolean <optional>
 Whether or not will maintain the pages orientation as set in the webviewer
Example
WebViewer(...) .then(function(instance) {
  instance.UI.setDefaultPrintOptions({ includeComments: true, includeAnnotations: true });
});

<static> setDisplayedSignaturesFilter(filterFunction)

Accepts a function that filters what saved signatures will be displayed in the signature annotation preset. Changing this function will instantly changes signatures displayed in the preset.
Parameters:
Name Type Description
filterFunction UI.SignatureFilterFunction The function that will be used to filter signatrues displayed in the preset
Example
Webviewer(...)
  .then(instance => {
    // Only signatures that have a value set for the 'isInitial' custom data property will display in the preset
    instance.UI.setDisplayedSignaturesFilter((a) => a.getCustomData('isInitial'));
  });

<static> setFitMode(fitMode)

Sets the fit mode of the viewer.
Parameters:
Name Type Description
fitMode string Fit mode of WebViewer.
See:
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;
    var FitMode = instance.UI.FitMode;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.setFitMode(FitMode.FitWidth);
    });
  });

<static> setGrayscaleDarknessFactor(darknessFactor)

Set Grayscale Darkness Factor for printing in Grayscale
Parameters:
Name Type Description
darknessFactor number Default is '1', '0' is fully black and white
Example
WebViewer(...)
 .then(function(instance) {
    instance.UI.setGrayscaleDarknessFactor(0.5);
  });

<static> setHeaderItems(headerCallback)

Customize header. Refer to Customizing header for details.
Parameters:
Name Type Description
headerCallback UI.headerCallback Callback function to perform different operations on the header.
Examples
// Adding save annotations button to the end of the top header
WebViewer(...)
  .then(function(instance) {
    instance.UI.setHeaderItems(function(header) {
      var myCustomButton = {
        type: 'actionButton',
        img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>',
        onClick: function() {

        }
      }

      header.push(myCustomButton);
    });
  });
// Removing existing buttons from the top header
WebViewer(...)
  .then(function(instance) {
    instance.UI.setHeaderItems(function(header) {
      header.update([]);
    });
  });
// Appending logo to the 'Annotate' toolbar group and shifting existing buttons to the right
WebViewer(...)
  .then(function(instance) {
    instance.UI.setHeaderItems(function(header) {
      header.getHeader('toolbarGroup-Annotate').unshift({
        type: 'customElement',
        render: function() {
          var logo = document.createElement('img');
          logo.src = 'https://www.pdftron.com/downloads/logo.svg';
          logo.style.width = '200px';
          logo.style.marginLeft = '10px';
          logo.style.cursor = 'pointer';
          logo.onclick = function() {
            window.open('https://www.pdftron.com', '_blank');
          }
          return logo;
        }
      }, {
        type: 'spacer'
      });
    });
  });
// Moving the line tool from the 'Shapes' toolbar group to the 'Annotate' toolbar group
WebViewer(...)
  .then(function(instance) {
    instance.UI.setHeaderItems(function(header) {
      header.getHeader('toolbarGroup-Annotate').push({ type: 'toolGroupButton', toolGroup: 'lineTools', dataElement: 'lineToolGroupButton', title: 'annotation.line' });
      header.getHeader('toolbarGroup-Shapes').delete(6);
    });
  });

<static> setHighContrastMode(useHighContrastMode)

Turns high contrast mode on or off to help with accessibility.
Parameters:
Name Type Description
useHighContrastMode boolean If true then the UI will use high contrast colors to help with accessibility.
Deprecated:
  • since version 8.0. Use enableHighContrastMode or disableHighContrastMode Instead
Example
// Using predefined string
WebViewer(...)
  .then(function(instance) {
    instance.UI.setHighContrastMode(true);
  });

<static> setIconColor(toolName, colorPalette)

Sets the color palette that will be used as a tool button's icon color.
Parameters:
Name Type Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
colorPalette string The palette which will be used as a tool button's icon color. One of 'text', 'border' and 'fill'.
Example
WebViewer(...)
  .then(function(instance) {
    // sets the color in fill palette to be used as freetext tool button's icon color
    // by default freetext tool button will use the color in text palette as its icon color
    instance.UI.setIconColor('AnnotationCreateFreeText', 'fill')
  });

<static> setLanguage(language)

Set the language of WebViewer UI.
Parameters:
Name Type Description
language string The language WebViewer UI will use. By default, following languages are supported: en, zh_cn, fr.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setLanguage('fr'); // set the language to French
  });

<static> setLayoutMode(layoutMode)

Sets the layout mode of the viewer.
Parameters:
Name Type Description
layoutMode string Layout mode of WebViewerInstance UI.
See:
Example
WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;
    const LayoutMode = instance.UI.LayoutMode;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.setLayoutMode(LayoutMode.FacingContinuous);
    });
  });

<static> setMaxSignaturesCount( [maxSignaturesCount])

Set the number of signatures that can be stored in the WebViewer UI (default is 4)
Parameters:
Name Type Argument Default Description
maxSignaturesCount number <optional>
 4 Number of signature webViewer can store
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setMaxSignaturesCount(5); // allow up to 5 stored signatures
  });

<static> setMaxZoomLevel(zoomLevel)

Sets the maximum zoom level allowed by the UI. Default is 9999%.
Parameters:
Name Type Description
zoomLevel string | number Zoom level in either number or percentage.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setMaxZoomLevel('150%'); // or setMaxZoomLevel(1.5)
  });

<static> setMeasurementUnits(units)

Sets the units that will be displayed in the measurement tools' styles popup Valid units are: 'mm', 'cm', 'm', 'km', 'mi', 'yd', 'ft', 'in', 'pt'
Parameters:
Name Type Description
units Object an object which contains the from units and to units
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setMeasurementUnits({
      from: ['in', 'cm', 'm'],
      to: ['cm', 'm', 'km']
    });
  });

<static> setMinZoomLevel(zoomLevel)

Sets the minimum zoom level allowed by the UI. Default is 5%.
Parameters:
Name Type Description
zoomLevel string | number Zoom level in either number or percentage.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setMinZoomLevel('10%'); // or setMinZoomLevel(0.1)
  });

<static> setNoteDateFormat(format)

Sets the format for displaying the date when a note is create/modified. A list of formats can be found dayjs API.
Parameters:
Name Type Description
format string The format of date to display
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setNoteDateFormat('DD.MM.YYYY HH:MM');
  });

<static> setNotesPanelSortStrategy(sortStrategy)

Sets a sorting algorithm for the Notes Panel.
Parameters:
Name Type Description
sortStrategy string Name of the sort strategy algorithm. Check UI.NotesPanelSortStrategy for the options or use your own strategy.
See:
Example
WebViewer(...)
  .then(function(instance) {
    const sortStrategy = instance.UI.NotesPanelSortStrategy;
    instance.UI.setNotesPanelSortStrategy(sortStrategy.TYPE); // sort notes by type
  });

<static> setPageLabels(pageLabels)

Sets page labels that will be displayed in UI. You may want to use this API if the document's page labels start with characters/numbers other than 1.
Parameters:
Name Type Description
pageLabels Array.<string> Page labels that will be displayed in UI.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.setPageLabels(['i', 'ii', 'iii', '4', '5']); // assume a document has 5 pages
    });
  });

<static> setPageReplacementModalFileList(list)

Add a list of documents to the dropdown element of Page Replacement modal and provide a way to retreive document for displaying Page Replacement modal.
Parameters:
Name Type Description
list Array An array of object for selection element. Object must have "id", "filename" properties and "onSelect" method.
Example
WebViewer(...)
  .then(function(instance) {
    const list = [
      {id: '12', filename: 'file-one.pdf'},
      {id: '13', filename: 'file-two.pdf'},
      {id: '14', filename: 'foobar.pdf'}
    ];

    const options = list.map(item => {
      // Add "onSelect" method to each item, and return Document instance
      item.onSelect = () => instance.Core.createDocument('https://localhost/files/webviewer-demo.pdf');
      return item;
    });

    instance.UI.setPageReplacementModalFileList(options);
  });

<static> setPresetCropDimensions(presetName, newPreset)

Sets preset crop dimensions to be used when selecting a preset crop in the document cropping popup
Parameters:
Name Type Description
presetName string The name of a current preset or the name to give to a new preset
newPreset object A set of dimensions to use for a preset crop
Properties
Name Type Description
yOffset number The amount of inches to move the cropped area from the top of the page
height number The height of the area to crop the page to in inches
xOffset number The amount of inches to move the cropped area from the left of the page
width number The width of the area to crop the page to in inches
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setPresetCropDimensions('Letter', {'yOffset': 0, 'height': 11, 'xOffset': 0, 'width': 8.5});
  });

<static> setPresetNewPageDimensions(presetName, newPreset)

Sets preset page dimensions to be used when selecting a page size in the Insert Page Modal
Parameters:
Name Type Description
presetName string The name of a current preset or the name to give to a new preset
newPreset object A set of dimensions to use for a preset new page
Properties
Name Type Description
height number The height of the new page in inches
width number The width of the new page in inches
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setPresetNewPageDimensions('Letter', {'height': 11, 'width': 8.5});
  });

<static> setPrintedNoteDateFormat(format)

Sets the format for displaying the date when a note is printed. A list of formats can be found dayjs API.
Parameters:
Name Type Description
format string The format of date to display
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setPrintedNoteDateFormat('DD.MM.YYYY HH:MM');
  });

<static> setPrintQuality(quality)

Sets the print quality. Higher values are higher quality but takes longer to complete and use more memory. The viewer's default quality is 1.
Parameters:
Name Type Description
quality number The quality of the document to print. Must be a positive number.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setPrintQuality(2);
  });

<static> setSelectedTab(id, dataElement)

Sets the currently selected tab of a Tabs component.
Parameters:
Name Type Description
id string The id of the Tabs component to set.
dataElement string The 'dataElement' attribute of the TabPanel component to select.
Example
WebViewer(...)
  .then(function(instance) {
    // Set the currently selected tab of 'signatureModal' to be the 'Type' panel.
    instance.UI.setSelectedTab('signatureModal', 'textSignaturePanelButton'); //'inkSignaturePanelButton', 'imageSignaturePanelButton'
    // Set the currently selected tab of 'linkModal' to be the 'Page' panel.
    instance.UI.setSelectedTab('linkModal', 'PageNumberPanelButton'); //'URLPanelButton'
    // Set the currently selected tab of 'rubberStampTab' to be the 'Custom' panel.
    instance.UI.setSelectedTab('rubberStampTab', 'customStampPanelButton'); //'standardStampPanelButton'
  });

<static> setSignatureFonts(fonts)

Set the fonts that are used when typing a signature in the signature dialog.
Parameters:
Name Type Description
fonts Array.<string> | UI.setSignatureFontsCallback An array of font families.
Example
// 6.1
WebViewer(...)
  .then(function(instance) {
    instance.UI.setSignatureFonts(['GreatVibes-Regular']);
    instance.UI.setSignatureFonts(currentFonts => [
      ...currentFonts,
      'sans-serif',
    ]);
  });

<static> setSwipeOrientation(swipeOrientation)

Sets the swipe orientation between pages of WebViewer UI on mobile devices. Default is horizontal.
Parameters:
Name Type Description
swipeOrientation string The swipe orientation to navigate between pages. Available orientations are: horizontal, vertical and both.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setSwipeOrientation('vertical'); // set the swipe orientation to vertical.
  });

<static> setTheme(theme)

Sets the theme of WebViewer UI. Please note that this does not work in IE11.
Parameters:
Name Type Description
theme string Theme of WebViewerInstance UI.
See:
Example
WebViewer(...)
  .then(function(instance) {
    const theme = instance.UI.Theme;
    instance.UI.setTheme(theme.DARK);
  });

<static> setToolbarGroup(groupDataElement [, pickTool])

Sets the current active toolbar group.
Parameters:
Name Type Argument Description
groupDataElement string The groups dataElement. Default values are: toolbarGroup-View, toolbarGroup-Annotate, toolbarGroup-Shapes, toolbarGroup-Insert, toolbarGroup-Measure, toolbarGroup-Edit, toolbarGroup-Forms
pickTool boolean <optional>
 If true, after setting the toolbar group, the last picked tool for the group will be set as the current tool. Defaults to true.
Example
WebViewer(...)
  .then(function(instance) {
    // Change the toolbar group to the `Shapes` group
    instance.UI.setToolbarGroup('toolbarGroup-Shapes');

<static> setToolMode(toolName)

Sets tool mode.
Parameters:
Name Type Description
toolName string | Core.Tools.ToolNames Name of the tool, either from tool names list or the name you registered your custom tool with.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setToolMode('AnnotationEdit');
  });

<static> setTranslations(language, translationObject)

Add/Edit translations data for a specific language
Parameters:
Name Type Description
language string The language code for which you want to add/edit translation data
translationObject Object.<string, string>

A key/value object with the new/updated translations.

The key values of the translation object will be the translation key for the new/updated translation. Refer to the lib/ui/i18n folder to find the existing keys in the translation files

The values of the translation object will be the value of the new/updated translation
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setTranslations('es',
    {
      'option.colorPalette.colorLabel': 'Etiqueta de color', //updates a pre-existing translation data
      'action.newButton': 'Nuevo botón' // adds a new translation data
    });
  });

<static> setWv3dPropertiesPanelModelData(modelData)

Set the WV3D Properties Panel with an array of model data objects
Parameters:
Name Type Description
modelData array Array of objects defining 3d metadata properties.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setWv3dPropertiesPanelModelData([{'name':'roof', 'height':'55cm'}, {'name':'wall', 'height':'100cm'}]);
  });

<static> setWv3dPropertiesPanelSchema(schema)

Set the configuration schema for the WV3D Properties Panel
Parameters:
Name Type Description
schema object Object containing options for configuring the 3d properties panel.
Properties
Name Type Description
headerName string Sets the Title Header
defaultValues object Defines the key/value pairs that will appear under the title, outside of a group.
groups object Defines the collapsible groups that appear below the default values.
groupOrder array Defines the order of the groups. If a group is not included it is appended to the end of the defined groups.
removeEmptyRows boolean Defines whether to remove rows that contain empty string values.
removeEmptyGroups boolean Defines whether to remove groups that contain only empty string values.
createRawValueGroup boolean Defines whether to create a final group that has all the raw values.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.setWv3dPropertiesPanelSchema({
      headerName: 'Name',
      defaultValues: {
        Description: 'Description',
        GlobalID: 'GlobalId',
        Handle: 'handle',
        EmptyRow1: 'EmptyRow1',
      },
      groups: {
        SampleGroup01: {
          SampleField01: 'Sample01',
          SampleField02: 'Sample02',
          SampleField03: 'Sample03',
          EmptyRow2: 'EmptyRow2',
          GrossFootprintArea: 'GrossFootprintArea',
          GrossSideArea: 'GrossSideArea',
          GrossVolume: 'GrossVolume',
        },
        SampleGroup02: {
          SampleField01: 'Sample01',
          SampleField02: 'Sample02',
          SampleField03: 'Sample03',
        },
        SampleGroup03: {
          ObjectType: 'Elephants',
          EmptyRow3: 'Tigers',
          ObjectPlacement: 'Bears',
        },
      },
      groupOrder: ['Dimensions', 'RandomStuff'],
      removeEmptyRows: false,
      removeEmptyGroups: true,
      createRawValueGroup: true,
    })
  });

<static> setZoomLevel(zoomLevel)

Sets zoom level.
Parameters:
Name Type Description
zoomLevel string | number Zoom level in either number or percentage.
Example
WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;

    // you must have a document loaded when calling this api
    docViewer.addEventListener('documentLoaded', function() {
      instance.UI.setZoomLevel('150%'); // or setZoomLevel(1.5)
    });
  });

<static> setZoomStepFactors(zoomStepFactors)

Set the zoom step size for zooming in/out. The API takes an array of zoomStepFactor that contains two properties: step: zoom step size when zooming in/out. It could be either percentage in a string or a number, ex. 50, '50', or '50%' all indicates 50%. startZoom: The zoom level that the step starts to apply. It could be either percentag in a string or a number, ex. 200, '200', or '200%' all indicates 200%.
Parameters:
Name Type Description
zoomStepFactors Array.<Object> An array that contains objects of zoomStep and zoom start level. zoomStepFactors must contain at least one zoomStepFactor object that has startZoom: 0
Properties:
Name Type Description
zoomStepFactors[].step number | string Zoom step size as percentage in a string or a number, ex. '50', '50%', or 50 all indicates 50%.
zoomStepFactors[].startZoom number | string Zoom level that the zoom step size starts to apply. It could be percentage in a string or a number, ex. '200', '200%', or 200 all indicates 200%.
Example
WebViewer(...)
  .then(function(instance) {
    const documentViewer = instance.Core.documentViewer;
    // you must have a document loaded when calling this api
    documentViewer.addEventListener('documentLoaded', function() {
      instance.UI.setZoomStepFactors([
        {
          step: '25', // indicates 25%, also accepts '25%'
          startZoom: '0'
        },
        {
          step: 50, // indicates 50%
          startZoom: 200 // indicates the step is 50% after zoom level 200%
        },
      ]);
    });
  });

<static> showErrorMessage(message)

Displays the custom error message
Parameters:
Name Type Description
message string An error message
Deprecated:
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.showErrorMessage('My error message');
  });

<static> showFormFieldIndicators()

Show form field indicators to help navigate or guide users through the process of form filling.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.showFormFieldIndicators();
  });

<static> showOutlineControl()

Show outline control
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.showOutlineControl();
  });

<static> showWarningMessage(options)

Displays the custom error message
Parameters:
Name Type Description
options string | object Warning string message to display or an object for controlling the warning popup
Properties
Name Type Description
confirmBtnText string The text that will be rendered in the confirm button
title string The title of the modal
message string The text that will rendered in the body of the modal
onConfirm function The callback function that will be invoked when the user clicks the Confirm button. The callback must return a Promise that resolves.
onCancel function The callback function that will be invoked when the user clicks the Cancel button. The callback must return a Promise that resolves.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.showWarningMessage({
      title: 'This is my warning modal title',
      message: 'This is the body of my modal',
      confirmBtnText: 'Okay!',
      onConfirm: () => {
        console.log('The user clicked the confirm button');
        return Promise.resolve();
      },
      onCancel: () => {
        console.log('The user clicked the cancel button');
        return Promise.resolve();
      },
    });
  });

<static> signSignatureWidget(signatureWidget [, signature])

Signs a specified signature widget with a specified signature. If no signature is provided, select an available signature or start the process to create a new one, and then use it to sign the signature widget.
Parameters:
Name Type Argument Description
signatureWidget Core.Annotations.SignatureWidgetAnnotation The signature widget to sign.
signature Core.Annotations.FreeHandAnnotation | Core.Annotations.StampAnnotation <optional>
 The signature annotation to sign with.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.signSignatureWidget(signatureWidget, signature);
  });

<static> syncNamespaces(namespaces, otherInstances)

Syncs the namespaces under the Core namespace for the window, this instance, as well as others instances.

This is required for interoperability between multiple instances of WebViewer since each loaded instance ends up with different class references despite sharing the same name.
Parameters:
Name Type Argument Description
namespaces WebViewerInstance | object The object containing the namespaces that will be used for all instances. This can be a WebViewer instance or an object with the namespaces inside.
Properties
Name Type Argument Description
PDFNet object <optional>
 The PDFNet namespace. This is probably the most common that needs to be synced.
Actions object <optional>
 The Actions namespace.
Annotations object <optional>
 The Annotations namespace.
Math object <optional>
 The Math namespace.
Tools object <optional>
 The Tools namespace.
otherInstances WebViewerInstance <repeatable>
 Other instances that will share the same namespaces.
Example
// Loaded PDFNet directly
const Core = window.Core;
const PDFNet = Core.PDFNet;
Core.setWorkerPath('../../../lib/core');
Core.enableFullPDF();
...
WebViewer(...)
  .then(function(instance) {
    // Force this instance to use the loaded PDFNet instead of the one loaded specific to this instance
    instance.UI.syncNamespaces({ PDFNet });
    // instance.UI.syncNamespaces({ PDFNet }, instance2, instance3);  // Alternative; instance, instance2, and instance3 will share the same PDFNet namespace.
    ...
  });

<static> toggleElement(dataElement)

Toggles a visibility state of the element to be visible/hidden. Note that toggleElement works only for panel/overlay/popup/modal elements.
Parameters:
Name Type Description
dataElement string data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.
Deprecated:
  • Since version 8.0. Use toggleElementVisibility instead.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.toggleElement('leftPanel'); // open LeftPanel if it is closed, or vice versa
  });

<static> toggleElementVisibility(dataElement)

Toggles the visibility of the element to be visible/hidden. Note that toggleElementVisibility works only for panel/overlay/popup/modal elements.
Parameters:
Name Type Description
dataElement string data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.toggleElementVisibility('leftPanel'); // open LeftPanel if it is closed, or vice versa
  });

<static> toggleFullScreen()

Toggles full scree mode of the browser.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.toggleFullScreen();
  });

<static> toggleReaderMode()

Toggles Reader mode of the viewer. Note that Reader mode only works with fullAPI enabled.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.toggleReaderMode();
  });

<static> unregisterTool(toolName)

Unregisters tool in the document viewer tool mode map, and removes the button object.
Parameters:
Name Type Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.unregisterTool('MyTool');
  });

<static> unselectThumbnailPages(pageNumbers)

Unselect selected thumbnails
Parameters:
Name Type Description
pageNumbers Array.<number> array of page numbers to unselect
Example
// 6.1 and after
WebViewer(...)
  .then(function(instance) {
    const pageNumbersToUnselect = [1, 2];
    instance.UI.unselectThumbnailPages(pageNumbersToUnselect);
  });

<static> updateElement(dataElement, props)

Update an element in the viewer.
Parameters:
Name Type Description
dataElement string the data element of the element that will be updated. Only the data element of HTML elements that have 'Button' in the class name will work.
props object An object that is used to override an existing item's properties.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.updateElement('thumbnailsPanelButton', {
      img: 'path/to/image',
      title: 'new_tooltip',
    })
  });

<static> updateTool(toolName [, properties])

Update existing tool's properties.
Parameters:
Name Type Argument Description
toolName string Name of the tool, either from tool names list or the name you registered your custom tool with.
properties object <optional>
 Tool properties
Properties
Name Type Argument Description
buttonImage string <optional>
 Path to an image or base64 data for the tool button
buttonName string <optional>
 Name of the tool button that will be used in data-element
buttonGroup string <optional>
 Group of the tool button belongs to
tooltip string <optional>
 Tooltip of the tool button
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.updateTool('AnnotationCreateSticky', {
      buttonImage: 'https://www.pdftron.com/favicon-32x32.png'
    });
  });

<static> useEmbeddedPrint( [use])

Use/not use embedded printing. Only applicable to Chrome. The printing process will be faster and the quality might be higher when using Chrome's native printing. You may not want to use embedded printing if there are custom annotations in your document.
Parameters:
Name Type Argument Default Description
use boolean <optional>
 true Whether or not to use embedded printing
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.useEmbeddedPrint(false); // disable embedded printing
  });

<static> willUseEmbeddedPrinting()

Returns whether Webviewer will use/not use embedded printing. Will return false if the browser doesn't support embedded printing or if UI.useEmbeddedPrint is set to false.
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.willUseEmbeddedPrinting(); // Returns true/false if embedded printing is supported and enabled
  });

Type Definitions

addTabOptions

Type:
  • Object
Properties:
Name Type Argument Description
loadDocumentOptions UI.loadDocumentOptions <optional>
 The document loading options
setActive boolean <optional>
 Whether to set the new tab as active immediately after adding it (default: true)
saveCurrentActiveTabState boolean <optional>
 Whether to save the current tab annotations, scroll position, and zoom level before adding the new tab (only used when setActive=true) (default: true)

CustomApplyRedactionsHandler(annotations, originalApplyRedactionsFunction)

Parameters:
Name Type Description
annotations Array.<Core.Annotations.Annotation>
originalApplyRedactionsFunction function The original applyRedactions function

CustomMultiViewerAcceptedFileFormats(acceptedFileFormats)

Parameters:
Name Type Description
acceptedFileFormats Array.<string> The file formats to support when accepting files in multiviewer mode

CustomMultiViewerSyncHandler(primaryDocumentViewerKey, removeHandlerFunctions)

Parameters:
Name Type Description
primaryDocumentViewerKey number The primary documentViewerKey to be used when syncing
removeHandlerFunctions Array.<function()> The event listeners to remove when syncing is finished

CustomNoteSelectionFunction(annotation)

Parameters:
Name Type Description
annotation Core.Annotations.Annotation A reference to the annotation object associated with the note

CustomSettingItem

Type:
  • Object
Properties:
Name Type Description
label string Custom setting label
description string Custom setting description
isChecked function | boolean Whether the toggle button is checked.
onToggled function The callback function triggered when the toggle button is clicked.

disableReplyForAnnotationsCallback(annotation)

Callback that gets passed to disableReplyForAnnotations.
Parameters:
Name Type Description
annotation Core.Annotations.Annotation Annotation object
Returns:
True if replies for the annotation passed in should be disabled. False otherwise.
Type
boolean

filterAnnotation(annotation)

Callback that gets passed to setCustomNoteFilter.
Parameters:
Name Type Description
annotation Core.Annotations.Annotation Annotation object
Returns:
Whether the annotation should be kept.
Type
boolean

getSeparatorContent(prevNote, currNote, options)

Callback that gets passed to `sortStrategy.getSeparatorContent` in addSortStrategy.
Parameters:
Name Type Description
prevNote Core.Annotations.Annotation Previous note (annotation)
currNote Core.Annotations.Annotation Current note (annotation)
options object Optional values
Properties
Name Type Description
pageLabels Array.<string> List of page label
Returns:
Content to be rendered in a separator
Type
string | number

getSortedNotes(notes)

Callback that gets passed to `sortStrategy.getSortedNotes` in addSortStrategy.
Parameters:
Name Type Description
notes Array.<Core.Annotations.Annotation> List of unsorted notes (annotations)
Returns:
Sorted notes (annotations)
Type
Array.<Core.Annotations.Annotation>

headerCallback(header)

Callback that gets passed to setHeaderItems.
Parameters:
Name Type Description
header UI.Header Header instance with helper functions

loadDocumentOptions

Type:
  • Object
Properties:
Name Type Argument Description
extension string <optional>
 The extension of the file. If file is a blob/file object or a URL without an extension then this is necessary so that WebViewer knows what type of file to load.
filename string <optional>
 Filename of the document, which is used when downloading the PDF.
customHeaders object <optional>
 An object of custom HTTP headers to use when retrieving the document from the specified url.
webViewerServerCustomQuerypropertyeters object <optional>
 An object of custom query propertyeters to be appended to every WebViewer Server request.
documentId string <optional>
 Unique id of the document.
withCredentials boolean <optional>
 Whether or not cross-site requests should be made using credentials.
cacheKey string <optional>
 A key that will be used for caching the document on WebViewer Server.
officeOptions object <optional>
 An object that contains the options for an Office document.
Properties
Name Type Argument Description
templateValues Core.TemplateData <optional>
 If set, will perform template replacement with the data specified by this parameter
doTemplatePrep boolean <optional>
 If set, it will interpret the office document as a template document and compile all of the template tags in the document
disableBrowserFontSubstitution boolean <optional>
 By default, office viewing takes a lightweight approach to font substitution, allowing the browser to select fonts when they are not embedded in the document itself. While this means that WebViewer has access to all the fonts on the user's system, it also means that an office document may have a different "look" on different systems (depending on the fonts available) and when it is converted to PDF (as the PDF conversion routine cannot obtain low-level access to user fonts, for security reasons). disableBrowserFontSubstitution prevents this browser substitution, forcing the WebViewer backend to handle all fonts. This means that viewing and conversion to PDF will be 100% consistent from system-to-system, at the expense of a slightly slower initial viewing time and higher bandwidth usage. Using https://www.pdftron.com/documentation/web/faq/self-serve-substitute-fonts/ along with this option allows you to fully customize the substitution behaviour for all office files.
formatOptions object <optional>
 An object that contains formatting options for an Office document. Same options as allowed here Core.PDFNet.Convert.OfficeToPDFOptions.
Properties
Name Type Argument Description
applyPageBreaksToSheet boolean <optional>
 If true will split Excel worksheets into pages so that the output resembles print output.
displayChangeTracking boolean <optional>
 If true will display office change tracking markup present in the document (i.e, red strikethrough of deleted content and underlining of new content). Otherwise displays the resolved document content, with no markup. Defaults to true.
excelDefaultCellBorderWidth number <optional>
 Cell border width for table cells that would normally be drawn with no border. In units of points. Can be used to achieve a similar effect to the "show gridlines" display option within Microsoft Excel.
excelMaxAllowedCellCount number <optional>
 An exception will be thrown if the number of cells in an Excel document is above the value. Used for early termination of resource intensive documents. Setting this value to 250000 will allow the vast majority of Excel documents to convert without issue, while keeping RAM usage to a reasonable level. By default there is no limit to the number of allowed cells.
locale string <optional>
 Sets the value for Locale in the options object ISO 639-1 code of the current system locale. For example: 'en-US', 'ar-SA', 'de-DE', etc.
password string <optional>
 A string that will be used to as the password to load a password protected document.
onError function <optional>
 A callback function that will be called when error occurs in the process of loading a document. The function signature is `function(e) {}`
xodOptions object <optional>
 An object that contains the options for a XOD document.
xoddecrypt boolean <optional>
 Function to be called to decrypt a part of the XOD file. For default XOD AES encryption pass Core.Encryption.decrypt.
xoddecryptOptions boolean <optional>
 An object with options for the decryption e.g. {p: "pass", type: "aes"} where is p is the password.
xodstreaming boolean <optional>
 A boolean indicating whether to use http or streaming PartRetriever, it is recommended to keep streaming false for better performance. https://www.pdftron.com/documentation/web/guides/streaming-option.
xodazureWorkaround boolean <optional>
 Whether or not to workaround the issue of Azure not accepting range requests of a certain type. Enabling the workaround will add an extra HTTP request of overhead but will still allow documents to be loaded from other locations.
xodstartOffline boolean <optional>
 Whether to start loading the document in offline mode or not. This can be set to true if the document had previously been saved to an offline database using WebViewer APIs. You'll need to use this option to load from a completely offline state.

NoteTransformFunction(wrapperElement, state, createElement)

Parameters:
Name Type Description
wrapperElement HTMLElement A reference to the DOM node that wraps the note. You can use this to query select child elements to mutate (see the examples below)
state object The state of the note. Contains two properties, 'annotation' and 'isSelected'
Properties
Name Type Description
annotation Core.Annotations.Annotation A reference to the annotation object associated with the note
isSelected boolean whether or not the note is currently expanded
createElement function A utility function that should be used when creating DOM nodes. This is a replacement for `document.createElement`. Accepts the same parameters as `document.createElement`. Using document.createElement instead of this function will cause your DOM nodes to not be cleaned up on subsequent renders.

PaletteOption

Properties:
Name Type Description
toolNames Array.<string> Tools that will have the same colors in the palette.
colors Array.<string> An array of hex colors. Use 'transparency' for a transparent color.

RedactionSearchPattern

Type:
  • Object
Properties:
Name Type Argument Description
label string The label to be used for the search pattern in the UI
type string A string representing the type of item being searched for. For example, if searching for postal codes, this could be 'postalCode'. This is used to determine which icon will be used to render the result in the search panel.
icon string <optional>
 The icon to be used for the search pattern in the search dropdown for the UI and the redaction panel for this type of search. Can be an inline SVG, or the name of an icon included in the WebViewer UI icon set. If no icon is passed, the default icon for text searches will be used.
regex RegExp The regex to be used for the search pattern

renderCustomModal()

Callback that gets passed to `options.render` in addCustomModal.
Returns:
Modal element. If string is returned, it will be displayed as is inside the modal. Accepts React components as the return value as well.
Type
HTMLElement | string

renderCustomPanel()

Callback that gets passed to `options.panel.render` in addPanel.
Returns:
Panel element.
Type
HTMLElement

renderCustomPanel()

Callback that gets passed to `options.panel.render` in setCustomPanel.
Returns:
Panel element.
Type
HTMLElement

searchListener(searchValue, options, results)

Callback that gets passed to addSearchListener.
Parameters:
Name Type Description
searchValue string Search value
options object Search options object, which includes 'caseSensitive', 'wholeWord', 'wildcard' and 'regex'
results Array.<object> Search results

setSignatureFontsCallback(fonts)

Parameters:
Name Type Description
fonts Array.<string> current font families
Returns:
fonts to set.
Type
Array.<string>

shouldRenderSeparator(prevNote, currNote)

Callback that gets passed to `sortStrategy.shouldRenderSeparator` in addSortStrategy.
Parameters:
Name Type Description
prevNote Core.Annotations.Annotation Previous note (annotation)
currNote Core.Annotations.Annotation Current note (annotation)
Returns:
Whether a separator should be rendered or not
Type
boolean

SignatureFilterFunction(annotation, index)

Parameters:
Name Type Description
annotation Core.Annotations.Annotation A signature annotation found in the SignatureCreateTool saved signatures list
index number An optional parameter for the index of the annotaiton parameter within the SignatureCreateTool saved signatures list
Returns:
Whether or not a signature annotation should be included in the annotation preset
Type
boolean

Theme

Contains string enumeration for all themes for WebViewer. They are used to set the viewer theme.
Properties:
Name Type Description
DARK string The theme where the WebViewer will be dark.
LIGHT string The theme where the WebViewer will be light.
Example
WebViewer(...)
  .then(function(instance) {
    const theme = instance.UI.Theme;
    instance.UI.setTheme(theme.DARK);
  });

Events

annotationFilterChanged

Triggered when annotation filter in the notes panel has changed. Returns empty arrays if the filter is cleared.
Type: object
Properties:
Name Type Description
types Array.<string> Types filter
authors Array.<string> Author filter
colors Array.<string> Color filter
statuses Array.<string> Status filter

beforeTabChanged

Triggered before the UI switches tabs
Type: object
Properties:
Name Type Description
currentTab object An object containing the properties for the currently active tab (null if no currently active tab)
Properties
Name Type Description
id number The id of the tab being switched to
src string Source of current tab
options string Tab load options
annotationsChanged boolean True if the annotations have been changed since loading the tab
nextTab object An object containing the properties for the tab being switched to
Properties
Name Type Description
id number The id of the tab being switched to
src string Source of current tab
options string Tab load options

compareAnnotationsLoaded

Triggered when the compare annotations are loaded

documentLoaded

Triggered when a new document has been loaded.

documentMerged

Triggered when a new document has been merged into the thumbnails panel.
Type: object
Properties:
Name Type Description
filename string File name
pages Array.<number> Page numbers

dragOutline

Triggered when dragging Outline item.

dragOutline

Triggered when dropping Outline item.

fileDownloaded

Triggered when the file has finished downloading.

finishedSavingPDF

Deprecated:

fullscreenModeToggled

Triggered when fullscreen mode is toggled.
Type: object
Properties:
Name Type Description
isInFullscreen boolean Whether in fullscreen mode or not.

languageChanged

Triggered when the language changes in WebViewer via setLanguage
Type: object
Properties:
Name Type Description
prev string The previous language
next string The new language that was just set

loaderror

Triggered when there is an error loading the document.
Parameters:
Name Type Description
err object The error

multiViewerReady

Triggered when MultiViewerMode is enabled and ready to be interacted with

outlineBookmarksChanged

Triggered when outline bookmarks have changed.
Parameters:
Name Type Description
bookmarkData object
Properties
Name Type Description
bookmark object The changed bookmark
Properties
Name Type Description
id string Changed outline bookmark id
name string Changed outline bookmark name
path string Changed outline path in the outline tree
action string The action that triggered the outline bookmarks change

panelResized

Triggered when the panels are resized.
Type: object
Properties:
Name Type Description
element string DataElement name
width number New panel width

selectedThumbnailChanged

Triggered when the selected thumbnail changed.
Parameters:
Name Type Description
selectedThumbnailPageIndexes array The array of indexes of currently selected thumbnails

tabAdded

Triggered when a Tab is added
Type: object
Properties:
Name Type Description
id number The id of the tab being added
src string Source of current tab
options string Tab load options

tabDeleted

Triggered when a Tab is deleted
Type: object
Properties:
Name Type Description
id number The id of the tab being deleted
src string Source of current tab
options string Tab load options

tabMoved

Triggered when a Tab is moved
Type: object
Properties:
Name Type Description
id number The id of the tab being moved
src string Source of moved tab
options string Tab load options
prevIndex number Previous index of tab
newIndex number New index of tab

themeChanged

Triggered when the UI theme has changed.
Parameters:
Name Type Description
theme string The new UI theme

thumbnailDragged

Triggered when thumbnail(s) are dragged in the thumbnail panel

thumbnailDropped

Triggered when dragged thumbnail(s) are dropped to a new location in the thumbnail panel
Type: object
Properties:
Name Type Description
pageNumbersBeforeMove Array.<number> The array of page numbers to be moved
pageNumbersAfterMove Array.<number> The array of page numbers of where thumbnails being dropped
numberOfPagesMoved number Number of page(s) being moved

toolbarGroupChanged

Triggered when the toolbar group has changed.
Parameters:
Name Type Description
toolbarGroup string The new toolbar group

userBookmarksChanged

Triggered when user bookmarks have changed.
Parameters:
Name Type Description
bookmarks object The new bookmarks

viewerLoaded

Triggered when the viewer has loaded.

visibilityChanged

Triggered when the visibility of an element has changed.
Type: object
Properties:
Name Type Description
element string DataElement name
isVisible boolean The new visibility