Apryse WebViewer

Class: MultiPageManipulationControls

UI. MultiPageManipulationControls

new MultiPageManipulationControls()

A class which contains MultiPageManipulationControls APIs.

The MultiPageManipulationControls shows the first 3 sets of controls and the rest in a flyout menu. ⚠ If you want to remove an item in the MultiPageManipulationControls, use disableElements.

Methods

add(pageManipulationSections [, dataElementToInsertAfter])

Adds page manipulation operations to the multi-page manipulation controls. If a dataElement parameter is provided, the new operations will be added after that element. Otherwise, they will be added at the beginning.
Parameters:
Name Type Argument Description
pageManipulationSections Array.<UI.MultiPageManipulationControls.PageManipulationSection> Array of sections to be added, each with its individual operations
dataElementToInsertAfter string <optional>
 The data element of the item to insert after. Can be 'leftPanelPageTabsRotate', 'leftPanelPageTabsOperations', 'leftPanelPageTabsMore', or a custom data element. If not provided, items will be added at the beginning. Call getItems to see existing items and their data elements.
Returns:
The MultiPageManipulationControls instance for chaining
Type
UI.MultiPageManipulationControls
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.multiPageManipulationControls.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()

Returns the current array of items in the MultiPageManipulationControls
Returns:
The current page manipulation sections in the controls
Type
Array.<UI.MultiPageManipulationControls.PageManipulationSection>
Example
WebViewer(...)
  .then(function(instance) {
    const items = instance.UI.multiPageManipulationControls.getItems();
    console.log('Current multi-page manipulation items:', items);
  });

update(pageManipulationSections)

Replaces all operations in the MultiPageManipulationControls with a new list of operations. To update an individual item, use UI.updateElement.
Parameters:
Name Type Description
pageManipulationSections Array.<UI.MultiPageManipulationControls.PageManipulationSection> The list of page manipulation sections that will be rendered in the controls. If not provided, the controls will be cleared.
See:
Returns:
The MultiPageManipulationControls instance for chaining
Type
UI.MultiPageManipulationControls
Example
WebViewer(...)
  .then(function (instance) {
    instance.UI.multiPageManipulationControls.update([
      {
        type: 'customPageOperation',
        header: 'Print Operations',
        dataElement: 'customPageOperations',
        operations: [
          {
            title: 'Print page',
            img: 'icon-header-print-line',
            onClick: (selectedPageNumbers) => {
              console.log('Printing 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',
          }
        ]
      }
    ]);
  });

Type Definitions

PageManipulationSection

Type:
  • Object
Properties:
Name Type Argument Description
type string The type of section. Use 'customPageOperation' for custom operations or 'divider' for separators.
header string <optional>
 Header text to be displayed in the UI for this section. Required if type is 'customPageOperation'.
dataElement string <optional>
 Unique data element identifier. Required if type is 'customPageOperation'.
operations Array.<UI.MultiPageManipulationControls.PageOperation> <optional>
 The operations that will be available under this section. Required if type is 'customPageOperation'.

PageOperation

Type:
  • Object
Properties:
Name Type Description
title string Title to be displayed for the operation
img string Path to the image to be used as an icon for the operation
onClick function Click handler function that receives an array of selected page numbers as a parameter
dataElement string Unique data element identifier for this operation