Section:

Migrating to V7 of WebViewer

There are a few breaking changes and other changes when migrating to v7 from older versions.

Breaking changes

New default UI

There is a new default user interface in WebViewer 7.0 which has changed the location and structure of some components in the UI. Most APIs will function the same as before.

One of the main changes is to the header toolbars which are split into several groups. You can change the group using setToolbarGroup and you can edit each group using the getHeader function.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    // adds a button to the shapes header
4    instance.setHeaderItems(header => {
5      const shapesHeader = header.getHeader('toolbarGroup-Shapes');
6      shapesHeader.push({
7        type: 'actionButton',
8        img: '...',
9        onClick: () => {
10          // perform action
11        }
12      });
13    });
14  });

If you want to hide a specific toolbar group, like other DOM elements, they can be hidden by using disableElements.

JavaScript

1WebViewer(...)
2  .then(instance => {
3    // hide the Shapes, Edit and Insert toolbar groups.
4    instance.disableElements(['toolbarGroup-Shapes']);
5    instance.disableElements(['toolbarGroup-Edit']);
6    instance.disableElements(['toolbarGroup-Insert']);
7  });

If you are not ready to update to the new UI yet you can still access the previous UI by passing ui: 'legacy' into your WebViewer constructor.

JavaScript

1WebViewer({
2  ui: 'legacy',
3  // other constructor options
4}).then(instance => {
5
6});

Page numbers instead of page indexes for APIs

Several breaking changes have been made to make sure API signatures are more consistent in WebViewer 7.0. We've heard feedback that it can be confusing using some WebViewer APIs because some accept page indexes (starting with zero) and some accept page numbers (starting with one). In 7.0 we've updated all APIs to be page numbers (starting with one) to be consistent.

Generally if you were using APIs on AnnotationManager and DocumentViewer these were already taking in 1-indexed page numbers. If you were using APIs on the Document object these were taking in 0-indexed page numbers.

Below are some examples of the changes:

1WebViewer(...)
2  .then(instance => {
3    instance.docViewer.on('documentLoaded', () => {
4      const doc = instance.docViewer.getDocument();
5      // get the information of the first page
6      const pageNumber = 1;
7      const pageInfo = doc.getPageInfo(pageNumber);
8    });
9  });

The following APIs have been changed to use page numbers:

1WebViewer(...)
2  .then(instance => {
3    instance.docViewer.on('pageComplete', (pageNumber, canvas) => {
4      ...
5    });
6  });
1WebViewer(...)
2  .then(instance => {
3    instance.docViewer.on('textSelected', (quads, text, pageNumber) => {
4      ...
5    });
6  });
1WebViewer(...)
2  .then(instance => {
3    const { TextTool } = instance.Tools;
4
5    TextTool.prototype.textSelected = function(pageNumber, quads, text) {
6      ...
7    }
8  });
1WebViewer(...)
2  .then(instance => {
3    const displayMode = instance.docViewer.getDisplayModeManager().getDisplayMode();
4    const windowPoint = { ... };
5
6    const page = displayMode.getSelectedPages(windowPoint, windowPoint);
7    const firstPageNumber = page.first;
8    const lastPageNumber = page.last;
9  });
1WebViewer(...)
2  .then(instance => {
3    const tool = instance.docViewer.getToolMode();
4
5    console.log(tool.pageCoordinates[0].pageNumber);
6  });
1WebViewer(...)
2  .then(instance => {
3    instance.docViewer.on('documentLoaded', () => {
4      docViewer.textSearchInit(searchText, mode, {
5        onResult: result => {
6          // pageNum is 1-indexed
7          console.log(result.pageNum);
8        },
9      });
10    });
11  });

The following DOM elements have been changed to use page numbers:

  • #pageContainer
  • #pageWidgetContainer
1WebViewer(...)
2  .then(instance => {
3    instance.docViewer.on('documentLoaded', () => {
4      const iframeDocument = instance.iframeWindow.document;
5      const firstWidgetContainer = iframeDocument.querySelector('#pageWidgetContainer1');
6    })
7  });

PartRetrievers cannot be accessed directly

Previously you could reference a PartRetriever directly from the PartRetriever namespace. Now the PartRetrievers are lazy loaded when needed so you can access them through the asynchronous getPartRetriever API.

1WebViewer(...)
2  .then(async (instance) => {
3    const { PartRetrievers } = instance.CoreControls;
4    const options = {};
5
6    const partRetriever = await PartRetrievers.getPartRetriever(PartRetrievers.TYPES.ExternalPdfPartRetriever, 'YOUR_FILE_PATH', options)
7  });

ResultCode has been moved to the CoreControls namespace

The XODText namespace has been removed from the iframe window, and ResultCode belongs to the CoreControls namespace now.

1WebViewer(...)
2  .then(instance => {
3    instance.docViewer.textSearchInit(searchText, mode, {
4      onResult: result => {
5        const { ResultCode } = instance.CoreControls.Search;
6        if (result.resultCode === ResultCode.FOUND) {
7          ...
8        }
9      },
10    });
11  });

Deprecated usages

In WebViewer 7.0, we also renamed some constant variables to be more consistent with others. Their previous names are kept for backwards compatibility, though we still encourage you to update them.

1WebViewer(...)
2  .then(instance => {
3    console.log(instance.docViewer.SnapMode.DEFAULT);
4  });
1WebViewer(...)
2  .then(instance => {
3    instance.docViewer.on('documentLoaded', () => {
4      docViewer.textSearchInit(searchText, mode, {
5        onResult: result => {
6          const {
7            ambientStr,
8            resultStr,
9            resultStrStart,
10            resultStrEnd,
11            pageNum,
12            resultCode,
13            quads,
14          } = result;
15        },
16      });
17    });
18  });
1WebViewer(...)
2  .then(instance => {
3    instance.docViewer.on('documentLoaded', () => {
4      const { Mode } = instance.CoreControls.Search;
5      const searchMode = Mode.PAGE_STOP | Mode.HIGHLIGHT | ...;
6      instance.docViewer.textSearchInit(searchText, searchMode, ...);
7    });
8  });
1WebViewer(...)
2  .then(instance => {
3    console.log(instance.CoreControls.PageRotation.E_0);
4  });

APIs removed

A few very rarely used APIs have been removed related to CanvasManager canvas modes.

CoreControls.CanvasMode
CoreControls.setCanvasMode
DocumentViewer.setPagesPerCanvas
DocumentViewer.returnCanvas

Other

The fileAttachmentDataAvailable event is now fired on AnnotationManager instead of DocumentViewer.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales