PDF.js Express Plusplay_arrow

Professional PDF.js Viewing & Annotations - Try for free

side menu

Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

Compare

play_arrow

Advanced Capabilities

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Annotation statuses

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer with limited capabilities compared to PDF.js Express Plus

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a commercial PDF SDK for viewing, annotating, signing, form filling and more

The annotation statuses/states provide a built-in way to create review and approval workflows. The default states are: Accepted, Rejected, Cancelled, Completed, and None. Those are part of PDF Specification and the reason they were chosen as default. However, it is possible to change them and set yours.

Annotation Status

Programmatically update annotation state

We can set the annotation state programmatically by calling updateAnnotationState.

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('annotationsLoaded', () => {
      const annotList = annotManager.getAnnotationsList();
      const annot = annotList[0];
      annotManager.updateAnnotationState(annot, 'Completed');
    });
  });
WebViewer(...)
  .then(instance => {
    const { 
      documentViewer, 
      annotationManager, 
      Annotations 
    } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annotList = annotationManager.getAnnotationsList();
      const annot = annotList[0];
      annotationManager.updateAnnotationState(annot, 'Completed');
    });
  });

Customizing states

If the current set of annotation states does not work for you, you can update them by modifying annotation states. You just need to edit the highlighted portion.

Annotation Status

After you are satisfied with the changes, you can follow the guide on how to update your version of WebViewer UI.

Relevant APIs

updateAnnotationState
To update annotation state.

getState
To get annotation state.

getStateModel
To get annotation state model.

setState
To set annotation state.

setStateModel
To set annotation stateModel.