Section:

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.

1WebViewer({...}, viewerElement)
2  .then(instance => {
3    const { documentViewer, annotationManager } = instance.Core;
4
5    documentViewer.addEventListener('annotationsLoaded', () => {
6      annotationManager.getAnnotationsList().forEach(annot => {
7        if (!annot.isReply()) {
8          const replies = annot.getReplies();
9          console.log(`- Logging comments for ${annot.Id}`);
10          replies.forEach(reply => {
11            console.log(`--- ${reply.Id}: ${reply.getContents()}`);
12          });
13        }
14      });
15    });
16  });

Related Links

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.

1WebViewer({...}, viewerElement)
2  .then(instance => {
3    const { Annotations, documentViewer, annotationManager } = instance.Core;
4
5    documentViewer.addEventListener('annotationsLoaded', () => {
6      annotationManager.getAnnotationsList().forEach(annot => {
7        if (!annot.isReply() && annot instanceof Annotations.RectangleAnnotation) {
8          annotationManager.createAnnotationReply(annot, `Viewed on ${new Date()}`);
9        }
10      });
11    });
12  });

Related Links

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.

1WebViewer({...}, viewerElement)
2  .then(instance => {
3    const { annotationManager } = instance.Core;
4
5    annotationManager.addEventListener('addReply', (reply, parent, root) => {
6      
7    });
8  });

Related Links

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.

Apryse Docs Image
1WebViewer(…)
2.then(instance => {
3	const { annotationManager } = instance.Core;
4
5  annotationManager.addEventListener('deleteReply', (annotation, root) => {
6      annotationManager.createAnnotationReply(root, `Comment was Removed by ${annotationManager.getCurrentUser()}`);
7  });
8});

Related Links

Next steps

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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales