| layout | post |
|---|---|
| title | Form Fields API in TypeScript PDF Viewer | Syncfusion |
| description | Learn How to use Form Fields API to enable, update, retrieve and clear in the Syncfusion TypeScript PDF Viewer. |
| platform | document-processing |
| control | PDF Viewer |
| documentation | ug |
| domainurl |
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. |
Updates the value of one or more form fields programmatically.
<button id="updateFormFieldsValue">updateFormFieldsValue</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} const btn = document.getElementById('updateFormFieldsValue'); 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) { // set the value to be updated in the field field.value='John Doe'; field.tooltip='First' pdfviewer.updateFormFieldsValue(field); } }; } {% endhighlight %} {% endtabs %}
Updates form field properties such as bounds, color, font, isReadOnly, required, and more.
<button id="updateFormFields">updateFormFields</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} 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); } }; } {% endhighlight %} {% endtabs %}
Retrieves all form fields and their properties or filters by type/name.
<button id="retrieveFormFields">retrieveFormFields</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} const btn = document.getElementById('retrieveFormFields'); if (btn) { btn.onclick = () => { const fields = pdfviewer.retrieveFormFields(); console.log(fields); }; } {% endhighlight %} {% endtabs %}
Resets specified form fields or all fields to their default values.
<button id="resetFormFields">resetFormFields</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} const btn = document.getElementById('resetFormFields'); if (btn) { btn.onclick = () => { pdfviewer.resetFormFields(); }; } {% endhighlight %} {% endtabs %}
Imports form field data from an object or file into the current document.
<button id="importFormFields">importFormFields</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} 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); }; } {% endhighlight %} {% endtabs %}
N> Supported import/export formats include FDF, XFDF, and JSON. Ensure the format token passed to import/export APIs matches one of these values.
Moves focus to a form field by name or ID.
<button id="focusFormField">focusFormField</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} const btn = document.getElementById('focusFormField'); if (btn) { btn.onclick = () => { // This API returns a Promise that resolves with the exported data object pdfviewer.focusFormField('FirstName'); }; } {% endhighlight %} {% endtabs %}
Exports current form field values and states as a JSON object.
<button id="exportFormFieldsAsObject">exportFormFieldsAsObject</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} 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); }); }; } {% endhighlight %} {% endtabs %}
Exports form field data to a file for download.
<button id="exportFormFields">exportFormFields</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} const btn = document.getElementById('exportFormFields'); if (btn) { btn.onclick = () => { pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json); }; } {% endhighlight %} {% endtabs %}
Clears values of specified or all fields without removing the fields themselves.
<button id="clearformfield">clearformfield</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} const btn = document.getElementById('clearformfield'); if (btn) { btn.onclick = () => { let field=pdfviewer.retrieveFormFields(); pdfviewer.clearFormFields(field[0]); }; } {% endhighlight %} {% endtabs %}
Returns true if the loaded document contains one or more form fields.
<button id="checkFormFieldDocument">checkFormFieldDocument</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} const element = document.getElementById('checkFormFieldDocument'); if (element) { element.onclick = () => { console.log(pdfviewer.isFormFieldDocument); } } {% endhighlight %} {% endtabs %}
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.
{% tabs %} {% highlight ts tabtitle="index.ts" %} // Open the Form Designer toolbar and read its visibility state pdfviewer.enableFormDesignerToolbar(true); console.log(pdfviewer.isFormDesignerToolbarVisible); {% endhighlight %} {% endtabs %}
Gets the current collection of form fields with their properties from the viewer instance.
<button id="formfieldcollection">formfieldcollection</button>{% tabs %} {% highlight ts tabtitle="index.ts" %} const element = document.getElementById('formfieldcollection'); if (element) { element.onclick = () => { console.log(pdfviewer.formFieldCollections); } } {% endhighlight %} {% endtabs %}
Enables or disables built-in validation for required and constrained fields.
{% tabs %} {% highlight ts tabtitle="index.ts" %} pdfviewer.enableFormFieldsValidation = true; // enable form fields validation pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %}
Enables or disables user interaction with form fields globally.
{% tabs %} {% highlight ts tabtitle="index.ts" %} pdfviewer.enableFormFields = false; // Disable interaction with all fields pdfviewer.appendTo('#PdfViewer'); {% endhighlight %} {% endtabs %}
Shows or hides the Form Designer toolbar at runtime.
{% tabs %} {% highlight ts tabtitle="index.ts" %} // Show or hide the Form Designer toolbar at runtime pdfviewer.enableFormDesignerToolbar(true); // show // pdfviewer.enableFormDesignerToolbar(false); // hide {% endhighlight %} {% endtabs %}