Listening to WebViewer UI events

The UI namespace contains APIs and objects related to the default WebViewer UI. It can also trigger events related to the UI to detect when users interact with the UI. For example, it could be used to open the notes panel when the tool group changes or when certain thumbnails are selected.

Document Load Error event

The loaderror event was first introduced in the loading guide. This event is triggered from the UI due to the WebViewer Core maintaining a level of customizability on document load error handling via the onError option of the createDocument API.

This event is subscribable from the iframe window for WebViewer 7 and below.

JavaScript (SDK v8.0+)

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    instance.UI.addEventListener('loaderror', err => {
      instance.UI.displayErrorMessage(err.detail.message);
    });
  });

UI#loaderror UI.displayErrorMessage

JavaScript (SDK v6.0+)

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { iframeWindow } = instance;

    // loaderror is only available through the iframe for WebViewer 7 and below
    iframeWindow.addEventListener('loaderror', err => {
      instance.UI.displayErrorMessage(err.detail.message);
    });
  });

UI#loaderror UI.displayErrorMessage

This may be helpful when creating custom UIs that need to report document load errors.

Toolbar events

When the user changes toolbar groups in the header, a toolbarGroupChanged event will trigger to indicate the new group.

JavaScript (SDK v8.0+)

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { ToolbarGroup } = instance.UI;

    instance.UI.addEventListener('toolbarGroupChanged', e => {
      if (e.detail === ToolbarGroup.ANNOTATE) {
        instance.UI.openElements(['notesPanel']);
      }
    });
  });

UI#toolbarGroupChanged UI.ToolbarGroup UI.openElements

JavaScript (SDK v6.0+)

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    instance.on('toolbarGroupChanged', e => {
      if (e.detail === 'toolbarGroup-Annotate') {
        instance.openElements(['notesPanel']);
      }
    });
  });

UI#toolbarGroupChanged UI.openElements

Thumbnail events

If you want to react to interactions with the thumbnails in the thumbnails panel, WebViewer also provides a set of events that can be listened to.

• selectedThumbnailChanged
• thumbnailDragged
• thumbnailDropped

JavaScript (SDK v8.0+)

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { annotationManager } = instance.Core;
    instance.UI.addEventListener('selectedThumbnailChanged', e => {
      instance.UI.openElements(['notesPanel']);
      const annots = annotationManager.getAnnotationsList().filter(annot => e.details.includes(annot.PageNumber));
      // Work with annotations on those pages
    });
  });

UI#selectedThumbnailChanged AnnotationManager.getAnnotationsList

JavaScript (SDK v6.0+)

WebViewer({
  initialDoc: 'https://myserver.com/myfile.pdf'
}, document.getElementById('viewer'))
  .then(instance => {
    const { annotManager } = instance.;
    instance.on('selectedThumbnailChanged', e => {
      instance.openElements(['notesPanel']);
      const annots = annotManager.getAnnotationsList().filter(annot => e.details.includes(annot.PageNumber));
      // Work with annotations on those pages
    });
  });

UI#selectedThumbnailChanged AnnotationManager.getAnnotationsList