# Interface: PageManipulationOverlay

## UI. PageManipulationOverlay

A class which contains PageManipulationOverlay APIs.
⚠ If you want to remove an item in the PageManipulationOverlay, use disableElements.

### Methods

#### add(PageManipulationSection [, dataElementToInsertAfter])

  Adds an array of page manipulation operations to the default operations. If passed a dataElement parameter, it will add the new operations after this element. Otherwise, they will be appended to the start of the existing list of operations.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `PageManipulationSection` | Array.<PageManipulationSection> |  | Array of sections to be added, each with its individual operations. See example below.
  `dataElementToInsertAfter` | 'pageRotationControls' | 'pageInsertionControls' | 'pageManipulationControls' | <optional> | An optional string that determines where in the overlay the new section will be added. If not included, the new page manipulation section will be added at the top. You can call getItems to get existing items and their dataElements.

  ##### Returns:

  The instance itself
  Type
    UI.PageManipulationOverlay

  ##### Example

      // Each object in the operations array shall consist of the following:
          {
            type: 'customPageOperation', // Required type of 'customPageOperation'
            header: 'Custom options', // Header to be displayed in the UI
            dataElement: 'customPageOperations', // Unique dataElement
            // Each new section can have one more more operations.
            // The onClick handler for each operation gets passed an array of the currently selected
            // thumbnail page numbers.
            operations: [
              {
                title: 'Alert me of selected thumbnail page numbers',
                img: '/path-to-image',
                onClick: (selectedPageNumbers) => {
                  alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
                },
                dataElement: 'customPageOperationButton', // Each operation must have a dataElement
              }
            ]
          }
           // Additionally, to add dividers you can include this in the operations array:
          { type: 'divider' }
          // Example:
          WebViewer(...)
            .then(function (instance) {
              instance.UI.pageManipulationOverlay.add([
                {
                  type: 'customPageOperation',
                  header: 'Custom options',
                  dataElement: 'customPageOperations',
                  operations: [
                    {
                      title: 'Alert me',
                      img: '/path-to-image',
                      onClick: (selectedPageNumbers) => {
                        alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
                      },
                      dataElement: 'customPageOperationButton',
                    }
                  ]
                },
                { type: 'divider' }
              ]);
            });

#### getItems()

  Return the array of items in the PageManipulationOverlay.

  ##### Returns:

  Current items in the PageManipulationOverlay.
  Type
    Array.<PageManipulationSection>

  ##### Example

      WebViewer(...)
        .then(function(instance) {
          instance.UI.pageManipulationOverlay.getItems();
        });

#### update(PageManipulationSection)

  Update all the operations in the PageManipulationOverlay, essentially replacing them with a new list of operations. To update an individual item, use updateElement

  ##### Parameters:

  Name | Type | Description
  --- | --- | ---
  `PageManipulationSection` | Array.<PageManipulationSection> | The list of PageManipulationSections that will be rendered in the PageManipulation overlay. See the add documentation for an example.

  ##### Returns:

  The instance of itself
  Type
    UI.PageManipulationOverlay

  ##### Example

      WebViewer(...)
            .then(function (instance) {
              instance.UI.pageManipulationOverlay.update([
                {
                  type: 'customPageOperation',
                  header: 'Print Operations',
                  dataElement: 'customPageOperations',
                  operations: [
                    {
                      title: 'Print page',
                      img: 'icon-header-print-line',
                      onClick: (selectedPageNumbers) => {
                        alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
                      },
                      dataElement: 'printThumbnailPage',
                    }
                  ]
                },
                { type: 'divider' },
                {
                  type: 'customPageOperation',
                  header: 'Alert Operations',
                  dataElement: 'customPageOperations-2',
                  operations: [
                    {
                      title: 'Alert me',
                      img: 'icon-header-print-line',
                      onClick: (selectedPageNumbers) => {
                        alert(`Selected thumbnail pages: ${selectedPageNumbers}`);
                      },
                      dataElement: 'alertPage',
                    }
                  ]
                }
              ]);
            });

#### Search results