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 to enable the PDF editing tools, Annotation Editor, and Form Editor with the steps below.
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.
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
Get the SupportApi project (from GcPdf Distribution zip or from GcPdfViewer Sample zip), contained in sub-folder named GcPdfViewerWeb.
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.
In your project, right-click the Dependencies | Add Project Reference to SupportApi.csproj.
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>
using GcPdfViewerSupportApi.Controllers;
using Microsoft.AspNetCore.Mvc;
namespace <app_name>
{
[Route("api/pdf-viewer")]
[ApiController]
public class SupportApiController : GcPdfViewerController
{
}
}
services.AddMvc((opts) => { opts.EnableEndpointRouting = false; });
services.AddRouting();
and following line of code to Configure() method:
app.UseMvcWithDefaultRoute();
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.
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 a new comment to the PDF document loaded in GcPdfViewer:
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 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.
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:
Once the comments panel is visible, users can view all the comments and their replies.
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:
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);
});
}
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:
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);
});
}
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);
});
}
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 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:
To delete a comment using Comments Panel follow these steps:
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!