Some test text!

Search
Hamburger Icon

Web / Guides / Replies

Creating replies for PDF annotations

Annotating would not be complete without a discussion of the marked content. Annotations in PDFs allows users to reply to an annotation. A reply is actually just another annotation behind the scenes, specifically a Sticky Note annotation.

Reading replies

Since replies are just Sticky Note annotations, they can be found in the annotation list provided by the AnnotationManager. We can leverage the isReply API on annotations to differentiate from other annotations. Annotations in WebViewer are also aware of their replies which we can get using getReplies.

WebViewer({...}, viewerElement)
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      annotationManager.getAnnotationsList().forEach(annot => {
        if (!annot.isReply()) {
          const replies = annot.getReplies();
          console.log(`- Logging comments for ${annot.Id}`);
          replies.forEach(reply => {
            console.log(`--- ${reply.Id}: ${reply.getContents()}`);
          });
        }
      });
    });
  });
To get the parent from a reply, you can use AnnotationManager.getRootAnnotation.

Creating replies

Creating replies through the AnnotationManager is made easy with the createAnnotationReply API. You only need the annotation you are replying to as well as the reply text.

WebViewer({...}, viewerElement)
  .then(instance => {
    const { Annotations, documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      annotationManager.getAnnotationsList().forEach(annot => {
        if (!annot.isReply() && annot instanceof Annotations.RectangleAnnotation) {
          annotationManager.createAnnotationReply(annot, `Viewed on ${new Date()}`);
        }
      });
    });
  });

Deleting replies

Since replies are just annotations, deleting replies is the same as deleting an annotation with the annotation manager.

Events

addReply

When a reply is added, the addReply event will be triggered on the AnnotationManager. This may be helpful in sending notifications when a reply is added.

WebViewer({...}, viewerElement)
  .then(instance => {
    const { annotationManager } = instance.Core;

    annotationManager.addEventListener('addReply', (reply, parent, root) => {
      
    });
  });

deleteReply

Suppose we wanted to programmatically have a reply letting the user know that a comment was deleted from the parent annotation. This can be achieved by using the createAnnotationReply method along with the deleteReply listener.

Annotation Reply Demo
WebViewer()
.then(instance => {
	const { annotationManager } = instance.Core;

  annotationManager.addEventListener('deleteReply', (annotation, root) => {
      annotationManager.createAnnotationReply(root, `Comment was Removed by ${annotationManager.getCurrentUser()}`);
  });
});

Next steps

Now that you know how to add annotations, learn how to create them!

Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales