Section:

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.

1WebViewer({
2  initialDoc: 'https://myserver.com/myfile.pdf'
3}, document.getElementById('viewer'))
4  .then(instance => {
5    instance.UI.addEventListener('loaderror', err => {
6      instance.UI.displayErrorMessage(err.detail.message);
7    });
8  });

Related Links

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.

1WebViewer({
2  initialDoc: 'https://myserver.com/myfile.pdf'
3}, document.getElementById('viewer'))
4  .then(instance => {
5    const { ToolbarGroup } = instance.UI;
6
7    instance.UI.addEventListener('toolbarGroupChanged', e => {
8      if (e.detail === ToolbarGroup.ANNOTATE) {
9        instance.UI.openElements(['notesPanel']);
10      }
11    });
12  });

Related Links

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.

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

Related Links

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales