Section:

Customizing WebViewer UI Popups

The popups in WebViewer UI are small floating menus.

In WebViewer UI, there are 4 types of popups:

Apryse Docs Image
  • text popup; appears on highlight of a text when using select tool

Apryse Docs Image

Apryse Docs Image

Apryse Docs Image

There are a number of ways you may want to customize Popups. To name a few:

The WebViewer UI provides API's to easily handle each of these cases and more.

Get items

The unique identifier of the items in the popup can be retrieved using the getItems API.
It returns an array of objects where each object contains a key that denotes the dataElement.

Adding items

Adding items can be done using the add API.
The type of items to add can be found in the list of items for Modular UI.

Add new items at beginning of the popup

To add new items at beginning of the popup, do not provide a second parameter to the add function.

1WebViewer(...)
2  .then(function(instance) {
3    instance.UI.contextMenuPopup.add({
4      type: 'actionButton',
5      label: 'some-label',
6      onClick: () => console.log('clicked'),
7    });
8  });

Add new items at a specific location in the popup

There are 2 ways to do this.

Option one:

  • If you know the specific element you want it to be after then you can provide a valid dataElement string as a second parameter. This will insert the new item(s) after the specified data element.

Option two:

  • If you know the index where you want to add it (for example as the last button) then you can get the list of data elements in the popup using the getItems API. Then retrieve the data element from the item at that index.
1WebViewer(...)
2  .then(function(instance) {
3    // insert after the last element in the popup
4    const contextMenuItems = instance.UI.contextMenuPopup.getItems();
5    const lastItem = contextMenuItems[contextMenuItems.length - 1];
6
7    instance.UI.contextMenuPopup.add({
8      type: 'actionButton',
9      label: 'Get selected text',
10      onClick: () => console.log(instance.Core.documentViewer.getSelectedText()),
11    },
12    lastItem.dataElement);
13  });

Modifying items

Existing items can be modified using updateElements.
The items in the popup can be replaced using update.

Update existing elements' properties

1WebViewer(...)
2  .then(function(instance) {
3    // Updating existing sticky tool button in context menu popup with new label and new on click handler
4    instance.UI.updateElement("stickyToolButton", {label: 'new-label', onClick: () => console.log('clicked')});
5  });

Replace existing elements

1WebViewer(...)
2  .then(function(instance) {
3    // replace existing items with a new array of items
4    instance.UI.contextMenuPopup.update([
5      {
6        type: 'actionButton',
7        label: '1',
8        onClick: () => console.log('clicked'),
9      },
10      {
11        type: 'actionButton',
12        label: '2',
13        onClick: () => console.log('clicked'),
14      },
15    ]);
16  });

Update ordering of elements in the popup

This can be done by:

  1. Get the list of data elements in the popup using the getItems API
  2. Modify ordering of the elements in the list retrieved from step 1.
  3. call update
1WebViewer(...)
2  .then(function(instance) {
3    const contextMenuItems = instance.UI.contextMenuPopup.getItems();
4    const newArray = contextMenuItems.reverse();
5    instance.UI.contextMenuPopup.update(newArray);
6  });

Deleting items

Items in the popup can be deleted using the using disableElements.

Adds a custom overlay to annotation on hover

1WebViewer(...)
2  .then(function(instance) {
3    instance.UI.setAnnotationContentOverlayHandler(annotation => { 
4      const div = document.createElement('div'); 
5      div.appendChild(document.createTextNode(`Created by: ${annotation.Author}`)); 
6      div.appendChild(document.createElement('br')); 
7      div.appendChild(document.createTextNode(`Created on ${annotation.DateCreated}`)); 
8      return div; 
9    });
10  });

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales