> 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.