XtremeDocumentStudio .NET
Next-generation multi-format document-processing component suite for .NET developers
Compatibility
Visual Studio 2010/2012/2013/2015

Interactive form-filling using XtremeDocumentStudio .NET's HTML5 Document Viewer

Learn how to enable form filling in the HTML5 Document Viewer control.
by Shivaranjini Mithun & Pradeep Malage

In XtremeDocumentStudio .NET v2016 R3, we introduced the capability of interactive form filling for PDF forms documents in the HTML5 Document Viewer control. The Document Viewer control automatically identifies form fields in loaded PDF documents and allows the user to interactively fill the form fields. The Document Viewer control has several new options to control and configure the new capability. We will learn about these options in this article.

Enable Interactive Form Filling

The code snippet below shows how to enable interactive form filling in the Document Viewer.

$(document).ready(function () {
      var preferences = new gnostice.Preferences();
      preferences.interactiveElements.formFields.enableFormFilling = true;
      documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences);
}

Submit Form

Once the user updates the form field values, the user can submit the data to the server. Submitting data to the server can be achieved in multiple ways. PDF forms documents can contain a Submit pushbutton within the document, with the action type of the pushbutton set to Submit. When the end-user filling the form clicks on the Submit button, the values get submitted to the URL configured in the Submit button. This is one approach of submitting form values to the server. In this approach, you, the application developer, need not have to do anything special to support sending of form data to the server. What needs to be ensured, however, for this to work, is that the PDF form is created with a properly configured Submit button with the Submit URL set to the server you want to receive the data at.

Another approach is to place a Submit button on the web page containing the Document Viewer and then to use the “submitForm” API on the Document Viewer. This would be the approach to take when the PDF document does not contain a Submit button. The “submitForm” API accepts an URL and submits the form field values to that URL. You can call the submitForm method in the click event of the Submit button placed on the web page. The method also accepts parameters such as fields to submit, etc.

The code snippet below shows the usage of the “submitForm” API.


$(document).ready(function () {
    var preferences = new gnostice.Preferences();
    preferences.interactiveElements.formFields.enableFormFilling = true;
    var documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences);

     $("#submitForms").click(function(){ 
                var submitUrl= “www.gnostice.com”;
                var submitMethod= gnostice.SubmitMethod.POST;
                var includeNoValueFields= false;
                var submitFields= null; //Submit all the fields
                var isIncludeList = true;

                documentViewer.submitForm(submitUrl, submitMethod, includeNoValueFields, 
submitFields, isIncludeList )
        });

}

The following table shows the fieldName-fieldValue pairs which are submitted to the server during the submit action for different types of form fields.
Field Type FieldName Content FieldValue Content
Text box Form field mapping name (if present) or form field name Form field value
Check box Form Field export value (if present) or form field name of checked box
Radio button Form Field export value (if present) or form field name of selected radio button item
List box (single select) Form field export value (if present) or form field display value of selected item
List box (multi select) Comma separated list of form field export value (if present) or form field display value of selected items
Combo box (single select) Form field export value (if present) or form field display value of selected item
Combo box (multi select) Comma separated list of form field export value (if present) or form field display value of selected items

Reset Form

The HTML5 Document Viewer provides an API for resetting the form fields to their default values. Similar to submit action, this can also be achieved in multiple ways. PDF forms documents can contain a Reset pushbutton within the document, with the action type of the pushbutton set to Reset. When the end-user filling the form clicks on the Reset button, the fields get reset to their default values. This is one approach of resetting form values. In this approach, you, the application developer, need not have to do anything special to support resetting the form.

Another approach is to place a Reset button on the web page containing the Document Viewer and then to use the “resetForm” API on the Document Viewer. This would be the approach to take when the PDF document does not contain a Reset button. You can call the resetForm method in the click event of the Reset button placed on the web page. The method accepts parameters such as fields to reset, etc.

The code snippet below shows the signature and usage of the “resetForm” API.


$(document).ready(function () {
            var preferences = new gnostice.Preferences();
            preferences.interactiveElements.formFields.enableFormFilling = true;
            var documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences);

            $("#resetForms").click(function(){ 
                    var resetFields= null; //Reset all the fields
                    var isIncludeList = true;

                    documentViewer.resetForm(resetFields, isIncludeList );

                });
}

Highlight Color

The highlight color of the form fields is also configurable. We use the “highlightColor” property to do this. We can also make the form fields to appear transparent with varying levels of transparency by setting the alpha channel value of the highlightColor property.


$(document).ready(function () {
            var preferences = new gnostice.Preferences();
            preferences.interactiveElements.formFields.enableFormFilling = true;
            // Specifies highlight color for the interactive form fields.
            preferences.interactiveElements.formFields.highlightColor = "rgba(204, 215, 255, 0.5)";

            var documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences);
}

Save

To save form field values to the server we have the save() API and the associated “beforeDocumentSave” and “afterDocumentSave” events. The code snippet below shows the usage of the save() API:


$(document).ready(function () {
            var preferences = new gnostice.Preferences();
            preferences.interactiveElements.formFields.enableFormFilling = true;

            var documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences);
 	 $("#saveBtn").click(function(){ 
            
                //Call save(), to save the changes
                documentViewer.save();

            });
            
            //beforeDocumentSave event handler 
            documentViewer.addEventListener(gnostice.EventNames.beforeDocumentSave,
        function (data: any) { console.log("Before document save() " + data.documentUri); });

            //afterDocumentSave event handler 
            documentViewer.addEventListener(gnostice.EventNames.afterDocumentSave,
        function (data: any) { console.log("After document save() " + data.documentUri); });
}

Print

The print method can be used to print the document being viewed and filled. The document is printed with the current values of the form fields.


$(document).ready(function () {
            var preferences = new gnostice.Preferences();
            preferences.interactiveElements.formFields.enableFormFilling = true;
          
            var documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences);

            $("#printBtn").click(function(){ 
            
                //To print the document
                documentViewer.print();

            });
}

Download

download and downloadAs methods can be used to download the document being viewed and filled, as a file.


$(document).ready(function () {
            var preferences = new gnostice.Preferences();
            preferences.interactiveElements.formFields.enableFormFilling = true;
          
            var documentViewer = new gnostice.DocumentViewer('doc-viewer-id', preferences);

            $("#downloadBtn").click(function(){ 
            
                //To download the document
                documentViewer.download();

            });

            $("#downloadAsBtn").click(function(){ 
            
                //To download the current document in the format specified by extension.
                documentViewer.downloadAs(“.tiff”);

            });


}

Related articles:

---o0O0o---

Our .NET Developer Tools
XtremeDocumentStudio .NET

Multi-format document-processing component suite for .NET developers.

PDFOne .NET

A .NET PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, and bookmark PDF documents in .NET applications.

Our Delphi/C++Builder developer tools
XtremeDocumentStudio Delphi

Multi-format document-processing component suite for Delphi/C++Builder developers, covering both VCL and FireMonkey platforms.

eDocEngine VCL

A Delphi/C++Builder component suite for creating documents in over 20 formats and also export reports from popular Delphi reporting tools.

PDFtoolkit VCL

A Delphi/C++Builder component suite to edit, enhance, view, print, merge, split, encrypt, annotate, and bookmark PDF documents.

Our Java developer tools
XtremeDocumentStudio (for Java)

Multi-format document-processing component suite for Java developers.

PDFOne (for Java)

A Java PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, bookmark PDF documents in Java applications.

Our Platform-Agnostic Cloud and On-Premises APIs
StarDocs

Cloud-hosted and On-Premises REST-based document-processing and document-viewing APIs

Privacy | Legal | Feedback | Newsletter | Blog | Resellers © 2002-2017 Gnostice Information Technologies Private Limited. All rights reserved.