Syncfusion AI Assistant

How can I help you?

Form fields API in TypeScript PDF Viewer

16 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>
const btn = document.getElementById('updateFormFields');
if (btn) {
  btn.onclick = () => {
   // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is FIrst Name)
  const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly
  if (field) {
    // give value to be updated in teh for
    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>
const btn = document.getElementById('updateFormFields');
if (btn) {
  btn.onclick = () => {
   // Retrieve form fields collection
  const fields = pdfviewer.retrieveFormFields();
  // Find the textbox field by name (Here field name is FIrst Name)
  const field = fields.find((f: any) => 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
    } as TextFieldSettings);
  }
  };
}

retrieveFormFields

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

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

resetFormFields

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

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

importFormFields

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

<button id="importFormFields">importFormFields</button>
const btn = document.getElementById('importFormFields');
if (btn) {
  btn.onclick = () => {
     // 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);
  };
}

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>
const btn = document.getElementById('focusFormField');
if (btn) {
  btn.onclick = () => {
    // This API returns a Promise that resolves with the exported data object
    pdfviewer.focusFormField('FirstName');
  };
}

exportFormFieldsAsObject

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

<button id="exportFormFieldsAsObject">exportFormFieldsAsObject</button>
const btn = document.getElementById('exportFormFieldsAsObject');
if (btn) {
  let exportedData: Object|undefined;
  btn.onclick = () => {
    pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(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>
const btn = document.getElementById('exportFormFields');
if (btn) {
  btn.onclick = () => {
    pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
  };
}

clearFormFields

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

<button id="clearformfield">clearformfield</button>
const btn = document.getElementById('clearFormFields');
if (btn) {
  btn.onclick = () => {
  let 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>
const element = document.getElementById('checkFormFieldDocument');
if (element) {
    element.onclick = () => {
        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>
const element = document.getElementById('formfieldcollection');
if (element) {
    element.onclick = () => {
        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