# 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

### Namespaces

Fonts
Hotkeys
NotesPanel
TabManager
ThumbnailsPanel
VerificationOptions

### Members

#### <static> annotationPopup

  An instance of Popup that can be used to edit items in the annotation popup component

  ##### Type:

  - UI.Popup
  Implements:
    - UI.Popup

  ##### Example

      WebViewer(...)
        .then(function (instance) {
          instance.UI.annotationPopup.someAPI();
        });

#### <static> contextMenuPopup

  An instance of Popup that can be used to edit items in the context menu popup component

  ##### Type:

  - UI.Popup
  Implements:
    - UI.Popup

  ##### 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

  ##### 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

  ##### 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

  ##### Type:

  - Class.<UI.Hotkeys>
  See:
    - UI.Hotkeys

#### <static> iframeWindow

  WebViewer iframe window object

  ##### Type:

  - Window

  ##### Example

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

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

  ##### Type:

  - UI.MentionsManager
  See:
    - UI.MentionsManager

#### <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> pageManipulationsOverlay

  An instance of PageManipulationsOverlay that can be used to edit the items included in the overlay

  ##### Type:

  - UI.PageManipulationOverlay
  Implements:
    - UI.PageManipulationOverlay

  ##### Example

      WebViewer(...)
        .then(function (instance) {
          instance.UI.pageManipulationOverlay.someAPI();
        })

#### <static> RedactionSearchPatterns

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

  ##### Type:

  - string

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

  ##### Type:

  - UI.MenuOverlay
  Implements:
    - UI.MenuOverlay

  ##### 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

  ##### Type:

  - UI.Popup
  Implements:
    - UI.Popup

  ##### 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

  ##### Type:

  - UI.ThumbnailControlMenu
  Implements:
    - UI.ThumbnailControlMenu

  ##### 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:
    - VerificationOptions

### Methods

#### <static> addCustomModal(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, 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

#### <static> addCustomModal(options)

  Add custom modal element to WebViewer.
  Controlling custom modals is done using 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 ran in iframe and making options.disableEscapeKeyDown automatically work, iframe must be the active element. This can be done by setting focus to 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> 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>span').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> 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:
    - UI.Feature

  ##### 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> 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> 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:
    - UI.Feature

  ##### 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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> 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:
    - since version 8.5. Use UI.addCustomModal Instead

#### <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> 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:
    - UI.FitMode

  ##### 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> 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:
    - UI.LayoutMode

  ##### 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 (default is 2)

  ##### Parameters:

  Name | Type | Argument | Default | Description
  --- | --- | --- | --- | ---
  `maxSignaturesCount` | number | <optional> | 2 | 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:
    - UI.NotesPanelSortStrategy

  ##### 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> 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:
    - UI.Theme

  ##### 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 | A key/value object with the new/updated translations ###### Properties
  Name | Type | Description
  --- | --- | ---
  `key` | string | A key value for the new/updated translation. Refer to the lib/ui/i18n folder to find the existing keys in the translation files
  `value` | string | A 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> showErrorMessage(message)

  Displays the custom error message

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `message` | string | An error message

  Deprecated:
    - Since version 8.0. Use displayErrorMessage instead.

  ##### Example

      WebViewer(...)
        .then(function(instance) {
          instance.UI.showErrorMessage('My error message');
        });

#### <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> 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

#### CustomNoteSelectionFunction(annotation)

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `annotation` | Core.Annotations.Annotation | A reference to the annotation object associated with the note

#### 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 modal
  Type
    HTMLElement | string

#### 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

#### 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:
    - Since version 8.3. Use fileDownloaded instead

#### fullscreenModeToggled

  Triggered when fullscreen mode is toggled.

  ##### Type: object

  ##### Properties:

  Name | Type | Description
  --- | --- | ---
  `isInFullscreen` | boolean | Whether in fullscreen mode or not.

#### loaderror

  Triggered when there is an error loading the document.

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `err` | object | The error

#### 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

#### Search results