Introducing A JavaScript Annotation, Redact, and Form Editor for PDFs

We are excited to announce new editing tools in our Javascript based GrapeCity Documents PDF Viewer (GcPdfViewer) for the web in the latest v3.1 release. These tools will help you create PDF documents online, review PDF documents, design PDF forms, and fill-out and submit forms through the viewer online.

GcPdfViewer introduces new annotations and form editor tools to work with PDF documents, making GcPdfViewer a one-stop tool to view, review, edit, and save PDF documents on the web.

It needs to be connected to GrapeCity Documents for PDF (GcPdf) on the server, via the SupportAPI property.

Learn more about configuring the PDF Viewer for editing tools here.

Now, let's dive into the new features.

Annotation Editor for JavaScript Documents PDF Viewer

The new annotation tools in GcPdfViewer will help you review and mark important information on your PDF documents. Add, modify, and remove annotations from existing PDF documents, while preserving the original PDF content. Users can draw the annotations on the PDF and comment and reply to each other's comments. With the option to hide annotations, you can easily view and print the original documents, as well as a copy that includes the annotations. The Annotation Editor lists all the annotations in your document, which allows you to access and modify the annotations.

Use Cases and Benefits

Typically, teams and individuals rely on Adobe Acrobat to annotate PDFs. With a viewer that includes editing features, you can view and add annotations inside the application without having to open Acrobat. As you can see, a viewer that included editing features would significantly streamline the workflow.

Here are a few examples where this type of viewer would be helpful:

• A company employee wants to send financial reports to senior managers for review. The manager can open the PDFs in the online PDF viewer, use the annotation tools to suggest changes, and save the PDF file on the client. Then, they can e-mail the PDF back to the employee. The employee can open the PDF in the PDF viewer, note all changes, remove the annotations, and save the final PDF.

• An employee has doubts about the salary structure of their company. They can read the PDF in GcPdfViewer, redact confidential information, and mark areas where they need 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 GcPdfViewer make all these scenarios possible. Let's take a look at the features included.

Key Features of The JavaScript Documents PDF Viewer

Edit PDFs with A Range of Annotations

The GcPdfViewer supports all the annotations you would need to review your PDF documents. You can add:

• Text Annotation (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
• Redact Annotation - The ability to add/edit redacted annotations
  • Applying redaction - Removes redacted content from the PDF

Mark Important Information Through A User-Friendly UI

GcPdfViewer annotation tools have an intuitive UI that allows users to draw annotations on the PDF. GcPdfViewer includes a separate Annotation Toolbar and Editor to add annotations, modify the properties on them, or delete 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 also 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 or Existing PDF Files

At any point, while reviewing the PDF document in the online PDF Viewer, you can edit existing annotations or remove them. 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. Check out the demo browser to view the properties of each annotation.

Print Original PDF without Modifications

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

Remove Content from A PDF

The Redact Annotation or 'Redact a region' option in the toolbar would help 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., Overlay Fill Color, Overlay Text, Overlay Text Align, and Repeat Text properties. All of these options would 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 the redaction using the 'Reset Redact' button in the toolbar. 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.

Save Modified PDF with Annotations on Client

You can apply changes to your PDF document and save the annotations by clicking the save button. The viewer needs to be connected to a GcPdf that is running on the server to save the changes. The list of changes, along with the original PDF, is sent to the server, where GcPdf applies the changes. Then, it sends the modified PDF back to the client, where the user can save it.

Download this demo to view the full workflow in GcPdfViewer.

Visit the Help and Demo sections to learn more about the Annotation Editor.

PDF Form Editor

Now, you can design interactive PDF forms online. The new PDF Form Editor will help you create a PDF form with various Form Fields and advanced properties. You can also fill and submit the form online.

Features include:

• Create new PDF forms from scratch
• Design, fill, submit, and reset PDF form
• Collect data directly from the user and populate PDF form
• Fill data into the form fields from an external source like a database, JSON, etc.
• Add form fields to existing PDF documents
• Edit forms 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
• Run the viewer/editor on any platform browser

The Need For A Web-Based PDF Form Designer

• The PDF format is the most preferred format when it comes to 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 GcPdfViewer is a one-stop online tool to create PDF forms, edit PDFs, add annotations, and save the modified PDF on the client. It's a faster way to generate PDFs and keep them 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. GcPdfViewer supports further JavaScript actions that 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 GcPdfViewer Form Designer is intuitive, includes a user-friendly UI, and includes 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 Web-Based PDF Form Designer

Design Modern PDF Forms with A Variety of Form Fields

The GcPdfViewer supports several types of form fields that will help make your PDF interactive and complete:

• Text Field - Lets user 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 lets you trigger 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

GcPdfViewer Form Editor tools have a user-friendly UI to add form fields on the PDF. GcPdfViewer 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 Forms with Form Field Specific-Properties

There is extensive support for setting the form field-specific properties for each form field that is 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 also set the 'Required' property on text fields like TextField, PasswordField, TextArea, and ComboText Field.

Check out the demo browser to view the properties of each form 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 GcPdf 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.

View the full demo to view the complete workflow in GcPdfViewer.

Fill and Submit PDF Forms

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

Visit the Help and Demo sections to learn more about the Form Editor.

Additional Editing Options for PDF Documents

You can use the following features to work with and edit PDF Documents.

Create Blank PDF Documents

It is possible 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 Document

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

Undo and Redo Your 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.

Enabling Editing Features in GcPdfViewer

Visit the Help section to find the steps for configuring editing tools in GcPdfViewer. Also, visit this topic to learn how you can customize the toolbar options in GcPdfViewer.

See the new features and editing tools in action.