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])

Add an array of Actions Buttons after the item that has the given data element.
Parameters:
Name Type Argument Description
items Array.<object> Same as ActionButton
dataElement string <optional>
 An optional string. If not given, items will be added in the beginning
Returns:
The instance itself
Type
this
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.settingsMenuOverlay.add({
      type: 'actionButton',
      className:"row",
      img: 'icon-header-print-line',
      onClick: () => {
        alert('Printing...');
      },
      dataElement: 'alertButton',
      label:'print button'
    });
  });

getItems()

Return the array of items in the menuOverlay dropdown.
Returns:
Current items in the menuOverlay dropdown.
Type
Array.<object>
Example
WebViewer(...)
  .then(function(instance) {
    instance.UI.settingsMenuOverlay.getItems();
  });

update( [items])

Update all the items in the menuOverlay dropdown. To update an individual item, use updateElement
Parameters:
Name Type Argument Description
items Array.<object> <optional>
 the items that will be rendered in the menuOverlay dropdown
Returns:
The instance itself
Type
this
Example
WebViewer(...)
  .then(function(instance) {
    // replace existing items with a new array of items
    instance.UI.settingsMenuOverlay.update([
      {
        type: 'actionButton',
        className:"row",
        img: 'icon-header-print-line',
        onClick: () => {
          alert('Hello world!');
        },
        dataElement: 'alertButton',
        label:'test button',
        role:"option"
      },
      {
        type: 'actionButton',
        className:"row",
        img: 'icon-header-print-line',
        onClick: () => {
          alert('Hello world!');
        },
        dataElement: 'alertButton2',
        label:'test button 2',
        role:"option"
      },
    ]);
  });