Apryse WebViewer Namespace: UI

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

Example

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

Classes

Header
MentionsManager
MultiPageManipulationControls

Namespaces

Components
Components
Flyouts
Fonts
Hotkeys
NotesPanel
OutlinesPanel
TabManager
ThumbnailsPanel
VerificationOptions

Members

<static> AnnotationKeys

A constant containing keys that identify annotations.

Properties:

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

<static> annotationPopup

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

Implements:

UI.Popup

Example

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

<static> AnnotationStylePopupTabs

The different available style tabs in the annotation popup.

Properties:

Name	Type	Description
`TEXT_COLOR`	string	Indicates the text style tab in the annotation popup window
`STROKE_COLOR`	string	Indicates the stroke color tab in the annotation popup window
`FILL_COLOR`	string	Indicates the fill color tab in the annotation popup window

<static> ClickedItemTypes

Properties:

Name	Type	Description
`BUTTON`	string	button type

<static> contextMenuPopup

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

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_MERGED`	string	UI.Events.documentMerged
`FILE_DOWNLOADED`	string	UI.Events.fileDownloaded
`LOAD_ERROR`	string	UI.Events.loaderror
`DRAG_OUTLINE`	string	UI.Events.dragOutline
`DROP_OUTLINE`	string	UI.Events.dropOutline
`PANEL_RESIZED`	string	UI.Events.panelResized
`THEME_CHANGED`	string	UI.Events.themeChanged
`TOOLBAR_GROUP_CHANGED`	string	UI.Events.toolbarGroupChanged
`SELECTED_THUMBNAIL_CHANGED`	string	UI.Events.selectedThumbnailChanged
`THUMBNAIL_DRAGGED`	string	UI.Events.thumbnailDragged
`THUMBNAIL_DROPPED`	string	UI.Events.thumbnailDropped
`USER_BOOKMARKS_CHANGED`	string	UI.Events.userBookmarksChanged
`OUTLINE_BOOKMARKS_CHANGED`	string	UI.Events.outlineBookmarksChanged
`VIEWER_LOADED`	string	UI.Events.viewerLoaded
`VISIBILITY_CHANGED`	string	UI.Events.visibilityChanged
`FULLSCREEN_MODE_TOGGLED`	string	UI.Events.fullscreenModeToggled
`BEFORE_TAB_CHANGED`	string	UI.Events.beforeTabChanged
`TAB_DELETED`	string	UI.Events.tabDeleted
`TAB_ADDED`	string	UI.Events.tabAdded
`TAB_MOVED`	string	UI.Events.tabMoved
`LANGUAGE_CHANGED`	string	UI.Events.languageChanged
`MULTI_VIEWER_READY`	string	UI.Events.multiViewerReady
`COMPARE_ANNOTATIONS_LOADED`	string	UI.Events.compareAnnotationsLoaded
`TAB_MANAGER_READY`	string	UI.Events.onTabManagerReady
`TOOLTIP_OPENED`	string	UI.Events.tooltipOpened

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.
`InlineComment`	string	A popup that allows to directly comment on the annotation when an annotation is selected.
`RightClickAnnotationPopup`	string	Ability to open the annotation menu popup on right click.
`Print`	string	Ctrl/Cmd + P hotkey and a print button that can be clicked to print the current document.
`Redaction`	string	Redaction tools that can redact text or areas. Need fullAPI to be on to use this feature.
`TextSelection`	string	Ability to select text in a document.
`TouchScrollLock`	string	Lock document scrolling in one direction in mobile devices.
`Copy`	string	Ability to copy text or annotations use Ctrl/Cmd + C hotkeys or the copy button.
`MultipleViewerMerging`	string	Ability to drag and drop pages from one instance of WebViewer into another
`ThumbnailMerging`	string	Ability to drag and drop a file into the thumbnail panel to merge
`ThumbnailReordering`	string	Ability to reorder pages using the thumbnail panel
`PageNavigation`	string	Ability to navigate through pages using mouse wheel, arrow up/down keys and the swipe gesture.
`MouseWheelZoom`	string	Ability to zoom when holding ctrl/cmd + mouse wheel.
`Search`	string	Ctrl/Cmd + F hotkey and a search button that can be clicked to search the current document.
`MathSymbols`	string	Ability to add math symbols in free text editor
`OutlineEditing`	string	Ability to add, move and delete outlines in the outlines panel. This feature is only available when `fullAPI: true` is used.
`NotesPanelVirtualizedList`	string	Ability to use a virtualized list in the note panel. Will limit the number of notes rendered on the DOM
`NotesShowLastUpdatedDate`	string	Show last updated date in notes panel instead of created date
`MultiTab`	string	toggle feature to open multiple documents in the same viewer instance
`MultiViewerMode`	string	toggle feature to activate 2 viewers in Compare Mode. Note that this property name is deprecated. Please use the enterMultiViewerMode and exitMultiViewerMode functions instead.
`SideBySideView`	string	toggle feature to show Side-by-side view in view controls dropdown
`ComparePages`	string	toggle feature to enable Show Comparison button in side-by-side view
`Initials`	string	toggle feature to activate initials signing mode in the Signature Modal
`SavedSignaturesTab`	string	toggle feature to enable the saved signatures tab in the Signature Modal and use it to sign elements.
`WatermarkPanel`	string	toggle feature to enable the watermark panel
`WatermarkPanelImageTab`	string	toggle feature to enable the image tab in watermark panel
`ContentEdit`	string	toggle feature to enable content editing in a pdf document
`LegacyRichTextPopup`	string	Toggle legacy richTextPopup
`Portfolio`	string	Toggle feature to create PDF portfolio and the portfolio panel

Example

WebViewer(...)
 .then(function(instance) {
    var Feature = instance.UI.Feature;
    instance.UI.enableFeatures([Feature.Measurement]);
    instance.UI.disableFeatures([Feature.Copy]);
  });

<static> FeatureFlags

Contains string enums for WebViewer feature flags

Properties:

Name	Type	Description
`CUSTOMIZABLE_UI`	string	Feature flag for the new customizable UI

<static> FitMode

Contains all possible modes for fitting/zooming pages to the viewer. The behavior may vary depending on the LayoutMode.

Properties:

Name	Type	Description
`FitPage`	string	A fit mode where the zoom level is fixed to the width or height of the page, whichever is smaller.
`FitWidth`	string	A fit mode where the zoom level is fixed to the width of the page.
`Zoom`	string	A fit mode where the zoom level is not fixed.

Example

WebViewer(...)
  .then(function(instance) {
    var FitMode = instance.UI.FitMode;
    instance.UI.setFitMode(FitMode.FitWidth);
  });

<static> hotkeys

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

See:

UI.Hotkeys

<static> iframeWindow

WebViewer iframe window object

Example

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

<static> Languages

Contains string enums for the default languages found in WebViewer.

Properties:

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

Example

WebViewer(...).then(function(instance) {
    instance.UI.setLanguage(instance.UI.Languages.FR);
  });

<static> LayoutMode

Contains string enums for all layouts for WebViewer. They are used to dictate how pages are placed within the viewer.

Properties:

Name	Type	Description
`Single`	string	Only the current page will be visible.
`Continuous`	string	All pages are visible in one column.
`Facing`	string	Up to two pages will be visible.
`FacingContinuous`	string	All pages visible in two columns.
`FacingCover`	string	All pages visible in two columns, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)
`FacingCoverContinuous`	string	All pages visible, with an even numbered page rendered first. (i.e. The first page of the document is rendered by itself on the right side of the viewer to simulate a book cover.)

Example

WebViewer(...)
  .then(function(instance) {
    const LayoutMode = instance.UI.LayoutMode;
    instance.UI.setLayoutMode(LayoutMode.Single);
  });

<static> mentions

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

See:

UI.MentionsManager

<static> multiPageManipulationControls

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

Example

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

<static> NotesPanelSortStrategy

Contains string enums for all the possible sorting algorithms available in NotesPanel.

Properties:

Name	Type	Description
`POSITION`	string	Sort notes by position.
`CREATED_DATE`	string	Sort notes by creation date.
`MODIFIED_DATE`	string	Sort notes by last modification date.
`STATUS`	string	Sort notes by status.
`AUTHOR`	string	Sort notes by the author.
`TYPE`	string	Sort notes by type.
`COLOR`	string	Sort notes by color.

Example

WebViewer(...)
  .then(function(instance) {
    const sortStrategy = instance.UI.NotesPanelSortStrategy;
    instance.UI.setNotesPanelSortStrategy(sortStrategy.AUTHOR);
  });

<static> pageManipulationOverlay

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

Implements:

UI.PageManipulationOverlay

Example

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

<static> Panels

The different available pre-built panels options.

Properties:

Name	Type	Description
`OUTLINE`	string	Represents the OUTLINE panel.
`SIGNATURE`	string	Represents the SIGNATURE panel.
`BOOKMARKS`	string	Represents the BOOKMARKS panel.
`FILE_ATTACHMENT`	string	Represents the FILE_ATTACHMENT panel.
`THUMBNAIL`	string	Represents the THUMBNAIL panel.
`LAYERS`	string	Represents the LAYERS panel.
`TEXT_EDITING`	string	Represents the TEXT_EDITING panel.
`CHANGE_LIST`	string	Represents the CHANGE_LIST panel.
`STYLE`	string	Represents the STYLE panel.
`REDACTION`	string	Represents the REDACTION panel.
`SEARCH`	string	Represents the SEARCH panel.
`NOTES`	string	Represents the NOTES panel.
`TABS`	string	Represents the TABS panel.
`SIGNATURE_LIST`	string	Represents the SIGNATURE_LIST panel.
`RUBBER_STAMP`	string	Represents the RUBBER_STAMP panel.
`PORTFOLIO`	string	Represents the PORTFOLIO panel.
`FORM_FIELD`	string	Represents the FORM_FIELD panel.

<static> PRESET_BUTTON_TYPES

Contains string enums for preset button types.

Properties:

Name	Type	Description
`UNDO`	string	UI.Components.PresetButton.undoButton
`REDO`	string	UI.Components.PresetButton.redoButton
`NEW_DOCUMENT`	string	UI.Components.PresetButton.newDocumentButton
`FILE_PICKER`	string	UI.Components.PresetButton.filePickerButton
`DOWNLOAD`	string	UI.Components.PresetButton.downloadButton
`FULLSCREEN`	string	UI.Components.PresetButton.fullscreenButton
`SAVE_AS`	string	UI.Components.PresetButton.saveAsButton
`PRINT`	string	UI.Components.PresetButton.printButton
`CREATE_PORTFOLIO`	string	UI.Components.PresetButton.createPortfolioButton
`SETTINGS`	string	UI.Components.PresetButton.settingsButton
`FORM_FIELD_EDIT`	string	UI.Components.PresetButton.formFieldEditButton
`CONTENT_EDIT`	string	UI.Components.PresetButton.contentEditButton
`INCREASE_INDENT`	string	UI.Components.PresetButton.increaseIndentButton
`DECREASE_INDENT`	string	UI.Components.PresetButton.decreaseIndentButton
`BOLD`	string	UI.Components.PresetButton.boldButton
`ITALIC`	string	UI.Components.PresetButton.italicButton
`UNDERLINE`	string	UI.Components.PresetButton.underlineButton
`JUSTIFY_LEFT`	string	UI.Components.PresetButton.justifyLeftButton
`JUSTIFY_CENTER`	string	UI.Components.PresetButton.justifyCenterButton
`JUSTIFY_RIGHT`	string	UI.Components.PresetButton.justifyRightButton
`JUSTIFY_BOTH`	string	UI.Components.PresetButton.justifyBothButton
`OE_COLOR_PICKER`	string	UI.Components.PresetButton.officeEditorColorPicker
`INSERT_IMAGE`	string	UI.Components.PresetButton.insertImageButton
`PAGE_BREAK`	string	UI.Components.PresetButton.pageBreakButton

Example

const undoButton = new UI.Components.PresetButton({ buttonType: UI.PRESET_BUTTON_TYPES.UNDO });

<static> RedactionSearchPatterns

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

Properties:

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

<static> settingsMenuOverlay

An instance of MenuOverlay that can be used to edit items in the settings menu overlay component.

Implements:

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

Implements:

UI.Popup

Example

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

<static> 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);
  });

<static> thumbnailControlMenu

An instance of ThumbnailControlMenu that can be used to edit the items included in the thumbnail menu overlay

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.
`REDACT`	string	Sets the current toolbar as the redact group.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setToolbarGroup(instance.UI.ToolbarGroup.VIEW);
  });

VerificationOptions

VerificationOptions namespace

See:

VerificationOptions

Methods

<static> addCustomModal(options)

Add custom modal element to WebViewer.

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

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

For styling these components, see Customizing WebViewer UI Styles

Note that in most cases WebViewer is run inside an iframe and in order for options.disableEscapeKeyDown to automatically work, the iframe must be the active element. This can be done by setting the focus to the iframe programmatically.

Parameters:

Name Type Description

options

object

Properties

Name	Type	Argument	Default	Description
`dataElement`	string			Unique name of custom modal.
`disableBackdropClick`	boolean	<optional>	false	Disable closing modal when user clicks outside of content area
`disableEscapeKeyDown`	boolean	<optional>	false	Disable closing modal when user hit escape from keyboard
`render`	UI.renderCustomModal			Function rendering custom model contents, this is optional
`header`	object			JSON object with title, className, style and children parameter
`body`	object			JSON object with title, className, style and children parameter
`footer`	object			JSON object with title, className, style and children parameter

Example

WebViewer(...).then(function(instance) {
    const modal = {
      dataElement: 'meanwhileInFinlandModal',
      header: {
        title: 'Modal header',
        className: 'myCustomModal-header',
        style: {}, // optional inline styles
        children: []
      },
      body: {
        className: 'myCustomModal-body',
        style: {}, // optional inline styles
        children: [  divInput1, divInput2 ], // HTML dom elements
      },
      footer: {
        className: 'myCustomModal-footer footer',
        style: {}, // optional inline styles
        children: [
          {
            title: 'Cancel',
            button: true,
            style: {},
            className: 'modal-button cancel-form-field-button',
            onClick: (e) => { console.log('ff') }
          },
          {
            title: 'OK',
            button: true,
            style: {},
            className: 'modal-button confirm ok-btn',
            onClick: (e) => { console.log('xx') }
          },
        ]
      }
    };
    instance.UI.addCustomModal(modal);
    instance.UI.openElements([modal.dataElement]);
  });

<static> addDateTimeFormat(dateTimeFormat)

Adds a date and time format for the UI date and time dropdowns. List of formats can be found here: dayjs API.

Parameters:

Name Type Description

dateTimeFormat

object

An object containing the date and time formats with the respective keys. At least one of the date or time keys must be present.

Properties

Name	Type	Argument	Description
`date`	string	<optional>	String of date format
`time`	string	<optional>	String of time format
`timeFirst`	boolean	<optional>	Boolean value to indicate if time should be before date in UI

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.addDateTimeFormat({
        date: 'MM/DD/YYYY',
        time: 'HH:mm:ss',
        timeFirst: true
      });
  });

<static> addEventListener(eventName, listener)

Add an event listener for the given WebViewer UI event.

Parameters:

Name	Type	Description
`eventName`	string	UI event name.
`listener`	function	Callback function that will be invoked when the event is dispatched.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.addEventListener(instance.UI.Events.ANNOTATION_FILTER_CHANGED, e => {
      const { types, authors, colors } = e.detail;
      console.log(types, authors, colors);
    });
  });

<static> addMeasurementScalePreset(options)

Adds a new preset option for measurement scales.

Parameters:

Name Type Description

options

object

Options for adding a new preset option.

Properties

Name	Type	Argument	Description
`measurementSystem`	string		The measurement system, can be either 'metric' or 'imperial'.
`displayName`	string		The display name of the new preset option.
`presetScale`	Core.Scale		The scale object of the new preset option.
`index`	number	<optional>	The index at which to insert the new preset option. If not provided, the new preset will be added to the last of the preset options list.

Example

WebViewer(...)
  .then(function(instance) {
    const newScale = new instance.Core.Scale([[1, 'mm'], [300, 'mm']]);
    instance.UI.addMeasurementScalePreset({
      measurementSystem: 'metric',
      displayName: '1:300',
      presetScale: newScale,
      index: 5
    });
  });

<static> addModularHeaders(headerList)

Adds new custom Header(s) to the Header list

Parameters:

Name	Type	Description
`headerList`	array.<UI.Components.ModularHeader>	The list of headers to be added on the application

Example

WebViewer(...)
  .then(function (instance) {
    const newHeader = new instance.UI.Components.ModularHeader({
      dataElement: 'top-header',
      location: 'top'
    });

    instance.UI.addModularHeaders([newHeader]);

<static> addPanel(panel)

Adds a custom panel in left or right side of the UI.

Parameters:

Name	Type	Description
`panel`	Object.<PanelProperties>	The panel object to be added in the UI.

Examples

WebViewer(...)
  .then(function(instance) {
    instance.UI.addPanel({
      dataElement: 'myNewOutlinesPanel',
      render: instance.UI.Panels.OUTLINE,
    })

    instance.UI.openElements(['myNewOutlinesPanel']);
  });

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

    instance.UI.openElements(['fooBarElement']);
  });

<static> addRedactionSearchPattern(searchPattern)

Adds a new search pattern to the redaction search panel

Parameters:

Name	Type	Description
`searchPattern`	UI.RedactionSearchPattern	A search pattern to add to the redaction search panel

Example

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

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

<static> addSearchListener(searchListener)

Adds a listener function to be called when search is completed.

Parameters:

Name	Type	Description
`searchListener`	UI.searchListener	Callback function that will be triggered when search completed

Example

WebViewer(...)
  .then(function(instance) {
    function searchListener(searchValue, options, results) {
      console.log(searchValue, options, results);
    };

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

<static> addSortStrategy(sortStrategy)

Adds a sorting strategy in notes panel.

Parameters:

Name Type Description

sortStrategy

object

Sorting strategy that will be used to sort notes

Properties

Name	Type	Description
`name`	string	Name of the strategy, which will be shown in notes panel's dropdown
`getSortedNotes`	UI.getSortedNotes	Function that takes unsorted notes (annotations) and returns them sorted
`shouldRenderSeparator`	UI.shouldRenderSeparator	Function that returns when a separator should be rendered
`getSeparatorContent`	UI.getSeparatorContent	Function that returns the content of a separator

Example

WebViewer(...)
  .then(function(instance) {
    var mySortStrategy = {
      name: 'annotationType',
      getSortedNotes: function(notes) {
        return notes.sort(function(a ,b) {
          if (a.Subject < b.Subject) return -1;
          if (a.Subject > b.Subject) return 1;
          if (a.Subject === b.Subject) return 0;
        });
      },
      shouldRenderSeparator: function(prevNote, currNote) {
        return prevNote.Subject !== currNote.Subject;
      },
      getSeparatorContent: function(prevNote, currNote) {
        return currNote.Subject;
      }
    };

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

<static> cancelPrint()

Stops on-going page processing to cancel a print job.

Example

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

<static> closeDocument()

Closes the document that's currently opened.

Returns:

A promise resolved after document is closed.

Type: Promise.<void>

Example

WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

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

<static> closeElements(dataElements)

Sets visibility states of the elements to be hidden. Note that closeElements works only for panel/overlay/popup/modal elements.

Parameters:

Name	Type	Description
`dataElements`	Array.<string>	Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.

Example

WebViewer(...)
  .then(function(instance) {
    // closes (hides) text popup and left panel in the UI
    instance.UI.closeElements([ 'menuOverlay', 'leftPanel' ]);
  });

<static> closeTooltip()

Closes the tooltip that is currently being hovered over

Example

WebViewer(...)
 .then(function(instance) {
 // call close after tooltip opens
 instance.UI.addEventListener('tooltipOpened', function() {
 instance.UI.closeTooltip();
 });
 });

<static> createToolbarGroup(toolbarGroup)

Creates a new Toolbar group (Ribbon)

Parameters:

Name Type Description

toolbarGroup

object

Properties

Name	Type	Argument	Description
`name`	string		The label for the new Toolbar Group or the key value to get the label from translation files. Refer to the lib/ui/i18n folder to find the existing keys in the translation files
`dataElementSuffix`	string		The suffix value you want to use to select your Toolbar group by data element. All toolbar groups have the data element in this format toolbarGroup-<dataElementSuffix>. For example, if you set the dataElementSuffix as 'Draw', the dataElement of your ribbon will be toolbarGroup-Draw
`children`	Array		A list of elements to be added on the toolbar group header. Check this guide to see the available options to be used as a toolbar group child.
`useDefaultElements`	boolean	<optional>	If true, the common elements used in most toolbar groups will be added to the children list. These elements are a spacer in the beginning and at the end of the header, the undo and redo buttons, and the eraser button. In the example below you can see these elements being added. By default, the value will be false and these elements will not be added.

Example

WebViewer(...)
   .then(function(instance) {
    const { annotationManager, documentViewer } = instance.Core;
    const annotHistoryManager = documentViewer.getAnnotationHistoryManager();

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

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

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

<static> dangerouslySetNoteTransformFunction(noteTransformFunction)

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

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

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

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

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

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

Parameters:

Name	Type	Description
`noteTransformFunction`	UI.NoteTransformFunction	The function that will be used to transform notes in the left panel

Example

Webviewer(...)
  .then(instance => {
    instance.UI.dangerouslySetNoteTransformFunction((wrapper, state, createElement) => {
      // Change the title of every note
      wrapper.querySelector('.author-and-time > .author').innerHTML = 'My custom note title';

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

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

<static> disableAnnotationToolStyleSyncing()

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.disableAnnotationToolStyleSyncing();
  });

<static> disableApplyCropWarningModal()

Disable the confirmation modal when applying a crop to a page

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.disableApplyCropWarningModal();
  });

<static> disableApplySnippingWarningModal()

Disable the confirmation modal when snipping a page

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.disableApplySnippingWarningModal();
  });

<static> disableBookmarkIconShortcutVisibility()

Hide bookmark icon shortcuts on the top right corner of each page.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.disableBookmarkIconShortcutVisibility();
  });

<static> disableClearSearchOnPanelClose()

Disable clearing search results when user closes search panel. When disabled, search results are kept even if user closes and reopens search panel. Note, mobile devices never clear search results even if this setting is enabled. This is because the panel needs to be closed to view the search results on the document.

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.disableClearSearchOnPanelClose();
  });

<static> disableDesktopOnlyMode()

Disables desktop only mode on WebViewer UI. This means that at small browser width/height, mobile/tablet CSS styling will be applied.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.disableDesktopOnlyMode();
  });

<static> disableElements(dataElements)

Unmount multiple elements in the DOM. Note that this ONLY removes the DOM elements without disabling related features.

Parameters:

Name	Type	Description
`dataElements`	Array.<string>	Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.

Examples

WebViewer(...)
  .then(function(instance) {
    // remove left panel and left panel button from the DOM
    instance.UI.disableElements([ 'leftPanel', 'leftPanelButton' ]);
  });

WebViewer(...)
  .then(function(instance) {
    // remove the 'Edit' toolbar group
    instance.UI.disableElements(['toolbarGroup-Edit']);
  });

<static> disableFadePageNavigationComponent()

Always keep the Page Navigation Component on screen. Default behaviour is to fade it after certain period of inactivity.

Example

WebViewer(...)
  .then(function(instance) {
    // Keeps the page navigation component on screen all the time
    instance.UI.disableFadePageNavigationComponent();
  });

<static> disableFeatures(features)

Disable certain features in the WebViewer UI.

Parameters:

Name	Type	Description
`features`	Array.<string>	Array of features to disable.

See:

UI.Feature

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.disableFeatures(instance.UI.Feature.Measurement);
  });

<static> disableHighContrastMode()

Turns high contrast mode off.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.disableHighContrastMode();
  });

<static> disableMultipleScalesMode()

Disable multiple scales mode.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.disableMultipleScalesMode();
  });

<static> disableMultiViewerSync()

Example

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

<static> disableNativeScrolling()

Disable native mobile device scrolling behavior if it had previously been enabled. Note that native mobile device scrolling behavior is off by default.

Example

WebViewer(...)
  .then(function(instance) {
    UI.disableNativeScrolling();
  });

<static> disableNoteSubmissionWithEnter()

Disable the ability to submit notes by only pressing Enter if it had previously been enabled. This will revert note submission to the default which is Ctrl/Cmd + Enter.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.disableNoteSubmissionWithEnter();
  });

<static> disablePageDeletionConfirmationModal()

Disable the confirmation modal when deleting a page from the thumbnail view

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.disablePageDeletionConfirmationModal();
  });

<static> disableReplyForAnnotations(isReplyDisabledCallback)

Disable reply for annotations if the callback function returns true. The callback function gets evaluated when the Comments panel is open, an annotation is selected, and the selected annotation has a comment. Only one callback function will be stored and invoked. If multiple criteria is needed to disable replies you must write them in a single callback function.

Parameters:

Name	Type	Description
`isReplyDisabledCallback`	UI.disableReplyForAnnotationsCallback	Callback function that returns true if reply will be disabled for the annotation passed in. False otherwise.

Example

WebViewer(...)
  .then(instance => {

    // disable reply for Freehand annotations
    instance.UI.disableReplyForAnnotations((annotation) => {
      return annotation instanceof instance.Core.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.

Returns:

A promise that resolves when disposing has been completed

Type: Promise.<void>

Example

await 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

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> enableAnnotationToolStyleSyncing()

Enables syncing of annotation style updates to the associated tool that created the annotation. Note that this is disabled by default.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableAnnotationToolStyleSyncing();
  });

<static> enableApplyCropWarningModal()

Enable the confirmation modal when applying a crop to a page

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.enableApplyCropWarningModal();
  });

<static> enableApplySnippingWarningModal()

Enable the confirmation modal when snipping a page

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.enableApplySnippingWarningModal();
  });

<static> enableBookmarkIconShortcutVisibility()

Show bookmark icon shortcuts on the top right corner of each page for quickly adding or removing a bookmark.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableBookmarkIconShortcutVisibility();
  });

<static> enableClearSearchOnPanelClose()

Enable clearing search results when user closes search panel. When this is enabled and user closes search panel all search results are cleared. Note, mobile devices never clear search results even if this setting is enabled. This is because the panel needs to be closed to view the search results on the document.

Example

WebViewer(...)
 .then(function(instance) {
    // Will not affect on mobile devices
    instance.UI.enableClearSearchOnPanelClose();
  });

<static> enableDesktopOnlyMode()

Enables desktop only mode on WebViewer UI. This means that at small browser width/height, mobile/tablet CSS styling will not be applied.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableDesktopOnlyMode();
  });

<static> enableElements(dataElements)

Remount the hidden elements in the DOM.

Parameters:

Name	Type	Description
`dataElements`	Array.<string>	Array of data-element attribute values for DOM elements. To find data-element of a DOM element, refer to Finding data-element attribute values.

Example

WebViewer(...)
  .then(function(instance) {
    // remove left panel and left panel button from the DOM
    instance.UI.enableElements([ 'leftPanel', 'leftPanelButton' ]);
  });

<static> enableFadePageNavigationComponent()

Fade the Page Navigation Component after it has not been interacted with. Reappears whenever the document is scrolled.

Example

WebViewer(...)
  .then(function(instance) {
    // Sets behaviour to fade the page navigation component.
    // enabled by default
    instance.UI.enableFadePageNavigationComponent();
  });

<static> enableFeatureFlag(featureFlag)

Enables a specified feature flag.

Parameters:

Name	Type	Description
`featureFlag`	string	The feature flag to enable. To find feature flag names, refer to Feature flags.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableFeatureFlag(instance.UI.FeatureFlags.CUSTOMIZABLE_UI);
  });

<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.UI.Feature.Measurement);
  });

<static> enableHighContrastMode()

Turns high contrast mode on to help with accessibility.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableHighContrastMode();
  });

<static> enableMultipleScalesMode()

Enable multiple scales mode.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableMultipleScalesMode();
  });

<static> enableMultiViewerSync( [primaryViewerKey])

Parameters:

Name	Type	Argument	Default	Description
`primaryViewerKey`	number	<optional>	1	Which DocumentViewer to set as primary for initial zoom sync (1 or 2)

Example

WebViewer(...)
 .then((instance) => {
    instance.UI.enableMultiViewerSync(1) // Value can be 1 (for left side) or 2 (for right side)
  });

<static> enableNativeScrolling()

Enable native mobile device scrolling behavior. By default custom behavior is used to handle vertical and horizontal scroll locking.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableNativeScrolling();
  });

<static> enableNoteSubmissionWithEnter()

Enable the ability to submit notes by only pressing Enter. Default mode is Ctrl/Cmd + Enter.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableNoteSubmissionWithEnter();
  });

<static> enablePageDeletionConfirmationModal()

Enable the confirmation modal when deleting a page from the thumbnail view

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.enablePageDeletionConfirmationModal();
  });

<static> enableToolDefaultStyleUpdateFromAnnotationPopup()

Enables syncing of annotation style updates to the associated tool that created the annotation. Note that this is enabled by default.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enableToolDefaultStyleUpdateFromAnnotationPopup();
  });

<static> enableTools( [toolNames])

Enable multiple tools.

Parameters:

Name	Type	Argument	Default	Description
`toolNames`	Array.<string>	<optional>	all tools	Array of name of the tools, either from tool names list or the name you registered your custom tool with. If nothing is passed, all tools will be enabled.

Example

WebViewer(...)
  .then(function(instance) {
    // enable sticky annotation tool and free text tool
    instance.UI.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
  });

<static> enterMultiViewerMode()

Activate Multi-Viewer Mode (Side by side view).

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.enterMultiViewerMode();
  });

<static> exitMultiViewerMode()

Exit Multi-Viewer Mode (Side by side view).

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.exitMultiViewerMode();
  });

<static> exportBookmarks()

Returns a dictionary with page numbers as keys and the bookmark text as the values

Returns:

A dictionary with page numbers as keys and the bookmark text as the values. ex: {"1":"Bookmark 1","3":"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> exportModularComponents()

Exports the current state of the modular components, headers, and panels in the UI as JSON data. Removes any invalid items after validation. Also removes any prebuilt flyouts and overflow flyouts. Functions found in components such as onClick cannot be exported in JSON data. Use a Function Map to redefine them on import. See https://docs.apryse.com/api/web/UI.html#.importModularComponents__anchor for more information.

Returns:

JSON object containing maps of components, headers, panels, and flyouts to be used in the UI. ex: { modularComponents: { ... }, modularHeaders: { ... }, panels: { ... }, flyouts: { ... } }

Type: Object

Example

WebViewer(...)
 .then(function (instance) {
    instance.UI.exportModularComponents();

<static> exportUserSettings()

Export the current user settings as JSON object.

Returns:

JSON object containing the current user settings

Type: object

Example

WebViewer(...)
  .then(function (instance) {
    const userSettings = instance.UI.exportUserSettings();
    console.log(userSettings);
  });

<static> extractPagesWithAnnotations(pageNumbersToExtract)

Extract pages from the current document

Parameters:

Name	Type	Description
`pageNumbersToExtract`	Array.<number>	An array of pages to extract from the document. Annotations on the pages are included

Returns:

A promise that resolve to a File object

Type: Promise.<File>

Example

// 6.0 and after
WebViewer(...)
  .then(function(instance) {
    instance.UI.extractPagesWithAnnotations ([1,2,3]).then(function(fileData){
    });
  });

<static> focusNote(annotationId)

Focuses a note input field for the annotation. If the notes panel is closed, it is automatically opened before focusing.

Parameters:

Name	Type	Description
`annotationId`	string	Id of an annotation.

Example

WebViewer(...)
  .then(function(instance) {
    var annotManager = instance.Core.annotationManager;

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

<static> getActiveRibbonItem()

Returns the active Ribbon Item in the modular UI.

Returns:

The dataElement of the active Ribbon Item.

Type: string

Example

WebViewer(...)
    .then(function(instance) {
        console.log(instance.UI.getActiveRibbonItem());
      );
    });

<static> getAnnotationReadState(annotationId)

Return the read/unread state of an annotation. True for read, false for unread.

Parameters:

Name	Type	Description
`annotationId`	string	Id of the annotation.

Throws:

Will throw an error if the annotation with the given ID does not exist.

Returns:

Whether the annotation is read.

Type: boolean

Example

WebViewer(...)
  .then(function(instance) {
    const isAnnotationRead = instance.UI.getAnnotationReadState('test-annotation-id');

<static> getAnnotationStylePopupTabs( [annotationKey])

Returns the style popup tab configurations for the specified annotation type. If there was no annotation key specified, it will return the style popup tab configurations for all the annotations.

Parameters:

Name	Type	Argument	Description
`annotationKey`	string	<optional>	Indicate the type of an annotation, see UI.AnnotationKeys.

Returns:

Type: Array.<AnnotationStyleTabConfiguration>

Example

WebViewer(...)
    .then(function(instance) {
        console.log(instance.UI.getAnnotationStylePopupTabs());
      );
    });

<static> getAvailableLanguages()

Returns all available languages as a list.

Returns:

All available languages

Type: Array.<string>

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.getAvailableLanguages());
  });

<static> getCurrentLanguage()

Return the current language used in WebViewer.

Returns:

Current language code

Type: string

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.getCurrentLanguage());
  });

<static> getCustomData()

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

Returns:

returns a stringified version of the 'custom' property that is passed to the WebViewer constructor

Type: string

<static> getFitMode()

Return the current fit mode of the WebViewerInstance UI.

Returns:

Current fit mode

Type: string

Example

WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;

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

<static> getLayoutMode()

Return the current layout mode of the WebViewerInstance.

Returns:

Current layout mode

Type: string

Example

WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;

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

<static> getLocalizedText()

Return the localized text for the given key. This functions exactly the same as the t API from the i18n library.
This may be used to leverage the existing localization setup in WebViewer in custom elements, modals, etc.

Returns:

The translation key

Type: string | Array.<string>

Example

WebViewer(...)
  .then(function(instance) {
    const button = document.createElement('button');
    button.innerText = instance.UI.getLocalizedText('action.add');

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

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

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

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

<static> getMaxZoomLevel()

Return the max zoom level

Returns:

max zoom level

Type: number

Example

WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

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

<static> getMeasurementScalePreset(measurementSystem)

Returns all the measurement scale preset options for the given measurement system.

Parameters:

Name	Type	Description
`measurementSystem`	string	The measurement system, can be either 'metric' or 'imperial'.

Returns:

All the measurement scale preset options for the given measurement system.

Type: Array.<Array.<(string|Core.Scale)>>

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.getMeasurementScalePreset('metric'));
  });

<static> getMinZoomLevel()

Return the min zoom level

Returns:

min zoom level

Type: number

Example

WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

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

<static> getModularHeader(dataElement)

Returns a modular header component with the given dataElement.

Parameters:

Name	Type	Description
`dataElement`	string	The dataElement of the header to be returned

Returns:

Custom Header

Type: UI.Components.ModularHeader

Example

WebViewer(...)
  .then(function(instance) {
    const header = instance.UI.getModularHeader('custom-header')
  });

<static> getModularHeaderList()

Return the list of Custom Headers.

Returns:

Custom Header List

Type: UI.Components.ModularHeader

Example

WebViewer(...)
  .then(function(instance) {
    const headerList = instance.UI.getModularHeaderList()
  });

<static> getPanels()

Returns a list of panels that are currently in the UI

Returns:

Array of Panel objects

Type: Array.<(UI.Components.Panel|UI.Components.TabPanel)>

Example

WebViewer(...)
 .then(function(instance) {
 const panelList = instance.UI.getPanels();
 console.log(panelList);
 });

<static> getTextSignatureQuality()

Gets the multiplier used when creating typed, text signatures.

Returns:

The multiplier value

Type: number

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.getTextSignatureQuality(4);
  });

<static> getToolMode()

Return the current tool object.

Returns:

Instance of the current tool

Type: Core.Tools.Tool

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.getToolMode().name, instance.UI.getToolMode());
  });

<static> getWatermarkModalOptions()

Gets the watermark options created in print modal.

Returns:

Returns the watermark options created in print modal.

Type: object

<static> getZoomLevel()

Return the current zoom level

Returns:

Zoom level (0 ~ 1)

Type: number

Example

WebViewer(...)
  .then(function(instance) {
    const docViewer = instance.Core.documentViewer;

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

<static> hideFormFieldIndicators()

Hide form field indicators.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.hideFormFieldIndicators();
  });

<static> hideOutlineControl()

hide outline control

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.hideOutlineControl();
  });

<static> importBookmarks(bookmarks)

Imports user bookmarks

Parameters:

Name	Type	Description
`bookmarks`	object	A dictionary with page numbers as keys and the bookmark text as the values. ex: {"1":"Bookmark 1","3":"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> importModularComponents(data [, functionMap])

Creates a new modular UI using the provided JSON data and function map. The data is validated and will throw an error if a part of its structure is not valid. Existing UI components will be replaced with the new components provided in the JSON data.

Parameters:

Name	Type	Argument	Description
`data`	Object		The JSON data containing maps of components, headers, and panels to be used in the UI. If any of the properties are not provided, they will not be used in the UI. ex: { modularComponents: { ... }, modularHeaders: { ... }, panels: { ... } }
`functionMap`	object	<optional>	A map of functions to be used in the components. The keys should match the function names used in the components. The values should be the actual functions to be called.

Properties:

Name Type Description

modularComponents Object The map of components to be used in the UI. Refer to: ItemProperties for properties of modularComponents

modularHeaders Object The map of headers to be used in the UI. Refer to: ContainerProperties for properties of modularHeaders

panels Object The map of panels to be used in the UI. Refer to: PanelProperties for properties of panels

flyouts

Object

The map of flyouts to be used in the UI.

Properties

Name	Type	Description
`dataElement`	string	A unique string that identifies the flyout.
`items`	Array.<string>	An array of strings that represent the items in the flyout. Each string should be the dataElement of a component in the modularComponents map.

Example

WebViewer(...)
 .then(function (instance) {
    const response = await fetch('./modular-components.json');
    const data = await response.json();

      const functionMap = {
      'alertClick': () => alert("Alert triggered!"),
      'singlePageOnClick': (update) => {
        update('DoublePage');
      },
      'doublePageOnClick': (update) => {
        update('SinglePage');
      },
      'statefulButtonMount': () => {},
      'statefulButtonUnmount': () => {},
      };

    instance.UI.importModularComponents(data, functionMap);

<static> importUserSettings(userSettings)

Import user settings from JSON object.

Parameters:

Name	Type	Description
`userSettings`	object	JSON object containing the new user settings

Example

WebViewer(...)
  .then(function (instance) {
    const userSettings = instance.UI.exportUserSettings();
    const newUserSettings = {
      'theme': 'dark',
      'keyboardShortcut': { ...userSettings.keyboardShortcut, 'search': 'command+m' }
    };
    instance.UI.importUserSettings(newUserSettings);
  });

<static> isElementDisabled(dataElement)

Returns whether the element is disabled.

Parameters:

Name	Type	Description
`dataElement`	string	data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

Returns:

Whether the element is disabled.

Type: boolean

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isElementDisabled('leftPanel'));
  });

<static> isElementOpen(dataElement)

Returns whether the element is open.

Parameters:

Name	Type	Description
`dataElement`	string	data-element attribute value for a DOM element. To find data-element of a DOM element, refer to Finding data-element attribute values.

Returns:

Whether the element is open.

Type: boolean

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isElementOpen('leftPanel'));
  });

<static> isFullscreen()

Returns whether in fullscreen mode.

Returns:

Whether in fullscreen mode.

Type: boolean

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isFullscreen());
  });

<static> isHighContrastModeEnabled()

Check whether high contrast mode is enabled or not.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.isHighContrastModeEnabled();
  });

<static> isInDesktopOnlyMode()

Returns a boolean to denote if the UI is in desktop only mode.

Returns:

boolean to denote if the UI is in desktop only mode

Type: boolean

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.isInDesktopOnlyMode();
  });

<static> isMultipleScalesModeEnabled()

Returns whether multiple scales mode is enabled.

Returns:

True if multiple scales mode is enabled, false if multiple scales mode is disabled.

Type: boolean

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isMultipleScalesModeEnabled());
  });

<static> isMultiViewerSyncing()

Returns:

returns true if sync is enabled false if disabled

Type: boolean

Example

WebViewer(...)
 .then((instance) => {
    console.log(instance.UI.isMultiViewerSyncing());
  });

<static> isToolDisabled(toolName)

Returns whether the tool is disabled.

Parameters:

Name	Type	Description
`toolName`	string	Name of the tool, either from tool names list or the name you registered your custom tool with.

Returns:

Whether the tool is disabled.

Type: boolean

Example

WebViewer(...)
  .then(function(instance) {
    console.log(instance.UI.isToolDisabled());
  });

<static> loadDocument(documentPath [, options])

Load a document inside WebViewer UI.

Parameters:

Name	Type	Argument	Description
`documentPath`	string \| File \| Blob \| Core.Document \| Core.PDFNet.PDFDoc		Path to the document OR File object if opening local file.
`options`	UI.loadDocumentOptions	<optional>	Additional options

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.loadDocument('https://myserver.com/files/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

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.

If you are using using multiviewer mode, you will have to register the tool to each document viewer.

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.
`documentViewerNumber`	number	<optional>	The document viewer number when there are multiple viewers. Default is 1.
`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 pdfDoc.getFirstBookmark();

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

<static> removeEventListener(eventName, listener)

"Remove an event listener for the given WebViewer UI event.

Parameters:

Name	Type	Description
`eventName`	string	UI event name.
`listener`	function	Event handler function that should no longer be bound to the event.

Example

WebViewer(...)
  .then(function(instance) {
    const listener = e => {
      const { types, authors, colors } = e.detail;
      console.log(types, authors, colors);

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

<static> removeMeasurementScalePreset(measurementSystem, index)

Adds an existing preset option for measurement scales.

Parameters:

Name	Type	Description
`measurementSystem`	string	The measurement system, can be either 'metric' or 'imperial'.
`index`	number	The index at which to remove the existing preset option.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.removeMeasurementScalePreset('metric', 5);
  });

<static> removeRedactionSearchPattern(searchPattern)

Removes a search pattern from the redaction search panel

Parameters:

Name	Type	Description
`searchPattern`	UI.RedactionSearchPatterns \| string	A search pattern to remove from the redaction search panel. If you added a custom search pattern with UI.addRedactionSearchPattern, you must pass the type of the search pattern you added.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.removeRedactionSearchPattern(instance.UI.RedactionSearchPatterns.EMAILS);
  });

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

<static> removeSearchListener(listener)

Removes the search listener function.

Parameters:

Name	Type	Description
`listener`	UI.searchListener	Search listener function that was added.

Example

WebViewer(...)
  .then(function(instance) {
    function searchListener(searchValue, options, results) {
      console.log(searchValue, options, results);
    };

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

<static> replaceRedactionSearchPattern(searchPattern, regex)

Sets a specific regex to be used when searching for one of the supported patterns in the redaction search panel

Parameters:

Name	Type	Description
`searchPattern`	UI.RedactionSearchPatterns	A search pattern for which the regex should be replaced
`regex`	string	The regex to be used for the search pattern

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.replaceRedactionSearchPattern(instance.UI.RedactionSearchPatterns.EMAILS, /\w+@\w+\.\w+/);
  });

<static> searchText(searchValue [, options])

Searches the document one by one for the text matching searchValue. To go to the next result this function must be called again. Once document end is reach it will jump back to the first found result.

Parameters:

Name Type Argument Description

searchValue string The text value to look for.

options

object

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

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> 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> setActiveRibbonItem(ribbonItem)

Sets a Ribbon Item as active in the Modular UI.

Parameters:

Name	Type	Description
`ribbonItem`	string	dataElement of the ribbon item to set as active.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setActiveRibbonItem('toolbarGroup-Annotate');
  });

<static> setActiveTabInPanel(options)

Set an active tab inside of a tab panel.

Parameters:

Name Type Description

options

Object

The options for selecting the active tab inside a tab panel

Properties

Name	Type	Description
`tabPanel`	string	The identifier for the tab panel where the tab is located.
`tabName`	string	The name of the tab to activate.

Example

WebViewer(...)
  .then(function(instance) {
    // open left panel
    instance.UI.openElements(['leftPanel']);
    // view outlines panel
    instance.UI.setActiveTabInPanel({ tabPanel: 'leftPanel', tabName: 'outlinesPanel' });
  });

<static> setAnnotationContentOverlayHandler(customOverlayHandler)

Adds a custom overlay to annotations on mouseHover, overriding the existing overlay.

Parameters:

Name	Type	Description
`customOverlayHandler`	function	A function that takes an annotation and returns a DOM Element, which is rendered as a tooltip when hovering over the annotation. Returning null or false will render nothing. Returning 'undefined' will use default behavior.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setAnnotationContentOverlayHandler(annotation => {
        const div = document.createElement('div');
        div.appendChild(document.createTextNode(`Created by: ${annotation.Author}`));
        div.appendChild(document.createElement('br'));
        div.appendChild(document.createTextNode(`Created on ${annotation.DateCreated}`));
        return div;
    });
  });

<static> setAnnotationReadState(options)

Set the read/unread state of an annotation. The default state of annotations is read.

Parameters:

Name Type Description

options

object

Properties

Name	Type	Description
`isRead`	boolean	whether setting the annotation to read state; false for setting it as unread.
`annotationId`	string	Id of the annotation to be set.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setAnnotationReadState({ isRead: true, annotationId: 'test-annotation-id' });
  });

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

Sets the available style tabs in the style popup for a specific annotation type.

Parameters:

Name	Type	Argument	Description
`annotationKey`	string		The annotation type. See UI.AnnotationKeys.
`newAnnotationStyleTabs`	Array.<string>		Indicates the available style tabs for the annotation. See UI.AnnotationStylePopupTabs.
`initialTab`	string	<optional>	The initial style tab. It should be one of the elements in newAnnotationStyleTabs if passed to the API.

Example

WebViewer(...)
    .then(function(instance) {
      instance.UI.setAnnotationStylePopupTabs(
        instance.UI.AnnotationKeys.FREE_TEXT,
        [
          instance.UI.AnnotationStylePopupTabs.TEXT_COLOR,
          instance.UI.AnnotationStylePopupTabs.FILL_COLOR
        ],
        instance.UI.AnnotationStylePopupTabs.FILL_COLOR
      );
    });

<static> setClickMiddleware(middleware)

Sets a function to be called before the default click handler. Can be used to track clicks on buttons in the UI.

Parameters:

Name	Type	Description
`middleware`	UI.clickMiddleware	A callback function that will be called before the default click handler.

Example

WebViewer(...)
   .then(function(instance) {
     instance.UI.setClickMiddleware(function(dataElement, { type }) {
       if (type === instance.UI.ClickedItemTypes.BUTTON) {
        console.log('clicked button: ', dataElement)
       }
     })
   })

<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.Core.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> setCustomMultiViewerAcceptedFileFormats(customMultiViewerAcceptedFileFormats)

Parameters:

Name	Type	Description
`customMultiViewerAcceptedFileFormats`	UI.CustomMultiViewerAcceptedFileFormats

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomMultiViewerAcceptedFormats(['pdf']);
  });

<static> setCustomMultiViewerSyncHandler(customMultiViewerSyncHandler)

Parameters:

Name	Type	Description
`customMultiViewerSyncHandler`	UI.CustomMultiViewerSyncHandler	The function that will be invoked when syncing documents in multi viewer mode.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomMultiViewerSyncHandler((primaryDocumentViewerKey, removeHandlerFunctions) => {
      // some code
    })
  });

<static> setCustomNoteFilter(filterAnnotation)

Filter the annotations shown in the notes panel

Parameters:

Name	Type	Description
`filterAnnotation`	UI.filterAnnotation	Function that takes an annotation and returns if the annotation(note) should be shown in the notes panel.

Example

WebViewer(...)
  .then(function(instance) {
    // only show annotations that are created by John
    instance.UI.setCustomNoteFilter(function(annotation) {
      return annotation.Author === 'John';
    });
  });

<static> setCustomNoteSelectionFunction(customNoteSelectionFunction)

Parameters:

Name	Type	Description
`customNoteSelectionFunction`	UI.CustomNoteSelectionFunction	The function that will be invoked when clicking on a note in notes panel. The function will only be invoked when the underlying annotation is not already selected.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomNoteSelectionFunction(annotation => {
      // some code
    })
  });

<static> setCustomPanel(options)

Adds a custom panel in left panel

Parameters:

Name Type Description

options

object

Properties

Name Type Description

tab

object

Tab options.

Properties

Name	Type	Description
`dataElement`	string	data-element for tab.
`title`	string	Tooltip for tab.
`img`	string	Url for an image.

panel

object

Panel options.

Properties

Name	Type	Description
`dataElement`	string	data-element for panel.
`render`	UI.renderCustomPanel	Function that returns panel element.

Example

WebViewer(...)
  .then(function(instance) {
    var myCustomPanel = {
      tab:{
        dataElement: 'customPanelTab',
        title: 'customPanelTab',
        img: '/favicon-32x32.png',
      },
      panel: {
        dataElement: 'customPanel',
        render: function() {
          var div = document.createElement('div');
          div.innerHTML = 'Hello World';
          return div;
        }
      }
    };

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

<static> setCustomSettings(customSettings)

Set custom settings shown in Advanced Setting tab in Settings modal. A custom setting item includes a label, a description, and a toggle button.

Parameters:

Name	Type	Description
`customSettings`	Array.<UI.CustomSettingItem>	Array of custom setting items.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setCustomSettings([
      {
        label: 'Enable High Contrast Mode',
        description: 'Turns high contrast mode on to help with accessibility.',
        isChecked: () => instance.UI.isHighContrastModeEnabled(),
        onToggled: (enable) => {
          if (enable) {
            instance.UI.enableHighContrastMode();
          } else {
            instance.UI.disableHighContrastMode();
          }
        }
      }
    ]);
  });

<static> setDefaultPrintOptions(options)

Sets the default print options.

Parameters:

Name Type Description

options

object

The default print options of the document to print. Must be an object.

Properties

Name	Type	Argument	Description
`includeComments`	boolean	<optional>	Whether or not will print the documents with the comments
`includeAnnotations`	boolean	<optional>	Whether or not will print the documents with the annotations
`maintainPageOrientation`	boolean	<optional>	Whether or not will maintain the pages orientation as set in the webviewer
`margins`	string	<optional>	CSS value that will be used as the default margin for printing

Example

WebViewer(...) .then(function(instance) {
  instance.UI.setDefaultPrintOptions({ includeComments: true, includeAnnotations: true });
instance.UI.setDefaultPrintOptions({ margins: "0.5in"});  // Set all sides to 0.5 inch margin
instance.UI.setDefaultPrintOptions({ margins: "2cm" }); // Set all sides to 2cm margin
// Set top margin to 0.5 inches right margin to 0.4 inches bottom margin to 0.3 inches and left margin to 0.2 inches
instance.UI.setDefaultPrintOptions({ margins: "0.5in 0.4in 0.3in 0.2in" });
});

<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> setEmbeddedPopupMenuStyle(customStyle)

Set a custom style for menus displayed through embedded JavaScript.

Parameters:

Name	Type	Description
`customStyle`	object	A style object that overrides the existing embedded JS menu style. Properties/keys must follow the React style naming convention.

Example

WebViewer(...)
  .then(function(instance) {
    // Size width to fit content and let menu flow off the screen
    instance.UI.setEmbeddedPopupMenuStyle({
      minWidth: 'fit-content',
      minHeight: 'inheirit',
    });
  });

<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> setGrayscaleDarknessFactor(darknessFactor)

Set Grayscale Darkness Factor for printing in Grayscale

Parameters:

Name	Type	Description
`darknessFactor`	number	Default is '1', '0' is fully black and white

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.setGrayscaleDarknessFactor(0.5);
  });

<static> setGroupedItemsGap(gap [, selectors])

Sets the gap of Grouped Items

Parameters:

Name	Type	Argument	Description
`gap`	number		The gap in pixels between the items in the group.
`selectors`	Object	<optional>	An object that contains selectors for the Grouped Items.

Example

WebViewer(...)
  .then(function (instance) {
    const myToolsGroup = new instance.UI.Components.GroupedItems({
      dataElement: 'group-1',
      items: [
        myButton,
        myToolButton,
        highlightToolButton,
      ],
    });

    // Group must be added to a header, and then the header must be added to the UI
    const newHeader = new instance.UI.Components.ModularHeader({
      dataElement: 'top-header',
      location: 'top',
      items: [myToolsGroup]
    });
    instance.UI.addModularHeaders([newHeader]);

    // Setting the gap of all Grouped Items
    instance.UI.setGroupedItemsGap(20);

    // Setting the gap of all Grouped Items with a specific data element
    instance.UI.setGroupedItemsGap(30, {
      groupedItemsDataElement: 'group-1'
    });

<static> setGroupedItemsGrow(grow [, selectors])

Sets the grow of Grouped Items

Parameters:

Name	Type	Argument	Description
`grow`	number		The flex grow value of the group
`selectors`	Object	<optional>	An object that contains the selectors to filter the Grouped Items to set the grow property on.

Example

WebViewer(...)
  .then(function (instance) {
    const myToolsGroup = new instance.UI.Components.GroupedItems({
      dataElement: 'group-1',
      items: [
        myButton,
        myToolButton,
        highlightToolButton,
      ],
    });

    // Group must be added to a header, and then the header must be added to the UI
    const newHeader = new instance.UI.Components.ModularHeader({
      dataElement: 'top-header',
      location: 'top',
      items: [myToolsGroup]
    });
    instance.UI.addModularHeaders([newHeader]);

    // Setting the grow property of all Grouped Items
    instance.UI.setGroupedItemsGrow(1);

    // Setting the grow property of all Grouped Items with a specific data element
    instance.UI.setGroupedItemsGrow(1, {
      groupedItemsDataElement: 'group-1'
    });

<static> setGroupedItemsJustifyContent(justifyContent [, selectors])

Sets the justifyContent property of Grouped Items. This property is analogous to the CSS justify-content property.

Parameters:

Name	Type	Argument	Description
`justifyContent`	'start' \| 'end' \| 'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'		A string that determines the flex justify content value of the group
`selectors`	Object	<optional>	An object that contains the selectors to filter the Grouped Items to set the justify content property on.

Example

WebViewer(...)
  .then(function (instance) {
    const myToolsGroup = new instance.UI.Components.GroupedItems({
      dataElement: 'group-1',
      items: [
        myButton,
        myToolButton,
        highlightToolButton,
      ],
    });

    // Group must be added to a header, and then the header must be added to the UI
    const newHeader = new instance.UI.Components.ModularHeader({
      dataElement: 'top-header',
      location: 'top',
      items: [myToolsGroup]
    });
    instance.UI.addModularHeaders([newHeader]);

    // Setting the justifyContent property of all Grouped Items
    instance.UI.setGroupedItemsJustifyContent('start');

    // Setting the justifyContent property of all Grouped Items with a specific data element
    instance.UI.setGroupedItemsJustifyContent('space-between', {
      groupedItemsDataElement: 'group-1'
    });

<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 = '/logo.svg';
          logo.style.width = '200px';
          logo.style.marginLeft = '10px';
          logo.style.cursor = 'pointer';
          logo.onclick = function() {
            window.open('https://www.apryse.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> 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> setInlineCommentFilter(filterAnnotation)

Return the annotations that have inline comment enabled on select

Parameters:

Name	Type	Description
`filterAnnotation`	UI.filterAnnotation	Function that takes an annotation and returns if the annotation should have inline comment feature enabled when it's selected

Example

WebViewer(...)
  .then(function(instance) {
    // only enable inline comment for free-hand annotations on select
    instance.UI.setInlineCommentFilter((annotation) => {
      return annotation.ToolName === instance.Core.Tools.ToolNames.FREEHAND;
    });
  });

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

Returns:

A promise which is resolved after the language is set.

Type: Promise.<void>

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 UI (default is 4)

Parameters:

Name	Type	Argument	Default	Description
`maxSignaturesCount`	number	<optional>	4	Number of signature webViewer can store

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setMaxSignaturesCount(5); // allow up to 5 stored signatures
  });

<static> setMaxZoomLevel(zoomLevel)

Sets the maximum zoom level allowed by the UI. Default is 9999%.

Parameters:

Name	Type	Description
`zoomLevel`	string \| number	Zoom level in either number or percentage.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setMaxZoomLevel('150%'); // or setMaxZoomLevel(1.5)
  });

<static> setMeasurementUnits(units)

Sets the units that will be displayed in the measurement tools' styles popup Valid units are: 'mm', 'cm', 'm', 'km', 'mi', 'yd', 'ft', 'in', 'pt'

Parameters:

Name	Type	Description
`units`	Object	an object which contains the from units and to units

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setMeasurementUnits({
      from: ['in', 'cm', 'm'],
      to: ['cm', 'm', 'km']
    });
  });

<static> setMinZoomLevel(zoomLevel)

Sets the minimum zoom level allowed by the UI. Default is 5%.

Parameters:

Name	Type	Description
`zoomLevel`	string \| number	Zoom level in either number or percentage.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setMinZoomLevel('10%'); // or setMinZoomLevel(0.1)
  });

<static> setModularHeaders(headerList)

Adds new custom Header(s) to the Header list

Parameters:

Name	Type	Description
`headerList`	array.<UI.Components.ModularHeader>	The new list of headers to be used in the UI

Example

WebViewer(...)
 .then(function (instance) {
 const newHeader = new instance.UI.Components.ModularHeader({
 dataElement: 'top-header',
 placement: 'top'
 });

 instance.UI.setModularHeaders([newHeader]);

<static> setMultiViewerSyncScrollingMode(multiViewerSyncScrollingMode)

Set the scrolling behavior of sync scrolling in semantic compare mode. Must be one of the following values: - 'SYNC': scroll synchronously in both documents - 'SKIP_UNMATCHED': scroll according to the next matched position in both documents

Parameters:

Name	Type	Description
`multiViewerSyncScrollingMode`	string	the scrolling behavior of sync scrolling in semantic comparing mode.

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.setMultiViewerSyncScrollingMode('SYNC');
  });

<static> setNoteDateFormat(format)

Sets the format for displaying the date when a note is create/modified. The default format is 'MMM D, LT'. 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> setPanels(panelList)

Sets the list of panels to be used in the UI

Parameters:

Name	Type	Description
`panelList`	array	The new list of panels to be used in the UI

Example

WebViewer(...)
 .then(function (instance) {
 instance.UI.setPanels([
 {
 dataElement: 'fooBarElement',
 location: 'left',
 render: function() {
 var div = document.createElement('div');
 div.innerHTML = 'Hello World, foobar panel';
 return div;
 }
 },
 {
 dataElement: 'myNewOutlinesPanel',
 location: 'right',
 render: instance.UI.Panels.OUTLINE,
 }
 ]);

<static> setPanelWidth(dataElement, width)

Sets the current width of a panel

Parameters:

Name	Type	Description
`dataElement`	string	Panel element to set width of
`width`	number	Width to set the panel to

Example

WebViewer(...)
 .then(function(instance) {
 // open left panel
 instance.UI.openElements([ 'leftPanel' ]);
 // Set the width of the left panel to 238px
 instance.UI.setPanelWidth('leftPanel', 238);

<static> setPresetCropDimensions(presetName, newPreset)

Sets preset crop dimensions to be used when selecting a preset crop in the document cropping popup

Parameters:

Name Type Description

presetName string The name of a current preset or the name to give to a new preset

newPreset

object

A set of dimensions to use for a preset crop

Properties

Name	Type	Description
`yOffset`	number	The amount of inches to move the cropped area from the top of the page
`height`	number	The height of the area to crop the page to in inches
`xOffset`	number	The amount of inches to move the cropped area from the left of the page
`width`	number	The width of the area to crop the page to in inches

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setPresetCropDimensions('Letter', {'yOffset': 0, 'height': 11, 'xOffset': 0, 'width': 8.5});
  });

<static> setPresetNewPageDimensions(presetName, newPreset)

Sets preset page dimensions to be used when selecting a page size in the Insert Page Modal

Parameters:

Name Type Description

presetName string The name of a current preset or the name to give to a new preset

newPreset

object

A set of dimensions to use for a preset new page

Properties

Name	Type	Description
`height`	number	The height of the new page in inches
`width`	number	The width of the new page in inches

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setPresetNewPageDimensions('Letter', {'height': 11, 'width': 8.5});
  });

<static> setPrintedNoteDateFormat(format)

Sets the format for displaying the date when a note is printed. A list of formats can be found dayjs API.

Parameters:

Name	Type	Description
`format`	string	The format of date to display

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setPrintedNoteDateFormat('DD.MM.YYYY HH:MM');
  });

<static> setPrintQuality(quality)

Sets the print quality. Higher values are higher quality but takes longer to complete and use more memory. The viewer's default quality is 1.

Parameters:

Name	Type	Description
`quality`	number	The quality of the document to print. Must be a positive number.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setPrintQuality(2);
  });

<static> setScaleOverlayPosition(newPosition)

Sets the position of the scale overlay.

Parameters:

Name	Type	Description
`newPosition`	string	Must be one of the following: 'top-left', 'top-right', 'bottom-left', 'bottom-right'

Example

WebViewer(...)
 .then(function(instance) {
 instance.UI.setScaleOverlayPosition('bottom-right')
 });

<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> setTextSignatureQuality(multiplier)

Sets the multiplier used when creating typed, text signatures. This improves the quality of the rendered signature at the cost of more memory.

Parameters:

Name	Type	Description
`multiplier`	number	The multiplier value used to scale the image output

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setTextSignatureQuality(2);

<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> setTimezone(timezone)

Sets the timezone that will be used in the UI anywhere a date is displayed. A list of timezone names can be found at momentjs docs.

Parameters:

Name	Type	Description
`timezone`	string	Name of the timezone, e.g. "America/New_York", "America/Los_Angeles", "Europe/London".

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setTimezone('Europe/London');

<static> setToolbarGroup(groupDataElement [, pickTool])

Sets the current active toolbar group.

Parameters:

Name	Type	Argument	Description
`groupDataElement`	string		The groups dataElement. Default values are: toolbarGroup-View, toolbarGroup-Annotate, toolbarGroup-Shapes, toolbarGroup-Insert, toolbarGroup-Measure, toolbarGroup-Edit, toolbarGroup-Forms
`pickTool`	boolean	<optional>	If true, after setting the toolbar group, the last picked tool for the group will be set as the current tool. Defaults to true.

Example

WebViewer(...)
  .then(function(instance) {
    // Change the toolbar group to the `Shapes` group
    instance.UI.setToolbarGroup('toolbarGroup-Shapes');

<static> setToolMode(toolName)

Sets tool mode.

Parameters:

Name	Type	Description
`toolName`	string \| Core.Tools.ToolNames	Name of the tool, either from tool names list or the name you registered your custom tool with.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setToolMode('AnnotationEdit');
  });

<static> setTranslations(language, translationObject)

Add/Edit translations data for a specific language

Parameters:

Name	Type	Description
`language`	string	The language code for which you want to add/edit translation data
`translationObject`	Object.<string, string>	A key/value object with the new/updated translations. The key values of the translation object will be the translation key for the new/updated translation. Refer to the lib/ui/i18n folder to find the existing keys in the translation files The values of the translation object will be the value of the new/updated translation

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setTranslations('es',
    {
      'option.colorPalette.colorLabel': 'Etiqueta de color', //updates a pre-existing translation data
      'action.newButton': 'Nuevo botón' // adds a new translation data
    });
  });

<static> setWv3dPropertiesPanelModelData(modelData)

Set the WV3D Properties Panel with an array of model data objects

Parameters:

Name	Type	Description
`modelData`	array	Array of objects defining 3d metadata properties.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setWv3dPropertiesPanelModelData([{'name':'roof', 'height':'55cm'}, {'name':'wall', 'height':'100cm'}]);
  });

<static> setWv3dPropertiesPanelSchema(schema)

Set the configuration schema for the WV3D Properties Panel

Parameters:

Name Type Description

schema

object

Object containing options for configuring the 3d properties panel.

Properties

Name	Type	Description
`headerName`	string	Sets the Title Header
`defaultValues`	object	Defines the key/value pairs that will appear under the title, outside of a group.
`groups`	object	Defines the collapsible groups that appear below the default values.
`groupOrder`	array	Defines the order of the groups. If a group is not included it is appended to the end of the defined groups.
`removeEmptyRows`	boolean	Defines whether to remove rows that contain empty string values.
`removeEmptyGroups`	boolean	Defines whether to remove groups that contain only empty string values.
`createRawValueGroup`	boolean	Defines whether to create a final group that has all the raw values.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.setWv3dPropertiesPanelSchema({
      headerName: 'Name',
      defaultValues: {
        Description: 'Description',
        GlobalID: 'GlobalId',
        Handle: 'handle',
        EmptyRow1: 'EmptyRow1',
      },
      groups: {
        SampleGroup01: {
          SampleField01: 'Sample01',
          SampleField02: 'Sample02',
          SampleField03: 'Sample03',
          EmptyRow2: 'EmptyRow2',
          GrossFootprintArea: 'GrossFootprintArea',
          GrossSideArea: 'GrossSideArea',
          GrossVolume: 'GrossVolume',
        },
        SampleGroup02: {
          SampleField01: 'Sample01',
          SampleField02: 'Sample02',
          SampleField03: 'Sample03',
        },
        SampleGroup03: {
          ObjectType: 'Elephants',
          EmptyRow3: 'Tigers',
          ObjectPlacement: 'Bears',
        },
      },
      groupOrder: ['Dimensions', 'RandomStuff'],
      removeEmptyRows: false,
      removeEmptyGroups: true,
      createRawValueGroup: true,
    })
  });

<static> setZoomLevel(zoomLevel)

Sets zoom level.

Parameters:

Name	Type	Description
`zoomLevel`	string \| number	Zoom level in either number or percentage.

Example

WebViewer(...)
  .then(function(instance) {
    var docViewer = instance.Core.documentViewer;

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

<static> setZoomStepFactors(zoomStepFactors)

Set the zoom step size for zooming in/out. The API takes an array of zoomStepFactor that contains two properties: step: zoom step size when zooming in/out. It could be either percentage in a string or a number, ex. 50, '50', or '50%' all indicates 50%. startZoom: The zoom level that the step starts to apply. It could be either percentag in a string or a number, ex. 200, '200', or '200%' all indicates 200%.

Parameters:

Name	Type	Description
`zoomStepFactors`	Array.<Object>	An array that contains objects of zoomStep and zoom start level. zoomStepFactors must contain at least one zoomStepFactor object that has startZoom: 0

Properties:

Name	Type	Description
`zoomStepFactors[].step`	number \| string	Zoom step size as percentage in a string or a number, ex. '50', '50%', or 50 all indicates 50%.
`zoomStepFactors[].startZoom`	number \| string	Zoom level that the zoom step size starts to apply. It could be percentage in a string or a number, ex. '200', '200%', or 200 all indicates 200%.

Example

WebViewer(...)
  .then(function(instance) {
    const documentViewer = instance.Core.documentViewer;
    // you must have a document loaded when calling this api
    documentViewer.addEventListener('documentLoaded', function() {
      instance.UI.setZoomStepFactors([
        {
          step: '25', // indicates 25%, also accepts '25%'
          startZoom: '0'
        },
        {
          step: 50, // indicates 50%
          startZoom: 200 // indicates the step is 50% after zoom level 200%
        },
      ]);
    });
  });

<static> showFormFieldIndicators()

Show form field indicators to help navigate or guide users through the process of form filling.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.showFormFieldIndicators();
  });

<static> showWarningMessage(options)

Displays the custom error message

Parameters:

Name Type Description

options

string | object

Warning string message to display or an object for controlling the warning popup

Properties

Name	Type	Description
`confirmBtnText`	string	The text that will be rendered in the confirm button
`title`	string	The title of the modal
`message`	string	The text that will rendered in the body of the modal
`onConfirm`	function	The callback function that will be invoked when the user clicks the Confirm button. The callback must return a Promise that resolves.
`onCancel`	function	The callback function that will be invoked when the user clicks the Cancel button. The callback must return a Promise that resolves.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.showWarningMessage({
      title: 'This is my warning modal title',
      message: 'This is the body of my modal',
      confirmBtnText: 'Okay!',
      onConfirm: () => {
        console.log('The user clicked the confirm button');
        return Promise.resolve();
      },
      onCancel: () => {
        console.log('The user clicked the cancel button');
        return Promise.resolve();
      },
    });
  });

<static> signSignatureWidget(signatureWidget [, signature])

Signs a specified signature widget with a specified signature. If no signature is provided, select an available signature or start the process to create a new one, and then use it to sign the signature widget.

Parameters:

Name	Type	Argument	Description
`signatureWidget`	Core.Annotations.SignatureWidgetAnnotation		The signature widget to sign.
`signature`	Core.Annotations.FreeHandAnnotation \| Core.Annotations.StampAnnotation	<optional>	The signature annotation to sign with.

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.signSignatureWidget(signatureWidget, signature);
  });

<static> startTextComparison()

Activate text comparison (Only works when in MultiViewerMode with PDFs loaded for both sides)

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.startTextComparison();
  });

<static> stopTextComparison()

End text comparison and delete all text comparison annotations

Example

WebViewer(...)
 .then(function(instance) {
    instance.UI.stopTextComparison();
  });

<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> 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> updateElement(dataElement, props)

Update a button element in the viewer.

Parameters:

Name	Type	Description
`dataElement`	string	the data element of the button element that will be updated. Only the data element of HTML elements that are of the type 'button' will work. If you added a custom button, please ensure it is one of the following: button types
`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

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: '/favicon-32x32.png'
    });
  });

<static> useClientSidePrint( [use])

Use/not use embedded or rasterized printing options when connected to a WebViewer Server.

Parameters:

Name	Type	Argument	Default	Description
`use`	boolean	<optional>	true	Whether or not to use embedded printing

Example

WebViewer(...)
  .then(function(instance) {
    instance.UI.useClientSidePrint(false); // disable embedded printing
  });

<static> useEmbeddedPrint( [use])

Use/not use embedded printing. Currently unavailable on Android. The printing process will be faster and the quality might be higher when using browsers 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

AnnotationStyleTabConfiguration

Type:

object

Properties:

Name	Type	Description
`styleTabs`	Array.<string>	Indicates the available style tabs in the annotation style popup window. See UI.AnnotationStylePopupTabs.
`currentStyleTab`	string	The current tab in the annotation style popup window.

clickMiddleware(dataElement, info)

Parameters:

Name Type Description

dataElement string The dataElement of the clicked item

info

object

Properties

Name	Type	Description
`type`	string	The type of the clicked item. Will be one of UI.ClickedItemTypes

CustomApplyRedactionsHandler(annotations, originalApplyRedactionsFunction)

Parameters:

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

CustomMultiViewerAcceptedFileFormats(acceptedFileFormats)

Parameters:

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

CustomMultiViewerSyncHandler(primaryDocumentViewerKey, removeHandlerFunctions)

Parameters:

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

CustomNoteSelectionFunction(annotation)

Parameters:

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

CustomSettingItem

Type:

Object

Properties:

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

disableReplyForAnnotationsCallback(annotation)

Callback that gets passed to disableReplyForAnnotations.

Parameters:

Name	Type	Description
`annotation`	Core.Annotations.Annotation	Annotation object

Returns:

True if replies for the annotation passed in should be disabled. False otherwise.

Type: boolean

filterAnnotation(annotation)

Callback that gets passed to setCustomNoteFilter.

Parameters:

Name	Type	Description
`annotation`	Core.Annotations.Annotation	Annotation object

Returns:

Whether the annotation should be kept.

Type: boolean

filterAnnotation(annotation)

Callback that gets passed to setInlineCommentFilter.

Parameters:

Name	Type	Description
`annotation`	Core.Annotations.Annotation	Annotation object

Returns:

Whether the annotation should have inline comment feature enabled on select.

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

inherits from Core.loadDocumentOptions

Type:

Object

Properties:

Name Type Argument Default 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.

webViewerServerCustomQueryParameters object <optional> An object of custom query parameters to be appended to every WebViewer Server request.

documentId string <optional> Unique id of the document. Same as docId (For backward compatibility).

docId string <optional> Unique id of the document.

loadAnnotations boolean <optional> true Whether to load document with or without annotations.

onLoadingProgress function <optional> A callback function for loading progress (Only for files loaded over network), function signature: function(percent) {}.

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.

rasterizerOptions object <optional> An object that contains the rasterizer options for WebViewer Server.

officeOptions.templateValues Core.TemplateData <optional> If set, will perform template replacement with the data specified by this parameter.

officeOptions.templateOptions Core.TemplateOptions <optional> If set, it will interpret the office document as a template document and compile all of the template tags in the document using the provided options.

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

officeOptions.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://docs.apryse.com/documentation/web/faq/self-serve-substitute-fonts/ along with this option allows you to fully customize the substitution behaviour for all office files.

officeOptions.formatOptions

object

An object that contains formatting options for an Office document. Same options as allowed here Core.PDFNet.Convert.OfficeToPDFOptions.

Properties

Name	Type	Argument	Description
`hideTotalNumberOfPages`	boolean	<optional>	If true will hide total number of pages from page number labels (i.e, Page 1, Page 2, vs Page 1 of 2, Page 2 of 2)
`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.
`displayHiddenText`	boolean	<optional>	If true will display hidden text in document. Otherwise hidden text will not be shown. Defaults to false.
`displayComments`	number	<optional>	If set to 1, it will display comment annotations in the document. Otherwise, comment annotations will not be shown. Defaults to 0 - no comments.
`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.

enableOfficeEditing boolean <optional> If true, will load docx files with editing capabilities.

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://docs.apryse.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	Argument	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.
`palleteTypes`	Array.<string>	<optional>	An array of palette types. Can be 'fill' \| 'stroke' \| 'text'. (Only for StylePanel)

PanelProperties

Type:

Object

Properties:

Name	Type	Description
`dataElement`	string	The data-element for panel.
`location`	string	Location of the panel in UI, left or right.
`render`	string \| UI.renderCustomPanel	Either the name of a predefined panel to render or a function that returns a panel element.

RedactionSearchPattern

Type:

Object

Properties:

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

renderCustomModal()

Callback that gets passed to `options.render` in addCustomModal.

Returns:

Modal element. If string is returned, it will be displayed as is inside the modal. Accepts React components as the return value as well.

Type: HTMLElement | string

renderCustomPanel()

Callback that gets passed to `options.panel.render` in addPanel.

Returns:

Panel element.

Type: HTMLElement

renderCustomPanel()

Callback that gets passed to `options.panel.render` in setCustomPanel.

Returns:

Panel element.

Type: HTMLElement

searchListener(searchValue, options, results)

Callback that gets passed to addSearchListener.

Parameters:

Name	Type	Description
`searchValue`	string	Search value
`options`	object	Search options object, which includes 'caseSensitive', 'wholeWord', 'wildcard' and 'regex'
`results`	Array.<object>	Search results

setSignatureFontsCallback(fonts)

Parameters:

Name	Type	Description
`fonts`	Array.<string>	current font families

Returns:

fonts to set.

Type: Array.<string>

shouldRenderSeparator(prevNote, currNote)

Callback that gets passed to `sortStrategy.shouldRenderSeparator` in addSortStrategy.

Parameters:

Name	Type	Description
`prevNote`	Core.Annotations.Annotation	Previous note (annotation)
`currNote`	Core.Annotations.Annotation	Current note (annotation)

Returns:

Whether a separator should be rendered or not

Type: boolean

SignatureFilterFunction(annotation, index)

Parameters:

Name	Type	Description
`annotation`	Core.Annotations.Annotation	A signature annotation found in the SignatureCreateTool saved signatures list
`index`	number	An optional parameter for the index of the annotaiton parameter within the SignatureCreateTool saved signatures list

Returns:

Whether or not a signature annotation should be included in the annotation preset

Type: boolean

StyleTab

The style tab in the annotation style popup window. See UI.AnnotationStylePopupTabs for valid style tabs.

Type:

string

Events

annotationFilterChanged

Triggered when annotation filter in the notes panel has changed. Returns empty arrays if the filter is cleared.

Type: object

Properties:

Name	Type	Description
`types`	Array.<string>	Types filter
`authors`	Array.<string>	Author filter
`colors`	Array.<string>	Color filter
`statuses`	Array.<string>	Status filter

beforeTabChanged

Triggered before the UI switches tabs

Type: object

Properties:

Name Type Description

currentTab

object

An object containing the properties for the currently active tab (null if no currently active tab)

Properties

Name	Type	Description
`id`	number	The id of the tab being switched to
`src`	string	Source of current tab
`options`	string	Tab load options
`annotationsChanged`	boolean	True if the annotations have been changed since loading the tab

nextTab

object

An object containing the properties for the tab being switched to

Properties

Name	Type	Description
`id`	number	The id of the tab being switched to
`src`	string	Source of current tab
`options`	string	Tab load options

compareAnnotationsLoaded

Triggered when the compare annotations are loaded

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.

dropOutline

Triggered when dropping Outline item.

fileDownloaded

Triggered when the file has finished downloading.

fullscreenModeToggled

Triggered when fullscreen mode is toggled.

Type: object

Properties:

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

languageChanged

Triggered when the language changes in WebViewer via setLanguage

Type: object

Properties:

Name	Type	Description
`prev`	string	The previous language
`next`	string	The new language that was just set

loaderror

Triggered when there is an error loading the document.

Parameters:

Name	Type	Description
`err`	object	The error

modularUIImported

Triggered when a Modular UI JSON configuration is imported

Properties:

Name	Type	Description
`importedComponents`	object	The JSON object containing the imported components

multiViewerReady

Triggered when MultiViewerMode is enabled and ready to be interacted with

onTabManagerReady

Triggered when the Multi-Tab is ready and TabManager can be interacted with

outlineBookmarksChanged

Triggered when outline bookmarks have changed.

Parameters:

Name Type Description

bookmarkData

object

Properties

Name Type Description

bookmark

object

The changed bookmark

Properties

Name	Type	Description
`id`	string	Changed outline bookmark id
`name`	string	Changed outline bookmark name

path string Changed outline path in the outline tree

action string The action that triggered the outline bookmarks change

panelResized

Triggered when the panels are resized.

Type: object

Properties:

Name	Type	Description
`element`	string	DataElement name
`width`	number	New panel width

selectedThumbnailChanged

Triggered when the selected thumbnail changed.

Parameters:

Name	Type	Description
`selectedThumbnailPageIndexes`	array	The array of indexes of currently selected thumbnails

tabAdded

Triggered when a Tab is added

Type: object

Properties:

Name	Type	Description
`id`	number	The id of the tab being added
`src`	string	Source of current tab
`options`	string	Tab load options

tabDeleted

Triggered when a Tab is deleted

Type: object

Properties:

Name	Type	Description
`id`	number	The id of the tab being deleted
`src`	string	Source of current tab
`options`	string	Tab load options

tabMoved

Triggered when a Tab is moved

Type: object

Properties:

Name	Type	Description
`id`	number	The id of the tab being moved
`src`	string	Source of moved tab
`options`	string	Tab load options
`prevIndex`	number	Previous index of tab
`newIndex`	number	New index of tab

themeChanged

Triggered when the UI theme has changed.

Parameters:

Name	Type	Description
`theme`	string	The new UI theme

thumbnailDragged

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

thumbnailDropped

Triggered when dragged thumbnail(s) are dropped to a new location in the thumbnail panel

Type: object

Properties:

Name	Type	Description
`pageNumbersBeforeMove`	Array.<number>	The array of page numbers to be moved
`pageNumbersAfterMove`	Array.<number>	The array of page numbers of where thumbnails being dropped
`numberOfPagesMoved`	number	Number of page(s) being moved

toolbarGroupChanged

Triggered when the toolbar group has changed.

Parameters:

Name	Type	Description
`toolbarGroup`	string	The new toolbar group

tooltipOpened

Triggered when a tooltip is opened

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

detail

object

Properties

Name	Type	Description
`element`	string	DataElement name
`isVisible`	boolean	The new visibility