Action APIs

Actions APIs are strictly related to the UI only.

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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.closeElements(['textPopup', 'annotationPopup');
});

linkdisableElement(dataElement)

Hide a single element in the DOM.

Parameters

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

Returns

  • N/A

Example

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

linkdisableElements(dataElements)

Hide multiple elements in the DOM.

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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.disableElements([ 'leftPanel', 'leftPanelButton' ]);
});

linkenableAllElements()

Show all the hidden elements in the DOM.

Parameters

  • N/A

Returns

  • N/A

Example

// renders all the elements in the DOM
$(viewerElement).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.enableAllElements();
});

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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.enableElements([ 'leftPanel', 'leftPanelButton' ]);
});

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.actions.focusNote(annotation.Id); // note it is a capital i
    }
  });
});

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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.openElements(['textPopup', 'annotationPopup');
});

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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  // open left panel
  viewerInstance.actions.openElement('LeftPanel');
  // render notes in the left panel
  viewerInstance.actions.setActiveHeaderGroup('NotesPanel');
});

linksetHeaderItems(handler[, headerGroup])

Replaces the header items with a different group. Refer to Customizing header for creating header items.

Parameters

  • handler (function) - Function that returns a new header items array. The original array is passed to the handler as an argument.
  • headerGroup (string, optional) - Name of the header group to modify. If not set, the function will modify currently active header group. Default WebViewer UI has two header groups: default and tools.

Returns

  • N/A

Example

$(viewerElement).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.setHeaderItems((headerItems) => {
    // remove the first item
    headerItems.splice(0, 1);
    // re-order the items
    headerItems.reverse();
    // add a new header item at the end
    // refer to "Customzing header" guide for creating header items
    headerItems.push(newHeaderItem);
    return headerItems;
  });
});

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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.setSortNotesBy('time');
});

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).on('ready', () => {
  const viewerInstance = viewer.getInstance();
  viewerInstance.actions.toggleElement('leftPanel');
});