Using Comments in PDF Documents with the JavaScript PDF Viewer

PDF documents are generally shared with a group of people to convey information or to get group feedback on the document's content. The viewers usually share their reviews or feedback by adding comments to the PDF document.

The Grapecity Documents for PDF Viewer (GcPdfViewer) allows you to add comments using sticky notes (which is also a text annotation). GcPdfViewer also provides a comment panel to view and reply to all the comments added using sticky notes.

This post describes how users add, edit, view, reply to, and delete comments in a PDF document.

To enable the ability to add replies or edit/remove existing replies, enable editing tools in GcPdfViewer, and configure a SupportAPI project. Annotation Editor and Form Editor are two editing tools available in GcPdfViewer.

Follow the steps below to learn more about how to add PDF comment functionality with Grapecity Documents for PDF Viewer.

Configure GcDocs PDF Viewer

Configure GcDocs PDF Viewer to enable the PDF editing tools, Annotation Editor, and Form Editor with the steps below.

1. Create a new ASP.NET Core Web Application, choosing the Web Application project template. Choose .NET Core 3.1 as the project's target framework.

2. Run the following command to install GcDocs PDF Viewer. Make sure that the directory location in the command prompt is set to the lib folder in the project. The GcDocs PDF Viewer will be installed in the <app_name>\<app_name>\wwwroot\lib\node_modules folder.

npm install @grapecity/gcpdfviewer

3. Get the SupportApi project (from GcPdf Distribution zip or from GcPdfViewer Sample zip), contained in sub-folder named GcPdfViewerWeb.

4. Add the SupportApi project to the application solution. Right-click the solution, Add| Existing Project. Select SupportApi.csproj from the SupportApi project folder downloaded in the previous step.

5. In your project, right-click the Dependencies | Add Project Reference to SupportApi.csproj.

6. Modify the default content of Index.cshtml file (<app_name>\<app_name>\Pages\Index.cshtml) with the following code:

@page
@model IndexModel
@{ ViewData["Title"] = "Home page"; }
<style>
    .container {
        height: calc(100% - 128px);
        max-width: inherit;
    }

    #host, .pb-3 {
        height: 100%;
    }
</style>
<div id="host"></div>
<script src="~/lib/node_modules/@@grapecity/gcpdfviewer/gcpdfviewer.js" asp-append-version="true"></script>
<script>
    var viewer = new GcPdfViewer("#host", { supportApi: 'api/pdf-viewer' });
    viewer.addDefaultPanels();
    viewer.addAnnotationEditorPanel();
    viewer.addFormEditorPanel();
    viewer.beforeUnloadConfirmation = true;
    viewer.newDocument();
</script>

7. Create a 'Controllers' folder in your project and add a class file 'SupportApiController.cs' to it. Replace the code in 'SupportApiController.cs' with below code snippet:

using GcPdfViewerSupportApi.Controllers;
using Microsoft.AspNetCore.Mvc;

namespace <app_name>
{
    [Route("api/pdf-viewer")]
    [ApiController]
    public class SupportApiController : GcPdfViewerController
    {

    }
}

8. Modify Startup.cs by adding the following lines of code to the default ConfigureServices() method:

services.AddMvc((opts) => { opts.EnableEndpointRouting = false; });
services.AddRouting();

and following line of code to Configure() method:

app.UseMvcWithDefaultRoute();

9. Build and run the application to view GcDocs PDF Viewer in your browser which contains the Annotation Editor tool and Form Editor tool to edit PDF documents.

Annotation Editor Overview

The Annotation Editor adds different types of annotations to PDF documents. Annotations include text annotation, redact annotation, file attachment, and others.

For more details refer to this documentation.

Click on the Annotation Editor option in the left panel of GcPdfViewer to open the Annotation Editor. This adds a menu at the top of the GcPdfViewer that displays different types of annotations. A panel on the left displays all the existing annotations in the document. Click on any annotation in the left panel, and it opens a property panel listing all the properties of the annotation. This property panel lets the user edit any existing annotation by setting properties such as text, color, author, and more.

Each annotation has a different set of properties, which can be altered through its corresponding property panel.

Working With Comments

GcPdfViewer uses Text Annotation type also known as s sticky note to add comments and comment replies in PDF documents. The comment is displayed with a note icon by default. Users can alter the icon by setting the Icon property of the Text Annotation in the property panel. The comment text is visible when the user hovers the mouse over the note icon. It appears as a sticky note when the user clicks on it.

Clicking on the note icon again hides the sticky note. Text Annotation also has a context menu associated with it. The menu displays the options "Copy", "Add Sticky Note", "Show Comment Panel", and "Print" when the PDF document is in read-only mode and the Annotation Editor is closed. When the Annotation editor is open the options change to "Cut", "Copy", and "Delete".

The blog sections ahead focus on explaining how to add, view, reply, and delete comments in a PDF document loaded in GcPdfViewer.

Add Comments

Add a new comment to the PDF document loaded in GcPdfViewer:

1. Open the Annotation editor by clicking on the Annotation Editor option in the left panel of GcPdfViewer.
2. Click on the Add Sticky Note option in the top menu. Click on the desired location, and add a comment in the PDF document. Observe that a note icon and a pop-up note representing the Text Annotation appears at that location.
3. Double click in the pop-up note to enable the editor and add the comment text. After typing the comment, click on OK in the top menu to post the comment in the document.
4. Close the Annotation editor.

After closing the Annotation editor, all the comments are represented as a note icon in the PDF document.

Add comments using the addAnnotation method of GcPdfViewer client-side API.

Here is a sample code snippet:

function addComment() {
        //Find comment with id 8R:
        viewer.findAnnotation("8R").then(function (searchResult) {
            //Clone TextAnnotation to create new comment:
            var clonedField = viewer.cloneAnnotation(searchResult[0].annotation);
            //Configure new comment options:
            clonedField.rect = [300, 725, 378, 747]
            clonedField.title = "Amy";
            clonedField.contents = "New test comment";
            //Add new comment to the first page.
            viewer.addAnnotation(0, clonedField);
        });
    }

View Comments

View comments in a PDF document by either hovering over the comment or clicking on the comment. Use the Comments Panel to view all the comments together. GcPdfViewer provides a Comments Panel which is used to view comments and add a reply to comments. The Comments Panel is not added to GcPdfViewer by default. Enable the Text Annotation Reply tool to make it available.

Enable the Text Annotation Reply tool

The Text Annotation Reply tool can be enabled by invoking the addReplyTool method of GcPdfViewer as shown below:

viewer.addReplyTool();

It can also be enabled in the expanded state which displays the comments panel, by default. The below code can be used for the same:

viewer.addReplyTool("expanded");

After the Text Annotation Reply tool is enabled, you can open the Comments Panel by choosing either of the following options:

1. Right-click on any text annotation in the PDF document
2. Select 'Show Comment Panel' from its context menu
3. Click on the arrow at the extreme right of GcPdfViewer

Once the comments panel is visible, users can view all the comments and their replies.

Reply to Comments

The Text Annotation Reply tool must be enabled to add a reply to comments. The section above explains how to enable it. To reply to a comment:

1. Open the Comments Panel and click on the comment to which you want to add a reply. It pops up a reply textbox
2. Type in a reply and click Post to add it to the comment

Add comment reply using the addAnnotation method of GcPdfViewer client-side API. Here is a sample code snippet:

function addCommentReply() {
        //Find comment with id 8R:
        viewer.findAnnotation("8R").then(function (searchResult) {
            var userName = "Jane Donahue";
            //Configure comment reply
            var replyAnnotation = viewer.cloneAnnotation(searchResult[0].annotation);
            //Set comment reply author name
            replyAnnotation.title = userName;
            //Set comment reply text
            replyAnnotation.contents = 'Yes, surely...';
            //Set comment reply's parent comment
            replyAnnotation.referenceAnnotationId = '8R';
            //Add comment reply
            viewer.addAnnotation(0, replyAnnotation);
        });
    }

Set Author Name for Comments

The default author name for a new comment or a comment reply is set to "Anonymous". Alter and set the author name in the following ways:

1. Set author name in the properties panel of Annotation editor. Once set, it is stored on the client and is used for subsequent replies.

2. Set author name directly in Comments Panel by clicking on author name's label in the comment which would enable built-in text editor.

Set the comment author using the title option of AnnotationBase client-side API. Here is a sample code snippet:

function setAuthorName() {
        //Find comment with author "James" on 1st page of PDF document:
        viewer.findAnnotation("James", { findField: 'title', pageNumberConstraint: 1 })
            .then(function (searchResult) {
                var annotation1 = searchResult[0].annotation;
                //Change author name, by setting 'title' property:
                annotation1.title = "John";
                //Update Annotation
                viewer.updateAnnotation(0, annotation1);
            });
    }

Set a Status

1. Open the Comments Panel
2. Click and select the comment to which the status is to be set
3. Click on the ... icon displayed at the top right corner of the comment box
4. Select the appropriate status from the displayed status list

The status is added as an icon to the comment and displays the assignee's name when hovered upon. The review status is also visible in the PDF document below the original comment. Multiple users can assign a status to a text annotation, but each user can only assign one status.

Set comment status using the state, stateModel, and referenceAnnotationId properties of AnnotationBase client-side API. Here is a sample code snippet:

function setStatus() {
        //Find comment with id 8R:
        viewer.findAnnotation("8R").then(function (searchResult) {
            var userName = "Jane Donahue";
            //Add new annotation to set Status on original annotation
            var statusAnnotation = viewer.cloneAnnotation(searchResult[0].annotation);
            statusAnnotation.title = userName;
            statusAnnotation.stateModel = 'Review';
            statusAnnotation.state = 'Completed';           
            statusAnnotation.referenceAnnotationId = '8R';
            statusAnnotation.contents = 'Status Completed set by ' + userName;
            viewer.addAnnotation(0, statusAnnotation);
        });
    }

Find a Comment

You can find comments in the PDF document based on comment's id, title, or contents using the findAnnotation method of GcPdfViewer client-side API.

Here is a sample code snippet:

function findComment() {
        //Find annotation with id '8R':
        viewer.findAnnotation("8R").then(function (dataArray) {
            if (dataArray[0])
                alert(`Annotation ${dataArray[0].annotation.id} found on page with index ${dataArray[0].pageNumber - 1}.`);
            else
                alert('Annotation not found.');
        });
    }

Delete Comments

Delete comments in a PDF document using either the Delete option in the Annotation Editor or Comments Panel. Delete a comment using Annotation editor with the following steps:

1. Open the Annotation editor.
2. In the left panel of the Annotation editor, click on the comment or comment reply that needs deleting. This opens the annotation's property panel.
3. At the bottom of the property panel, find the Delete option, and click on it to delete the comment.

To delete a comment using Comments Panel follow these steps:

1. Open the Comments Panel.
2. In the Comments Panel, click on the comment or comment reply you want to delete.
3. Click on the ... icon displayed at the top right corner of the comment, the dialog that appears displays has a Delete option.
4. Click on the Delete option and delete the comment.

Delete comments using the removeAnnotation method of GcPdfViewer client-side API. Here is a sample code snippet:

function deleteComment() {
       //Delete comment with id '8R'
       viewer.removeAnnotation(0, '8R');
   }

Thanks for following along! If you have any questions about the new features, please leave them in the comments below.

Happy Coding!