HelpBot Assistant

How can I help you?

Form fields API in JavaScript PDF Viewer

12 Feb 202611 minutes to read

The PDF Viewer exposes APIs to create, edit, validate, navigate, export, 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.

<button id="updateFormFieldsValue">updateFormFieldsValue</button>
var btn = document.getElementById('updateFormFields');
if (btn) {
  btn.onclick = function () {
    // Retrieve form fields collection
    var fields = pdfviewer.retrieveFormFields();
    // Find the textbox field by name (Here field name is First Name)
    var field = (fields || []).find(function (f) { return f && f.name === 'First Name'; }) || (fields || [])[0]; // Update name accordingly
    if (field) {
      // give value to be updated in the form
      field.value = 'John Doe';
      field.tooltip = 'First';
      pdfviewer.updateFormFieldsValue(field);
    }
  };
}

updateFormFields

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

<button id="updateFormFields">updateFormFields</button>
var btn = document.getElementById('updateFormFields');
if (btn) {
  btn.onclick = function () {
    // Retrieve form fields collection
    var fields = pdfviewer.retrieveFormFields();
    // Find the textbox field by name (Here field name is First Name)
    var field = (fields || []).find(function (f) { return f && f.name === 'First Name'; }) || (fields || [])[0]; // Update name accordingly
    if (field) {
      // Update textbox field styling and value
      pdfviewer.formDesignerModule.updateFormField(field, {
        value: 'John',
        fontFamily: 'Courier',
        fontSize: 12,
        color: 'black',
        backgroundColor: 'white',
        borderColor: 'black',
        thickness: 2,
        alignment: 'Left',
        maxLength: 50
      });
    }
  };
}

retrieveFormFields

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

<button id="retrieveFormFields">retrieveFormFields</button>
var btn = document.getElementById('retrieveFormFields');
if (btn) {
  btn.onclick = function () {
    var fields = pdfviewer.retrieveFormFields();
    console.log(fields);
  };
}

resetFormFields

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

<button id="resetFormFields">resetFormFields</button>
var btn = document.getElementById('resetFormFields');
if (btn) {
  btn.onclick = function () {
    pdfviewer.resetFormFields();
  };
}

importFormFields

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

<button id="importFormFields">importFormFields</button>
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', 'Json');
  };
}

NOTE

Supported import/export formats include FDF, XFDF, and JSON. Ensure the format token passed to import/export APIs matches one of these values.

focusFormField

Moves focus to a form field by name or ID.

<button id="focusFormField">focusFormField</button>
var btn = document.getElementById('focusFormField');
if (btn) {
  btn.onclick = function () {
    pdfviewer.focusFormField('FirstName');
  };
}

exportFormFieldsAsObject

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

<button id="exportFormFieldsAsObject">exportFormFieldsAsObject</button>
var btn = document.getElementById('exportFormFieldsAsObject');
if (btn) {
  var exportedData;
  btn.onclick = function () {
    // This API returns a Promise that resolves with the exported data object
    pdfviewer.exportFormFieldsAsObject('Fdf').then(function (data) {
      exportedData = data; // Save or send to server
      console.log('Exported object:', exportedData);
    });
  };
}

exportFormFields

Exports form field data to a file for download.

<button id="exportFormFields">exportFormFields</button>
var btn = document.getElementById('exportFormFields');
if (btn) {
  btn.onclick = function () {
    pdfviewer.exportFormFields('FormData', 'Json');
  };
}

clearFormFields

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

<button id="clearformfield">clearformfield</button>
var btn = document.getElementById('clearFormFields');
if (btn) {
  btn.onclick = function () {
    var field = pdfviewer.retrieveFormFields();
    pdfviewer.clearFormFields(field[0]);
  };
}

isFormFieldDocument

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

<button id="checkFormFieldDocument">checkFormFieldDocument</button>
var element = document.getElementById('checkFormFieldDocument');
if (element) {
  element.onclick = function () {
    console.log(pdfviewer.isFormFieldDocument);
  };
}

isFormDesignerToolbarVisible

Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially
and get the form designer Toolbar Visible status.

// Open the Form Designer toolbar and read its visibility state
pdfviewer.enableFormDesignerToolbar(true);
console.log(pdfviewer.isFormDesignerToolbarVisible);

formFieldCollections

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

<button id="formfieldcollection">formfieldcollection</button>
var element = document.getElementById('formfieldcollection');
if (element) {
  element.onclick = function () {
    console.log(pdfviewer.formFieldCollections);
  };
}

enableFormFieldsValidation

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

pdfviewer.enableFormFieldsValidation = true; // enable form fields validation
pdfviewer.appendTo('#PdfViewer');

enableFormFields

Enables or disables user interaction with form fields globally.

pdfviewer.enableFormFields = false;  // Disable interaction with all fields
pdfviewer.appendTo('#PdfViewer');

enableFormDesignerToolbar

Shows or hides the Form Designer toolbar at runtime.

// Show or hide the Form Designer toolbar at runtime
pdfviewer.enableFormDesignerToolbar(true); // show
// pdfviewer.enableFormDesignerToolbar(false); // hide

See also