> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/events/ui-events.md).

# Listening to WebViewer UI events

Explore the UI namespace in WebViewer for APIs and objects related to the default UI. Learn how to trigger events and customize interactions with the UI elements effectively. The Apryse Web SDK stream

The [`UI`](/web/what-is-webviewer/usage.md#ui-namespace) 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`](https://sdk.apryse.com/api/web/UI.html#event:loaderror) event was first introduced in the [loading guide](/web/events/loading-events.md#document-load-error-handling). 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`](https://sdk.apryse.com/api/web/Core.html#.createDocument) API.

{% hint style="info" %}
This event is subscribable from the iframe window for WebViewer 7 and below.
{% endhint %}

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[UI#loaderror](https://sdk.apryse.com/api/web/UI.html#event:loaderror) [UI.displayErrorMessage](https://sdk.apryse.com/api/web/UI.html#.displayErrorMessage)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[UI#loaderror](https://sdk.apryse.com/api/web/UI.html#event:loaderror) [UI.displayErrorMessage](https://sdk.apryse.com/api/web/UI.html#.displayErrorMessage)
{% endtab %}
{% endtabs %}

{% hint style="info" %}
This may be helpful when creating [custom UIs](/web/ui-customization/core.md) that need to report document load errors.
{% endhint %}

## Toolbar events

When the user changes toolbar groups in the header, a [`toolbarGroupChanged`](https://sdk.apryse.com/api/web/UI.html#event:toolbarGroupChanged) event will trigger to indicate the new group.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[UI#toolbarGroupChanged](https://sdk.apryse.com/api/web/UI.html#event:toolbarGroupChanged) [UI.ToolbarGroup](https://sdk.apryse.com/api/web/UI.html#.ToolbarGroup) [UI.openElements](https://sdk.apryse.com/api/web/UI.html#.openElements)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[UI#toolbarGroupChanged](https://sdk.apryse.com/api/web/UI.html#event:toolbarGroupChanged) [UI.openElements](https://sdk.apryse.com/api/web/UI.html#.openElements)
{% endtab %}
{% endtabs %}

## 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](https://sdk.apryse.com/api/web/UI.html#event:selectedThumbnailChanged__anchor)
* [thumbnailDragged](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:thumbnailDragged__anchor)
* [thumbnailDropped](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:thumbnailDropped__anchor)

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[UI#selectedThumbnailChanged](https://sdk.apryse.com/api/web/UI.html#event:selectedThumbnailChanged) [AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

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

{% endcode %}

[UI#selectedThumbnailChanged](https://sdk.apryse.com/api/web/UI.html#event:selectedThumbnailChanged) [AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList)
{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/events/ui-events.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.