Some test text!

UI APIs

In this document
chevron_rightaddSearchListener(listener)
chevron_rightcloseDocument()
chevron_rightcloseElement(dataElement)
chevron_rightcloseElements(dataElements)
chevron_rightdisableElement(dataElement)
chevron_rightdisableElements(dataElements)
chevron_rightdisableTool(toolName)
chevron_rightdisableTools(toolNames)
chevron_rightdownloadPdf(includeAnnotations)
chevron_rightenableAllElements()
chevron_rightenableAnnotations(enable)
chevron_rightenableDownload(enable)
chevron_rightenableElement(dataElement)
chevron_rightenableElements(dataElements)
chevron_rightenableFilePicker(enable)
chevron_rightenableNotesPanel(enable)
chevron_rightenablePrint(enable)
chevron_rightenableTextSelection(enable)
chevron_rightenableTool(toolName)
chevron_rightenableTools(toolNames)
chevron_rightfocusNote(annotationId)
chevron_rightgetAnnotationUser()
chevron_rightgetCurrentPageNumber()
chevron_rightgetFitMode()
chevron_rightgetLayoutMode()
chevron_rightgetPageCount()
chevron_rightgetToolMode()
chevron_rightgetZoomLevel()
chevron_rightgoToFirstPage()
chevron_rightgoToLastPage()
chevron_rightgoToNextPage()
chevron_rightgoToPrevPage()
chevron_rightisAdminUser()
chevron_rightisElementDisabled(dataElement)
chevron_rightisElementOpen(dataElement)
chevron_rightisMobileDevice()
chevron_rightisReadOnly()
chevron_rightisToolDisabled(toolName)
chevron_rightloadDocument(documentPath
chevron_rightopenElement(dataElement)
chevron_rightopenElements(dataElements)
chevron_rightregisterTool(properties)
chevron_rightremoveSearchListener(listener)
chevron_rightrotateClockwise()
chevron_rightrotateCounterClockwise()
chevron_rightsaveAnnotations()
chevron_rightsearchText(searchValue
chevron_rightsearchTextFull(searchValue
chevron_rightsetActiveHeaderGroup(headerGroup)
chevron_rightsetActiveLeftPanel(dataElement)
chevron_rightsetAdminUser(isAdmin)
chevron_rightsetAnnotationUser(username)
chevron_rightsetCurrentPageNumber(pageNumber)
chevron_rightsetFitMode(fitMode)
chevron_rightsetHeaderItems(handler)
chevron_rightsetLanguage(language)
chevron_rightsetLayoutMode(layoutMode)
chevron_rightsetPrintQuality(quality)
chevron_rightsetReadOnly(isReadOnly)
chevron_rightsetSortNotesBy(sortNotesBy)
chevron_rightsetTheme(theme)
chevron_rightsetToolMode(toolName)
chevron_rightsetZoomLevel(zoomLevel)
chevron_righttoggleElement(dataElement)
chevron_righttoggleFullScreen()
chevron_rightunregisterTool(toolName)
chevron_rightupdateTool(toolName, properties)

linkaddSearchListener(listener)

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

Parameters

  • listener (function) - Listener function that will be triggered when search completed. The function will receive the following parameters:

    • searchValue (string) - Search value
    • options (object) - Search options object, which includes caseSensitive, wholeWord, wildcard and regex
    • results (array of objects) - Search results

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  const searchListener = (searchValue, options, results) => { ... };
  viewerInstance.addSearchListener(searchListener);
});

linkcloseDocument()

Closes the document that's currently opened

Parameters

  • N/A

Returns

  • Promise

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.closeDocument().then(function() {
    console.log('Document is closed');
  });
});

linkcloseElement(dataElement)

Sets a visibility state of the element to be hidden. Note that closeElement works only for panel/overlay/popup/modal elements.

Parameters

  • dataElement (string) - data-element attribute value for a DOM element.

Returns

  • N/A

Example

// closes (hides) left panel in the UI
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.closeElement('leftPanel');
});

linkcloseElements(dataElements)

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

Parameters

  • dataElements (array of strings) - Array of data-element attribute values for DOM elements.

Returns

  • N/A

Example

// closes (hides) text popup and annotation popup in the UI
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.closeElements([ 'menuOverlay', 'leftPanel' ]);
});

linkdisableElement(dataElement)

Unmount a single element in the DOM. Note that this ONLY removes the DOM element without disabling related features (ie. To disable an annotation tool entirely, see enableTool).

Parameters

  • dataElement (string) - data-element attribute value for a DOM element.

Returns

  • N/A

Example

// removes left panel button from the DOM
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableElement('leftPanelButton');
});

linkdisableElements(dataElements)

Unmount multiple elements in the DOM. Note that this ONLY removes the DOM elements without disabling related features (ie. To disable an annotation tool entirely, see enableAnnotationTool).

Parameters

  • dataElements (array of strings) - Array of data-element attribute values for DOM elements.

Returns

  • N/A

Example

// remove left panel and left panel button from the DOM
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableElements([ 'leftPanel', 'leftPanelButton' ]);
});

linkdisableTool(toolName)

Disable a tool.

Parameters

  • toolName (string) - Name of the tool, either from tool names list or the name you registered your custom tool with.

Returns

  • N/A

Example

// disable sticky annotation tool
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableTool('AnnotationCreateSticky');
});

linkdisableTools(toolNames)

Disable multiple tools.

Parameters

  • toolNames (array of string) - Array of name of the tools, either from tool names list or the name you registered your custom tool with.

Returns

  • N/A

Example

// disable sticky annotation tool and free text tool
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.disableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
});

linkdownloadPdf(includeAnnotations)

Downloads the pdf document with or without annotations added by WebViewer UI.

Parameters

  • includeAnnotations (boolean) - Whether or not to include annotations added by WebViewer UI. Default is true.

Returns

  • N/A

Example

// download pdf without annotations added by WebViewer UI
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.downloadPdf(false);
});

linkenableAllElements()

Re-mount all the unmounted elements in the DOM.

Parameters

  • N/A

Returns

  • N/A

Example

// renders all the elements in the DOM
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableAllElements();
});

linkenableAnnotations(enable)

Enables/disables annotations feature, affecting the annotation visibility and elements related to annotations.

Parameters

  • enable (boolean) - Whether or not to enable annotations feature. Default is true.

Returns

  • N/A

Example

// disable annotations feature
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableAnnotations(false);
});

linkenableDownload(enable)

Enables/disables download feature, affecting the Download button in menu overlay.

Parameters

  • enable (boolean) - Whether or not to enable download feature. Default is true.

Returns

  • N/A

Example

// disable download feature
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableDownload(false);
});

linkenableElement(dataElement)

Show the hidden element in the DOM.

Parameters

Returns

  • N/A

Example

// renders left panel button (that was disabled) in the DOM
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableElement('leftPanelButton');
});

linkenableElements(dataElements)

Show the hidden elements in the DOM.

Parameters

Returns

  • N/A

Example

// render the left panel and left panel button (that were disabled) in the DOM
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});

linkenableFilePicker(enable)

Enables/disables file picker feature, affecting the Open files button in menu overlay and shortcut to open local files (ctrl/cmd + o).

Parameters

  • enable (boolean) - Whether or not to enable file picker feature. Default is true.

Returns

  • N/A

Example

// enable file picker feature
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableFilePicker();
});

linkenableNotesPanel(enable)

Enables/disables notes panel feature, affecting any elements related to notes panel.

Parameters

  • enable (boolean) - Whether or not to enable notes panel feature. Default is true.

Returns

  • N/A

Example

// disable notes panel feature
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableNotesPanel(false);
});

linkenablePrint(enable)

Enables/disables print feature, affecting the Print button in menu overlay and shortcut to print (ctrl/cmd + p).

Parameters

  • enable (boolean) - Whether or not to enable print feature. Default is true.

Returns

  • N/A

Example

// disable print feature
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enablePrint(false);
});

linkenableTextSelection(enable)

Enables/disables text to be selected in the document.

Parameters

  • enable (boolean) - Whether or not to enable text selection feature. Default is true.

Returns

  • N/A

Example

// disable text to be selected in the document
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableTextSelection(false);
});

linkenableTool(toolName)

Enable a tool.

Parameters

  • toolName (string) - Name of the tool, either from tool names list or the name you registered your custom tool with.

Returns

  • N/A

Example

// enable sticky annotation tool
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableTool('AnnotationCreateSticky');
});

linkenableTools(toolNames)

Enable multiple tools.

Parameters

  • toolNames (array of string) - Array of name of the tools, either from tool names list or the name you registered your custom tool with.

Returns

  • N/A

Example

// enable sticky annotation tool and free text tool
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.enableTools([ 'AnnotationCreateSticky', 'AnnotationCreateFreeText' ]);
});

linkfocusNote(annotationId)

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

Parameters

  • annotationId (string) - Id of an annotation.

Returns

  • N/A

Example

// Focus the note when annotation is created
const annotationManager = viewerInstance.docViewer.getAnnotationManager();
annotationManager.on('annotationChanged', (e, annotations, action) => {
  annotations.forEach((annotation) => {
    if (action === 'add' && annotation.Listable) {
      viewerInstance.focusNote(annotation.Id); // note it is a capital i
    }
  });
});

linkgetAnnotationUser()

Return the current username.

Parameters

  • N/A

Returns

  • Username (string)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getAnnotationUser());
});

linkgetCurrentPageNumber()

Return the current page number (1-indexed) of the document loaded in the WebViewer.

Parameters

  • N/A

Returns

  • Current page number (number)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getCurrentPageNumber());
});

linkgetFitMode()

Return the current fit mode of the WebViewer.

Parameters

  • N/A

Returns

  • Fit mode (viewerInstance.FitMode)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getFitMode());
});

linkgetLayoutMode()

Return the current layout mode of the WebViewer.

Parameters

  • N/A

Returns

  • Layout mode (viewerInstance.LayoutMode)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getLayoutMode());
});

linkgetPageCount()

Return the total number of pages of the document loaded in the WebViewer.

Parameters

  • N/A

Returns

  • Total page number (number)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getPageCount());
});

linkgetToolMode()

Return the current tool object.

Parameters

  • N/A

Returns

  • Instance of the current tool (object)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getToolMode().name, viewerInstance.getToolMode());
});

linkgetZoomLevel()

Return the current zoom level

Parameters

  • N/A

Returns

  • Zoom level (number)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.getZoomLevel());
});

linkgoToFirstPage()

Go to the first page of the document. Makes the document viewer display the first page of the document.

Parameters

  • N/A

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.goToFirstPage();
});

linkgoToLastPage()

Go to the last page of the document. Makes the document viewer display the last page of the document.

Parameters

  • N/A

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.goToLastPage();
});

linkgoToNextPage()

Go to the next page of the document. Makes the document viewer display the next page of the document.

Parameters

  • N/A

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.goToNextPage();
});

linkgoToPrevPage()

Go to the previous page of the document. Makes the document viewer display the previous page of the document.

Parameters

  • N/A

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.goToPrevPage();
});

linkisAdminUser()

Returns whether the current user is admin.

Parameters

  • N/A

Returns

  • isAdmin (boolean)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isAdminUser());
});

linkisElementDisabled(dataElement)

Returns whether the element is disabled.

Parameters

Returns

  • isDisabled (boolean)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isElementDisabled('leftPanel'));
});

linkisElementOpen(dataElement)

Returns whether the element is open.

Parameters

Returns

  • isOpen (boolean)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isElementOpen('leftPanel'));
});

linkisMobileDevice()

Returns if the current browser is on a mobile device.

Parameters

  • N/A

Returns

  • true if this page is loaded on a mobile device.

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isMobileDevice());
});

linkisReadOnly()

Returns whether the current mode is read only.

Parameters

  • N/A

Returns

  • isReadOnly (boolean)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isReadOnly());
});

linkisToolDisabled(toolName)

Returns whether the tool is disabled.

Parameters

  • toolName (string) - Name of the tool, either from tool names list or the name you registered your custom tool with.

Returns

  • isDisabled (boolean)

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  console.log(viewerInstance.isToolDisabled('AnnotationCreateSticky'));
});

linkloadDocument(documentPath[, options])

Load a document inside WebViewer UI.

Parameters

  • documentPath (string or fileObject) - Path to the document OR file object if opening local file.
  • options (object, optional) - Object with following parameters:

    • documentId (string) - Unique id of the document.
    • filename (string) - Filename of the document, which is used when downloading the PDF.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.loadDocument('/path/to/document.pdf', { documentId: '1', filename: 'sample-1' });
});

linkopenElement(dataElement)

Sets a visibility state of the element to be visible. Note that openElement works only for panel/overlay/popup/modal elements.

Parameters

Returns

  • N/A

Example

// opens (shows) left panel in the UI
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.openElement('leftPanel');
});

linkopenElements(dataElements)

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

Parameters

Returns

  • N/A

Example

// opens (shows) text popup and annotation popup in the UI
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.openElements([ 'menuOverlay', 'leftPanel' ]);
});

linkregisterTool(properties)

Registers tool in the document viewer tool mode map, and adds a button object to be used in the header.

Parameters

  • properties (object) - An object containing the followings:

    • toolName (string) - Name of the tool.
    • toolObject (string) - Instance of the tool. For more information about creating a custom tool object, refer to Customizing tools.
    • 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.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.registerTool({
    toolName: 'MyTool',
    toolObject: myCustomTool,
    buttonImage: 'path/to/image',
    buttonName: 'myToolButton',
    buttonGroup: 'miscTools',
    tooltip: 'MyTooltip'
  });
});

linkremoveSearchListener(listener)

Removes the search listener function.

Parameters

  • listener (function) - Search listener function that was added.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  const searchListener = (searchValue, options, results) => { ... };
  viewerInstance.addSearchListener(searchListener);
  viewerInstance.removeSearchListener(searchListener);
});

linkrotateClockwise()

Rotates the document in the WebViewer clockwise.

Parameters

  • N/A

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.rotateClockwise();
});

linkrotateCounterClockwise()

Rotates the document in the WebViewer counter-clockwise.

Parameters

  • N/A

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.rotateCounterClockwise();
});

linksaveAnnotations()

Saves the annotations to the serverUrl specified in the constructor options using a POST request.

Parameters

  • N/A

Returns

  • N/A

Example

// saves the annotation to serverUrl
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.saveAnnotations();
});

linksearchText(searchValue[, options])

Searches the current page for the texts matching searchValue.

Parameters

  • searchValue (string) - The text value to look for.
  • options (object, optional) - Search options with following parameters:

    • caseSensitive (boolean) - Option to search with matching cases.
    • wholeWord (boolean) - Option to search whole words only.
    • wildcard (boolean) - Option to search a string with a wildcard *. For example, *viewer.
    • regex (boolean) - Option to search for a regex string. For example, www(.*)com.
    • searchUp (boolean) - Option to search up the document (backwards).
    • ambientString (boolean) - Option to get the ambient string in the result.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.searchText('test', 'CaseSensitive,WholeWord');
});

linksearchTextFull(searchValue[, options])

Searches the full document for the texts matching searchValue.

Parameters

  • searchValue (string) - The text value to look for.
  • options (object, optional) - Search options with following parameters:

    • caseSensitive (boolean) - Option to search with matching cases.
    • wholeWord (boolean) - Option to search whole words only.
    • wildcard (boolean) - Option to search a string with a wildcard *. For example, *viewer.
    • regex (boolean) - Option to search for a regex string. For example, www(.*)com.

Returns

  • N/A

Example

// search for string 'test', and match whole words only
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.executeSearch('test', { wholeWord: true });
});

linksetActiveHeaderGroup(headerGroup)

Sets a header group to be rendered in the Header element. This API comes useful when replacing the entire header items in small screens. For more information about header items and groups, refer to Header composition.

Parameters

  • headerGroup (string) - Name of the header group to be rendered. Default WebViewer UI has two header groups: default and tools.

Returns

  • N/A

Example

// switch to tools header
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setActiveHeaderGroup('tools');
});

linksetActiveLeftPanel(dataElement)

Sets a panel to be active in the leftPanel element. Note that this API does not include opening the leftPanel.

Parameters

  • dataElement (string) - Name of the panel to be active in leftPanel. Default WebViewer UI has three panel options: thumbnailsPanel, outlinesPanel and notesPanel.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  // open left panel
  viewerInstance.openElement('leftPanel');
  // view outlines panel
  viewerInstance.setActiveLeftPanel('outlinesPanel');
});

linksetAdminUser(isAdmin)

Sets the current user to be admin or not. Admin users have permission to edit/delete any annotations, including the ones they didn't create.

Parameters

  • isAdmin (boolean) - Whether or not to set the current user to be an admin.

Returns

  • N/A

Example

// sets the current user to be an admin
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setAdminUser(true);
});

linksetAnnotationUser(username)

Sets name of the current user

Parameters

  • username (string) - Username to be used for current user.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setAnnotationUser('Guest-1');
});

linksetCurrentPageNumber(pageNumber)

Sets the current page number (1-indexed) of the document loaded in the WebViewer.

Parameters

  • pageNumber (number) - The page number of the document to set

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setCurrentPageNumber(1);
});

linksetFitMode(fitMode)

Sets the fit mode of the viewer.

Parameters

  • fitMode (viewerInstance.FitMode)

    • viewerInstance.FitMode.FitPage
    • viewerInstance.FitMode.FitWidth
    • viewerInstance.FitMode.Zoom

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setFitMode(viewerInstance.FitMode.FitWidth);
});

linksetHeaderItems(handler)

Customize header. Refer to Customizing header for creating header items.

Parameters

  • handler (function) - Function that returns a new header. A header object is passed in as a parameter. The default header group is default. WebViewer UI has two header groups: default and tools

    • methods of the header object:
    • getHeader(headerGroup)
    • get(dataElement)
    • insertBefore(newItem)
    • insertAfter(newItem)
    • delete(dataElement)
    • deleteElementAtIndex(index)
    • shift()
    • unshift(newItem1, newItem2, ...)
    • push(newItem1, newItem2, ...)
    • pop()
    • getItems()
    • update()

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setHeaderItems((header) => {
    // refer to "Customzing header" guide for creating header items 
    const newItem = {...}
    // insert newItem before freeHandToolGroupButton in default header
    header.get('freeHandToolGroupButton').insertBefore(newItem);
    // insert newItem after stickyToolButton in tools header
    header.getHeader('tools').get('stickyToolButton').insertAfter(newItem);
    // remove the first item
    header.shift();
    // remove the last item
    header.pop();
    // add newItem before the first element
    header.unshift(newItem);
    // add newItem after the last element
    header.push(newItem);
    // delete freeHandToolGroupButton
    header.delete('freeHandToolGroupButton')
    // delete the second element
    header.deleteElementAtIndex(1);
    // I want to do more things about the header but you didn't provide those methods
    const headerItems = header.getItems();
    // headerItems is a plain array, you can use any Array methods
    // for example, reverse the order of items in the header
    const reversedItems = headerItems.reverse();
    header.update(reversedItems);
  });
});

linksetLanguage(language)

Set the language of WebViewer UI.

Parameters

  • language (string) - The language WebViewer UI will use

Returns

  • N/A

Example

// sets the current user to be an admin
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setLanguage('en');
});

linksetLayoutMode(layoutMode)

Sets the layout mode of the viewer.

Parameters

  • layoutMode (viewerInstance.LayoutMode)

    • viewerInstance.LayoutMode.Single
    • viewerInstance.LayoutMode.Continuous
    • viewerInstance.LayoutMode.Facing
    • viewerInstance.LayoutMode.FacingContinuous
    • viewerInstance.LayoutMode.FacingCover
    • viewerInstance.LayoutMode.FacingCoverContinuous

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setLayoutMode(viewerInstance.LayoutMode.FacingContinuous);
});

linksetPrintQuality(quality)

Sets the print quality. Higher values are higher quality but takes longer to complete and use more memory.

Parameters

  • quality (number) - The quality of the document to print

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setPrintQuality(2);
});

linksetReadOnly(isReadOnly)

Sets the WebViewer UI to be a read only mode. In read only mode, users cannot create/edit annotations.

Parameters

  • isReadOnly (boolean) - Whether or not to set the WebViewer UI to be in in read only mode.

Returns

  • N/A

Example

// sets the viewer to read only mode
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setReadOnly(true);
});

linksetSortNotesBy(sortNotesBy)

Sets a sorting algorithm in NotesPanel.

Parameters

  • sortNotesBy (string) - Name of the algorithm. Default WebViewer UI has two algorithm options: position and time.

Returns

  • N/A

Example

// sort notes by time
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setSortNotesBy('time');
});

linksetTheme(theme)

Sets the theme of Webviewer UI. Please note that this does not work in IE11.

Parameters

  • theme (object or string)

    • object properties:
    • primary: Background color for the header, modals, overlays, etc. Default is #FFFFFF
    • secondary: Background color for panels and the document container. Default is #F5F5F5
    • border: Border color for different components. Default is #CDCDCD
    • buttonHover: Background color for hovering on a button. Default is #F6F6F6
    • buttonActive: Background color for an active button. Default is #F0F0F0
    • text: Text color. Default is #333333
    • icon: Icon color. Default is #757575
    • iconActive: Icon color when button is active. Default is #757575
    • string:
    • default or dark

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setTheme({
    primary: '#2C2B3A',
    secondary: '#4D4C5F',
    border: '#555555',
    buttonHover: '#686880',
    buttonActive: '#686880',
    text: '#FFFFFF',
    icon: '#FFFFFF',
    iconActive: '#FFFFFF'
  });
});

linksetToolMode(toolName)

Sets tool mode.

Parameters

  • toolName (string) - Name of the tool, either from tool names list or the name you registered your custom tool with.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setToolMode('AnnotationEdit');
});

linksetZoomLevel(zoomLevel)

Sets zoom level.

Parameters

  • zoomLevel (number or string) - Zoom level in either number or percentage.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.setZoomLevel('150%'); // or setZoomLevel(1.5)
});

linktoggleElement(dataElement)

Toggles a visibility state of the element to be visible/hidden. Note that toggleElement works only for panel/overlay/popup/modal elements.

Parameters

Returns

  • N/A

Example

// open LeftPanel if it is closed, or vice versa
viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.toggleElement('leftPanel');
});

linktoggleFullScreen()

Toggles full scree mode of the browser

Parameters

  • N/A

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.toggleFullScreen();
});

linkunregisterTool(toolName)

Unregisters tool in the document viewer tool mode map, and removes the button object.

Parameters

  • toolName (string) - Name of the tool, either from tool names list or the name you registered your custom tool with.

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.unregisterTool('MyTool');
});

linkupdateTool(toolName, properties)

Update existing tool's properties.

Parameters

  • toolName (string) - Name of the tool, either from tool names list or the name you registered your custom tool with.
  • properties (object) - An object containing the followings:

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

Returns

  • N/A

Example

viewerElement.addEventListener('ready', function() {
  const viewerInstance = viewer.getInstance();
  viewerInstance.updateTool('AnnotationCreateRectangle', { buttonGroup: 'miscTools' });
});