Form Fields API in ASP.NET MVC PDF Viewer

14 Aug 202623 minutes to read

The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:

API Description
updateFormFieldsValue Updates the value for one or more form fields.
updateFormFields Updates the properties of one or more form fields.
retrieveFormFields Retrieves all form fields or by specific criteria.
resetFormFields Resets the specified or all form fields to their default values.
importFormFields Imports values and states for form fields from a JSON object or file stream.
focusFormField Sets focus to a form field by name or ID.
exportFormFieldsAsObject Exports form fields as a JSON object.
exportFormFields Exports form fields as a downloadable file.
clearFormFields Clears values of specified or all form fields without removing them.
isFormFieldDocument Indicates whether the loaded document contains form fields.
isFormDesignerToolbarVisible Gets whether the Form Designer toolbar is currently visible.
formFieldCollections Gets the collection of current form fields with their properties.
enableFormFieldsValidation Enables or disables form field validation.
enableFormFields Enables or disables interaction with form fields.
enableFormDesignerToolbar Shows or hides the Form Designer toolbar.

updateFormFieldsValue

Updates the value of one or more form fields programmatically.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="updateFormFields">updateFormFields</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('updateFormFields');
            if (btn) {
                btn.onclick = function () {
                    var fields = (pdfviewer.retrieveFormFields && pdfviewer.retrieveFormFields()) || pdfviewer.formFieldCollection || [];
                    var field = fields.find(function (f) { return f && f.name === 'First Name'; }) || fields[0];
                    if (field) {
                        field.value = 'John Doe';
                        field.tooltip = 'First';
                        pdfviewer.updateFormFieldsValue(field);
                    }
                };
            }
        });
    </script>

updateFormFields

Updates form field properties such as bounds, color, font, isReadOnly, required, and more.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="updateFormFields">updateFormFields</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('updateFormFields');
            if (btn) {
                btn.onclick = function () {
                    var fields = (pdfviewer.retrieveFormFields && pdfviewer.retrieveFormFields()) || pdfviewer.formFieldCollection || [];
                    var field = fields.find(function (f) { return f && f.name === 'First Name'; }) || fields[0];
                    if (field) {
                        pdfviewer.formDesignerModule.updateFormField(field, {
                            value: 'John',
                            fontFamily: 'Courier',
                            fontSize: 12,
                            color: 'black',
                            backgroundColor: 'white',
                            borderColor: 'black',
                            thickness: 2,
                            alignment: 'Left',
                            maxLength: 50
                        });
                    }
                };
            }
        });
    </script>

retrieveFormFields

Retrieves all form fields and their properties or filters by type/name.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="retrieveFormFields">retrieveFormFields</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('retrieveFormFields');
            if (btn) {
                btn.onclick = function () {
                    var fields = (pdfviewer.retrieveFormFields && pdfviewer.retrieveFormFields()) || [];
                    console.log(fields);
                };
            }
        });
    </script>

resetFormFields

Resets specified form fields or all fields to their default values.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="resetFormFields">resetFormFields</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('resetFormFields');
            if (btn) {
                btn.onclick = function () { pdfviewer.resetFormFields(); };
            }
        });
    </script>

importFormFields

Imports form field data from an object or file into the current document.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="importFormFields">importFormFields</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('importFormFields');
            if (btn) {
                btn.onclick = function () {
                    // The file for importing should be accessible at the given path or as a file stream depending on your integration
                    pdfviewer.importFormFields('File', FormFieldDataFormat.Json);
                };
            }
        });
    </script>

focusFormField

Moves focus to a form field by name or ID.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="focusFormField">focusFormField</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('focusFormField');
            if (btn) { btn.onclick = function () { pdfviewer.focusFormField('FirstName'); }; }
        });
    </script>

exportFormFieldsAsObject

Exports current form field values and states as a JSON object.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="exportFormFieldsAsObject">exportFormFieldsAsObject</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('exportFormFieldsAsObject');
            if (btn) {
                btn.onclick = function () {
                    pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(function (data) {
                        var exportedData = data;
                        console.log('Exported object:', exportedData);
                    });
                };
            }
        });
    </script>

exportFormFields

Exports form field data to a file for download.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="exportFormFields">exportFormFields</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('exportFormFields');
            if (btn) { btn.onclick = function () { pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json); }; }
        });
    </script>

clearFormFields

Clears values of specified or all fields without removing the fields themselves.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="clearFormFields">clearFormFields</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var btn = document.getElementById('clearFormFields');
            if (btn) {
                btn.onclick = function () {
                    var field = (pdfviewer.retrieveFormFields && pdfviewer.retrieveFormFields()) || [];
                    if (field && field.length) { pdfviewer.clearFormFields(field[0]); }
                };
            }
        });
    </script>

isFormFieldDocument

Returns true if the loaded document contains one or more form fields.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="checkFormFieldDocument">checkFormFieldDocument</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var element = document.getElementById('checkFormFieldDocument');
            if (element) { element.onclick = function () { console.log(pdfviewer.isFormFieldDocument); }; }
        });
    </script>

isFormDesignerToolbarVisible

Returns whether the Form Designer toolbar is currently visible. The toolbar can be shown or hidden using enableFormDesignerToolbar.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            // Open the Form Designer toolbar and read its visibility state
            pdfviewer.enableFormDesignerToolbar(true);
            console.log(pdfviewer.isFormDesignerToolbarVisible);
        });
    </script>

formFieldCollections

Gets the current collection of form fields with their properties from the viewer instance.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <button id="formfieldcollection">formfieldcollection</button>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            var element = document.getElementById('formfieldcollection');
            if (element) { element.onclick = function () { console.log(pdfviewer.formFieldCollections); }; }
        });
    </script>

enableFormFieldsValidation

Enables or disables built-in validation for required and constrained fields.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            pdfviewer.enableFormFieldsValidation = true; // enable form fields validation
        });
    </script>

enableFormFields

Enables or disables user interaction with form fields globally.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            pdfviewer.enableFormFields = false;  // Disable interaction with all fields
        });
    </script>

enableFormDesignerToolbar

Shows or hides the Form Designer toolbar at runtime.

<div style="width:100%;height:600px">
        @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
            // Show or hide the Form Designer toolbar at runtime
            pdfviewer.enableFormDesignerToolbar(true); // show
            // pdfviewer.enableFormDesignerToolbar(false); // hide
        });
    </script>

See also