Apryse WebViewer

Interface: MenuOverlay

UI. MenuOverlay

A class which contains MenuOverlay APIs.

⚠ If you want to remove an item in a MenuOverlay, use disableElements.

Methods

add(items [, dataElement])

Adds action buttons to the menu overlay after a specified item
Parameters:
Name Type Argument Description
items Array.<object> | object One or more action button objects. See the ActionButton documentation for the object structure.
dataElement string <optional>
 The data element of the item to insert after. If not provided, items will be added at the beginning.
Returns:
The MenuOverlay instance for chaining
Type
UI.MenuOverlay
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.settingsMenuOverlay.add({
      type: 'actionButton',
      className: 'row',
      img: 'icon-header-print-line',
      onClick: () => {
        console.log('Print button clicked');
      },
      dataElement: 'printButton',
      label: 'Print'
    });
  });

getItems()

Returns the current array of items in the menu overlay
Returns:
The current items in the menu overlay
Type
Array.<object>
Example
WebViewer(...)
  .then(function(instance) {
    const items = instance.UI.settingsMenuOverlay.getItems();
    console.log('Current menu items:', items);
  });

update( [items])

Replaces all items in the menu overlay with a new set of items. To update an individual item, use UI.updateElement.
Parameters:
Name Type Argument Default Description
items Array.<object> <optional>
 [] The new array of items to render in the menu overlay. See the ActionButton documentation for the object structure. If not provided, the menu will be cleared.
See:
Returns:
The MenuOverlay instance for chaining
Type
UI.MenuOverlay
Example
WebViewer(...)
  .then(function(instance) {
    // Replace all existing items with a new array of items
    instance.UI.settingsMenuOverlay.update([
      {
        type: 'actionButton',
        className: 'row',
        img: 'icon-header-print-line',
        onClick: () => {
          console.log('Print action');
        },
        dataElement: 'printButton',
        label: 'Print',
        role: 'option'
      },
      {
        type: 'actionButton',
        className: 'row',
        img: 'icon-header-download',
        onClick: () => {
          console.log('Download action');
        },
        dataElement: 'downloadButton',
        label: 'Download',
        role: 'option'
      },
    ]);
  });