How to Add Annotation, Redact, and Form Editor Tools to a JavaScript PDF Viewer

As more business applications move into the web environment, it makes sense that things such as document sharing and editing also move to the browser. However, in many situations, users will need to do more than simply view a PDF document.

They may need to add annotations to supply additional information, redact personal information from the document, or even fill out form fields within the document. Thankfully, the Document Solutions JavaScript PDF Viewer makes adding this functionality to your JavaScript application easy.

In this article, we’re going to be going over the following features of the Document Solutions JavaScript PDF Viewer:

• Annotation Editor for JavaScript PDF Viewer

• Key Features of Annotations

• Redact Content from a PDF

• Form Editor for JavaScript PDF Viewer

• Key Features of Form Editor

• Additional Editing Options for PDF Viewer

Now, let's take a look at these features.

Annotation Editor for JavaScript PDF Viewer

The annotation tools in the Document Solutions JavaScript PDF Viewer will help users review and mark important information in their PDF documents. They will also be able to add, modify, and remove annotations from existing PDF documents while preserving the original content.

Users can draw annotations on the PDF and comment and reply to each other's comments. With the ability to hide annotations, users can easily view and print the original documents, and if they need to, they can also print copies that include their annotations. The Annotation Editor lists all of the annotations in your document, which allows you to access and modify existing annotations:

Use Cases and Benefits

Typically, users rely on Adobe Acrobat to annotate PDFs. With a viewer that includes editing features, your users can annotate their documents right in the application without needing to move back and forth between applications. As you can see, a viewer that includes editing capabilities can significantly streamline a business' workflow.

Here are just a few examples where this functionality would be beneficial:

• A company employee wants to send financial reports to management for review. Management can open the reports online in the PDF viewer, use annotations to suggest changes, and let the employee know that comments have been made. The employee can then open the document in the online editor and update it in the viewer using the annotations made.

• An employee has doubts about the salary structure of their company. They can read the documents in the PDF Viewer, redact confidential information, and mark areas needing clarification through annotation tools.

• A website designer prepares screenshots for a website and combines them in a PDF to send for review. Reviewers mark areas that need changes using the annotation tools.

The annotation tools in the Document Solutions JavaScript PDF Viewer make all these scenarios possible. Let’s examine the features included with Annotations.

Key Features of Annotations

The following key features are available with annotations:

• Edit PDFs with a Range of Annotations
• Mark Important Information through a User-Friendly UI
• Add, Modify, and Remove Annotations from New and Existing PDFs
• Enhance PDF Content and Apply Annotation-Specific Properties
• Print the Original PDF without Modifications
• Save the Modified PDF with Annotations on the Client

Edit PDFs with a Range of Annotations

The Document Solutions PDF Viewer supports all the annotations you need to review your PDF documents. You can add the following:

• Text Annotations (Sticky note) - Adds text or sticky notes on the PDF
• Free Text Annotation - Adds a note that is always visible on the PDF
• Ink Annotation - Draws free-hand scribbles on the PDF
• Square Annotation - Adds a rectangle/square shape on the PDF
• Circle Annotation - Adds a circle shape on the PDF
• Line Annotation - Adds a straight line on the PDF
• Polyline Annotation - Adds closed or open shapes with multiple edges on the PDF
• Polygon Annotation - Adds a polygon on the PDF
• File Attachment Annotation - Attach a file to the document, which will be embedded in the PDF
• Sound Annotation - Adds sound (.au, .aiff, or .wav format) imported from a file or recorded from the computer’s microphone
• Link Annotation - Adds links that can link to different web pages, call search engines, and execute JavaScript
• Stamp Annotation - Use images, either locally or from a server, as annotations on the PDF

Mark Important Information Through a User-Friendly UI

Document Solutions PDF Viewer annotation tools have an intuitive UI that allows users to draw annotations on the PDF. The PDF Viewer includes a separate Annotation Toolbar and Editor for adding annotations, modifying their properties, or deleting annotations from the existing PDF.

The Property panel displays a list of annotations in your document. You can select any annotation on the PDF, apply annotation-specific properties from the left panel, or delete the annotation.

On the Page tab in the panel, you can see how many annotations exist on your page. When you send your document for review, you can identify the number of edits made.

Add, Modify, and Remove Annotations from New and Existing PDFs

You can edit existing annotations or remove them at any point while reviewing PDFs in the JavaScript PDF Viewer. To add an annotation, just click the Annotation Editor button on the left panel, and you will see the Annotation Toolbar. Click on any annotation, and draw directly on the PDF. Select the annotation, and you will see the annotation properties displayed in the left panel. You can also load a PDF with existing annotations, select the annotation, modify the properties, or delete the annotation from the property panel.

Enhance PDF Content and Apply Annotation-Specific Properties

Users will find extensive support for setting annotation-specific properties in the viewer. You can add rich text, set text color, add a border, set author and subject, add a reply, set the Bounds/X/Y position for the annotations, and much more from the Property panel.

Print the PDF Without Modifications

If you want to view the original PDF, you can hide annotations using the Hide button, and print the PDF without annotations.

Save the Modified PDF With Annotations on Client

Click the save button to apply changes to your PDF and save the annotations. The viewer needs to be connected to a server running DsPdf to save the changes. The list of changes and the original PDF are sent to the server, where DsPdf applies the changes. Then, it sends the modified PDF back to the client, where the user can save it.

Redact Content From a PDF

The Redact Annotation or Redact a region option in the toolbar helps you mark confidential sections for removal. You can set the Mark Border Color and Mark Fill Color to let users mark the area for redaction. The user can set these properties to apply when hovering over the redacted content, i.e., the Overlay Fill Color, Overlay Text, Overlay Text Align, and Repeat Text properties. All of these options will appear in your PDF when the content is removed from the document.

You can also redact specific content from the Apply redact button in the Property panel. Once redaction is applied, you can reset it using the Reset Redact button in the toolbar. However, when saving the PDF, the redacted information is no longer accessible, and applied redactions cannot be reset.

You can apply individual redact annotations or click the Apply all redacts button to apply the redactions throughout the entire document. When you save the PDF with applied redacts, the redacted content will be removed entirely from the PDF. Users cannot select or copy the removed material to another document or make use of other PDF tools to read the redacted content.

Form Editor for JavaScript PDF Viewer

With the Form Editor, you can now design interactive PDF forms online. The Editor will help you use various Form Fields and advanced properties when creating your forms. You can also fill out and submit the form online.

The features of the Form Editor include:

• Create new PDF forms from scratch
• Design, fill, submit, and reset PDF forms
• Collect data directly from the user and populate PDF forms
• Fill data into the form fields from an external source (database, JSON, etc.)
• Add form fields to existing PDF documents
• Edit form fields in existing PDF documents
• Add JavaScript functionality to PDF forms
• Apply a wide range of properties to form fields
• Fast, intuitive UI toolbar and property panel to design PDF forms
• Build custom UI - omit unnecessary fields in your toolbar

The Need for a Web-Based PDF Form Designer

• The PDF format is the most preferred format for layout and appearance. Therefore, even though HTML forms are popular, PDF forms will always look the way you designed them.

• Most applications are web-based, and the Document Solutions PDF Viewer is a one-stop online tool for creating PDF forms, editing PDFs, adding annotations, and saving the modified PDF on the client. It's a faster way to generate and keep PDFs in a single application.

• Developers can create a PDF form in Acrobat and share it online. However, the PDF opened in the browser's default viewer cannot be customized, nor can developers use additional JavaScript actions on the form, like submitting the content or populating the content with form data. Document Solutions PDF Viewer supports further JavaScript actions you can set on the form with Submit and Reset actions.

• You can use Microsoft Word to create a form, or you can use a PDF editor. Creating a PDF form in Word could be challenging as it requires complex editing tools. A Document Solutions PDF Viewer Form Designer is intuitive and includes a user-friendly UI and the Property panel that sets desired properties on the form fields.

• You can design PDF forms for viewing and populating on any browser. You also do not have to worry about its appearance or whether the end-user has Adobe Acrobat.

Different Types of PDF Forms You Can Create

You can create the following PDF forms with the Form Designer:

• Registration forms (examples: event, university courses, membership, patient history, contests, etc.)

• Application forms (examples: job application, loan application, etc.)

• Feedback forms (examples: events, website, e-commerce, etc.)

• Request forms (examples: rental, information, payment forms, etc.)

Key Features of the PDF Form Designer

The Document Solutions JavaScript PDF Viewer supports several types of form fields that will help make your PDF interactive and complete:

• Text Field - Lets users input text such as name, phone number, etc.
• Password Field - Lets users enter the password for a document
• Text Area Field - Lets you add long-form text such as work experience, address, etc.
• CheckBox Field - Lets your user select multiple options
• ComboText Field - Lets you add text in equally spaced positions (for example, entering the date, e-mail, etc., on a registration form)
• ComboBox Field - Lets you choose an item from a pop-up menu or type in a value
• ListBox Field - Displays a list of options for selection
• PushButton Field - An interactive button that triggers specific actions, such as opening individual files, displaying a pop-up message, etc.
• RadioButton Field - Displays a group of options from which the user can select only one
• Submit Button Field - Lets you submit the filled form
• Reset Button Field - Lets you reset the form

User-Friendly UI to Design PDF Forms

Document Solutions Form Editor tools have a user-friendly UI to add form fields to the PDF. The PDF Viewer includes a separate Form Fields Toolbar and Editor to add form fields, modify the properties, or delete them from the existing PDF. The Property panel displays a list of form fields in your document. You can select any form field on the PDF, apply form field-specific properties from the left panel, and delete the form field. On the Page tab in the panel, you can also see how many form fields exist on your page.

Add, Modify, and Remove Form Fields From New or Existing PDF Forms

At any point, while designing a PDF form in the online viewer, you can change existing form fields and also remove them. To add a form field, just click the Form Editor button on the left panel, and you will see the Form Editor Toolbar. Click on any form field, and draw directly on the PDF page. Select the form field, and you will see the form field properties displayed in the left panel. You can also load a PDF form with existing form fields, select the form field, apply properties, or choose the Delete option from the property panel to delete the form field.

Enhance PDF Form With Form Field-Specific Properties

There is extensive support for setting the form field-specific properties for each form field supported by the viewer. Among a few general features, you can set Name, ReadOnly, Value, Align, Backcolor, Max Length, Border properties, Font size, and set the Bounds/X/Y position of the form fields.

Additionally, you can set the Required property on text fields such as TextField, PasswordField, TextArea, and ComboText Field.

Print the Original PDF Form

If you want to view the original PDF file, you can hide the form fields using the Hide button on the main toolbar and view or print the PDF file without the form fields.

Save the Newly Designed PDF with Form Fields on Client

Apply changes to your PDF document, and save the form fields. This operation needs a DsPdf product on the server to obtain the original PDF and the list of changes, apply the changes, and send the modified PDF back to the client.

Fill and Submit PDF Forms

After designing the PDF Form, you can let your users fill in and submit the PDF form to the viewer. The form data is either submitted to the database or generated as a PDF from the populated values. You can also import form data into a PDF form from the database into the viewer.

Additional Editing Options for PDF Viewer

In addition to annotations, redactions, and form fields, you can use the following features to work with and edit PDF documents.

Create Blank PDF Documents

It is possible to use the PDF Viewer to create PDF documents using the New Document button. You can design the PDF or a PDF form through the Annotation and Form Editor tools.

Add New Pages and Delete Pages in PDF Documents

You can add a new page to an existing PDF document or an original PDF document using the New page button, and use the Delete button to delete the pages.

Select and Delete Annotations/Form Fields from PDF Documents

You can select the Annotation/Form Fields added to a PDF document in the Annotation Editor and Form Editor view at any point. Use the Delete button to delete the Annotations or Form Fields from new or existing PDF documents.

Undo and Redo Changes

If you want to undo or redo your changes to the annotations or form fields, you can use the Undo/Redo buttons in both the Annotation and Form Editor. These buttons record your changes incrementally, and you can keep undoing or redoing your actions until you are satisfied with the result.

Conclusion

With that, we’ve gone over the annotations, redaction, and form fields features of the Document Solutions JavaScript PDF Viewer. As you’ve seen, it couldn’t be easier to add your own annotations, redact information that shouldn’t be displayed, and add/edit form fields to create interactive PDF forms.