You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.
13
+
The Syncfusion PDF Viewer supports three types of form-filling:
14
14
15
-
##Form Fields
15
+
1. [Filling Form Fields Programmatically](#fill-pdf-forms-programmatically)
16
16
17
-
Work with the runtime form fields present in a PDF Form.
18
-
- Render existing fields
19
-
- Fill fields.
20
-
- Import/Export form data as JSON, XFDF, FDF, or as a plain object
21
-
- Inject FormFields to enable form-filling features.
17
+
You can fill or update PDF form fields programmatically using the updateFormFieldsValue APIs. This approach is useful when form data needs to be set dynamically based on application logic.
22
18
23
-
Use the following code-snippet to enable form-filling by injecting `FormFields` Module.
19
+
2. [Form Filling Through User Interface](#fill-pdf-forms-through-the-user-interface)
Users can fill in PDF form fields directly through the PDF Viewer user interface by typing text, selecting options, or interacting with supported form elements.
22
+
23
+
3. [Importing Form Field Data](#fill-pdf-forms-through-import-data)
33
24
34
-
25
+
The PDF Viewer allows you to import form field data into an existing PDF document. This enables pre filled forms using external data sources.
35
26
36
-
The PDF Viewer supports the following form field types:
You can update the values of PDF form fields programmatically using the updateFormFieldsValue API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction.
46
30
47
-
31
+
The following example demonstrates how to update PDF form field values programmatically:
const field =fields.find((f) =>f?.name==='name') ||fields[0];
56
+
57
+
//Update the Values
58
+
if (field) {
59
+
field.value='John Doe';
60
+
field.tooltip='First';
61
+
pdfviewer.updateFormFieldsValue(field);
62
+
} else {
63
+
console.warn('No form fields available to update.');
64
+
}
65
+
};
66
+
```
48
67
49
-
## Disabling form filling
68
+
## Fill PDF forms through the User Interface
50
69
51
-
The PDF Viewer provides an option to disable interaction with form fields using `enableFormDesigner` API. Use the following configuration to disable form fields in the viewer.
70
+
The Syncfusion PDF Viewer allows users to fill PDF form fields directly through the user interface without using code. Users can click on form fields and enter or select values based on the field type.
The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values can be edited at any time, and the entered data is retained during the viewing session.
pdfviewer.enableFormDesigner=false; //To disable Form Desinger
63
-
pdfviewer.appendTo('#PdfViewer');
64
-
```
78
+
## Fill PDF forms through Import Data
65
79
66
-
## Access form fields
80
+
The Syncfusion PDF Viewer allows you to import form field data into an existing PDF document using the `importFormFields` API. This feature enables you to prefill form fields using data from an external source without requiring manual user input.
67
81
68
-
You can access the collection of all interactive form fields in the loaded document using the `formFieldCollection` property. Fetch the collection after the document is loaded.
82
+
Imported form field data is automatically mapped to the corresponding form fields in the PDF document based on the field names. Once the data is imported, the populated values are displayed in the PDF Viewer and can be edited through the user interface if required.
69
83
70
-
Use the following code-snippet to access interactive form fields collection:
## Add a handwritten signature to a signature field
94
-
95
-
Add a handwritten signature to a signature field by following these steps:
96
-
97
-
* Click the signature field in the PDF document to open the signature panel.
98
-
99
-
100
-
101
-
* Draw the signature in the signature panel.
102
-
103
-
106
+
For more details, see [Import Form Data](./import-export-formfields/import-formfields).
104
107
105
-
* Select **CREATE**. The drawn signature is added to the signature field.
108
+
## How to get the filled data and store it to a backing system
106
109
107
-
110
+
You can export the filled form field data from the PDF Viewer and store it in a backing system such as a database or file storage. The exported data can later be imported to restore the form state.
108
111
109
-
## Delete a signature from a signature field
112
+
For more details, see [Export Form Data](./import-export-formfields/export-formfields).
110
113
111
-
Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
114
+
## How to Validate Form Fields using `validateFormFields` Event
112
115
113
-
116
+
The `validateFormFields` event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the `retrieveFormFields()` API to get all the form fields and check them one by one to see if any form fields values are empty.
114
117
115
-
## Export and import form fields
118
+
This validation applies to all form field types in the PDF Viewer. A textbox is empty if no text is entered, a list box or dropdown is empty if no item is selected, a signature or initial field is empty if the user has not signed, and radio buttons or checkboxes are empty if none are chosen.
119
+
By enabling `enableFormFieldsValidation` and wiring the event, you can go through each field and stop the action if required fields are not filled.
116
120
117
-
The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported:
118
-
119
-
* FDF
120
-
* XFDF
121
-
* JSON
122
-
123
-
For more information, see the [Form fields documentation](./import-export-formfields/export-formfields).
-[Create form fields](./Create-edit-Style-del-formFields/create-formfields)
169
+
-[Create](./Create-edit-Style-del-formFields/create-formfields), [edit](./Create-edit-Style-del-formFields/edit-formfields), [style](./Create-edit-Style-del-formFields/style-formfields) and [remove](./Create-edit-Style-del-formFields/remove-formfields) form fields
130
170
-[Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md
+21-39Lines changed: 21 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,17 +9,15 @@ documentation: ug
9
9
10
10
# Overview of Forms in TypeScript PDF Viewer
11
11
12
-
Syncfusion TypeScript PDF Viewer provides a completeforms experience. Design new forms or enhance existing PDFs, fill and validate fields, import or export data, and capture signatures — all via an intuitive UI and rich APIs.
12
+
The Syncfusion PDF Viewer delivers a complete, easy-to-use PDF forms experience. You can read, fill, add, edit, and delete form fields directly within your PDF documents. These actions are supported through both the intuitive user interface and powerful programmatic APIs.
13
13
14
-
The viewer supports both runtime form filling and an interactive Form Designer to create or modify fields.
14
+
The viewer also includes smooth import and export support for form data, making integration effortless. Developers benefit from extensive API control, while end users enjoy a clean and simple interface designed for a seamless and stress-free form-filling experience.
15
15
16
-
## Form Fields
16
+
## Filling PDF Forms
17
17
18
-
Work with the runtime form fields present in a PDF Form.
19
-
- Render existing fields
20
-
-[Fill fields](./form-filling).
21
-
-[Import/Export](./import-export-formfields/export-formfields) form data as JSON, XFDF, FDF, or as a plain object
22
-
- Inject [FormFields](./form-designer) to enable form-filling features.
18
+
Experience effortless PDF form filling through a clean, intuitive UI or automated workflows using powerful APIs. Flexible form data import and export support ensures smooth and efficient operations when working with PDF forms.
19
+
20
+
See the [Filling PDF Forms](./form-filling) page for full details.
23
21
24
22
Use the following code-snippet to enable form-filling by injecting `FormFields` Module.
1.[Programmatically Form fill](./form-filling#fill-pdf-forms-programmatically)
36
+
2.[Form Fill Using UI](./form-filling#fill-pdf-forms-through-the-user-interface)
37
+
3.[Import the Form data](./form-filling#fill-pdf-forms-through-import-data)
38
+
37
39
## Form Designer
38
40
39
-
Create and customize interactive fields directly on the PDF page.
40
-
-[Add fields](../form-designer/Create-edit-Style-del-formFields/create-formfields): textbox, checkbox, radio button, dropdown, list box, signature, and initials
-[Control interaction](../form-designer/form-constrain): toggle read-only, show/hide, and manage printing behavior
44
-
-[Manage fields](../form-designer/group-formfields): select, group/ungroup, reorder, or delete
45
-
-[Save and print](../download): persist designed fields in the PDF and print with appearances
46
-
-[Tailor the UI](./form-designer#how-to-customize-the-form-designer-toolbar): show/hide or customize the Form Designer toolbar; handle events for add/edit/select/move/resize
41
+
A built in Form Designer lets you quickly add, edit, move, and delete form fields in the PDF documents. This viewer allows you to design fillable PDF forms interactively either using the built-in form designer tools or building your own customized form designer tools.
42
+
43
+
See the [Form Designer](./form-designer) page for full details.
47
44
48
45
Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
Create and customize interactive fields directly on the PDF page.
59
+
-[Create](./Create-edit-Style-del-formFields/create-formfields), [edit](./Create-edit-Style-del-formFields/edit-formfields), or [remove](./Create-edit-Style-del-formFields/remove-formfields) forms
60
+
-[Add a Signature Field](./Create-edit-Style-del-formFields/create-formfields/#add-signature-field)
61
+
-[Edit Form Field](./Create-edit-Style-del-formFields/edit-formfields)
62
+
-[Remove Form Field](./Create-edit-Style-del-formFields/remove-formfields)
-**Design** → Save → Fill: [create or modify fields](./Create-edit-Style-del-formFields/create-formfields), save them into the PDF, then fill and validate
75
-
-**Fill** → [Export/Import](./import-export-formfields/export-formfields): complete forms and export data to JSON/XFDF/FDF, or import data to fill
76
-
-**Customize** → Integrate: wire up events and business rules; tailor the designer [toolbar](./form-designer#how-to-customize-the-form-designer-toolbar) for your app
0 commit comments