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.

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.

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

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

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']);
      }
    });
  });

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

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