Migrating to V7 of WebViewer

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

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.

WebViewer(...)
  .then(instance => {
    // adds a button to the shapes header
    instance.setHeaderItems(header => {
      const shapesHeader = header.getHeader('toolbarGroup-Shapes');
      shapesHeader.push({
        type: 'actionButton',
        img: '...',
        onClick: () => {
          // perform action
        }
      });
    });
  });

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

WebViewer(...)
  .then(instance => {
    // hide the Shapes, Edit and Insert toolbar groups.
    instance.disableElements(['toolbarGroup-Shapes']);
    instance.disableElements(['toolbarGroup-Edit']);
    instance.disableElements(['toolbarGroup-Insert']);
  });

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.

WebViewer({
  ui: 'legacy',
  // other constructor options
}).then(instance => {

});

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:

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      const doc = instance.docViewer.getDocument();
      // get the information of the first page
      const pageNumber = 1;
      const pageInfo = doc.getPageInfo(pageNumber);
    });
  });

The following APIs have been changed to use page numbers:

• pageComplete

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('pageComplete', (pageNumber, canvas) => {
      ...
    });
  });

• DocumentViewer textSelected

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('textSelected', (quads, text, pageNumber) => {
      ...
    });
  });

• TextTool textSelected

WebViewer(...)
  .then(instance => {
    const { TextTool } = instance.Tools;

    TextTool.prototype.textSelected = function(pageNumber, quads, text) {
      ...
    }
  });

• getSelectedPages

WebViewer(...)
  .then(instance => {
    const displayMode = instance.docViewer.getDisplayModeManager().getDisplayMode();
    const windowPoint = { ... };

    const page = displayMode.getSelectedPages(windowPoint, windowPoint);
    const firstPageNumber = page.first;
    const lastPageNumber = page.last;
  });

• pageCoordinates

WebViewer(...)
  .then(instance => {
    const tool = instance.docViewer.getToolMode();

    console.log(tool.pageCoordinates[0].pageNumber);
  });

• SearchResult

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      docViewer.textSearchInit(searchText, mode, {
        onResult: result => {
          // pageNum is 1-indexed
          console.log(result.pageNum);
        },
      });
    });
  });

• pageToWindow
• windowToPage
• getPageTransform
• getPageOffset
• getLinks
• getPageInfo
• getPDFCoordinates
• getTextPosition
• getXODCoordinates
• getViewerCoordinates
• loadPageText
• loadThumbnailAsync
• getPageMatrix
• getPageWidth
• getPageHeight
• getPageRotation
• getPageRotations
• setPageRotations
• getPageZoom
• setPageZoom
• getViewportRegionRect
• updateLinks
• stopPageRender
• loadCanvasAsync
• getVisiblePages
• updateView

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

• #pageContainer
• #pageWidgetContainer

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      const iframeDocument = instance.iframeWindow.document;
      const firstWidgetContainer = iframeDocument.querySelector('#pageWidgetContainer1');
    })
  });

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.

WebViewer(...)
  .then(async (instance) => {
    const { PartRetrievers } = instance.CoreControls;
    const options = {};

    const partRetriever = await PartRetrievers.getPartRetriever(PartRetrievers.TYPES.ExternalPdfPartRetriever, 'YOUR_FILE_PATH', options)
  });

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

WebViewer(...)
  .then(instance => {
    instance.docViewer.textSearchInit(searchText, mode, {
      onResult: result => {
        const { ResultCode } = instance.CoreControls.Search;
        if (result.resultCode === ResultCode.FOUND) {
          ...
        }
      },
    });
  });

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.

• SnapMode

WebViewer(...)
  .then(instance => {
    console.log(instance.docViewer.SnapMode.DEFAULT);
  });

• SearchResults

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      docViewer.textSearchInit(searchText, mode, {
        onResult: result => {
          const {
            ambientStr,
            resultStr,
            resultStrStart,
            resultStrEnd,
            pageNum,
            resultCode,
            quads,
          } = result;
        },
      });
    });
  });

• SearchMode

WebViewer(...)
  .then(instance => {
    instance.docViewer.on('documentLoaded', () => {
      const { Mode } = instance.CoreControls.Search;
      const searchMode = Mode.PAGE_STOP | Mode.HIGHLIGHT | ...;
      instance.docViewer.textSearchInit(searchText, searchMode, ...);
    });
  });

• PageRotation

WebViewer(...)
  .then(instance => {
    console.log(instance.CoreControls.PageRotation.E_0);
  });

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

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

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