Thumbnail Controls

The left side panel has a thumbnail tab that can be used to perform a number of different page operations.

The thumbnailControl and documentControl elements in the above image were introduced in version 6.3.1. These controls can be disabled using the disableElements API or passing it into WebViewer constructor options. See the hiding element guide for more detail.

Selecting multiple pages

Users can hold the "CTRL" or "Command" key and click on a thumbnail to select it. The text input near the bottom of the thumbnail panel can also be used to select pages. After pages are selected, the controls at the bottom of the thumbnail panel can be used to delete or extract the currently selected pages.

This feature can be disabled by using the disableFeatures API to disable the ThumbnailMultiselect feature.

JavaScript (SDK v8.0+)

WebViewer({
  ... // other options
}, viewerElement)
  .then(instance => {
    instance.UI.disableFeatures([instance.Feature.ThumbnailMultiselect]);
  });

WebViewer.enableFeatures WebViewer.disableFeatures

JavaScript (SDK v6.0+)

WebViewer({
  ... // other options
}, viewerElement)
  .then(instance => {
    instance.disableFeatures([instance.Feature.ThumbnailMultiselect]);
  });

WebViewer.enableFeatures WebViewer.disableFeatures

Rotating pages

The current page can be rotated using the buttons below the thumbnail.

Deleting pages

The current pages can be deleted using the button below the thumbnail. There is also a button at the bottom of the thumbnail panel that can be used to delete the currently selected pages.

The disableElements API can be used to hide the thumbnailControl to prevent users from deleting or rotating the current page.

Reordering pages

Users can drag and drop each of the thumbnails to move a page. Users can also drag and drop multiple selected pages to move them all at once.

This feature can be disabled by using the disableFeatures API to disable the ThumbnailReordering feature.

Merging documents

Simply drag and drop a document into the thumbnail panel to merge a new document into the currently opened document.

This feature can be disabled by using the disableFeatures API to disable the ThumbnailMerging feature.

Merging from another WebViewer

It is possible to merge pages from one instance of WebViewer into another using the thumbnail panel. Users can drag and drop one or more pages from the thumbnail panel of one instance of WebViewer into another.

Unlike other features, this feature is disabled by default for performance. This feature can be enabled by using enableFeatures API to enable the MultipleViewerMerging feature.

Please Note!

Enabling this feature will impact performance since WebViewer will have to extract the currently selected page's data.

Below is an example of pages being moved between instances of WebViewer.

You can also check-out a ready-to-go sample for a dropzone implementation.

Getting the selected pages programmatically

You can get the selected pages by using getSelectedThumbnailPageNumbers. To select pages programmatically use selectThumbnailPages.