Some test text!

Loading...
Guides
UI events

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

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

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.

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

Get the answers you need: Support

Upcoming Webinar: PDFTron SDK Tech Review | Nov 29, 2022 at 2 pm ET

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use