-
-
-{% endhighlight %}
-{% endtabs %}
-
-N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file:
-`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
-
-{% previewsample "Document-Processing/code-snippet/pdfviewer/javascript-es6/deleteformfield-cs3/index.html" %}
-
-## Saving the form fields
-
-Selecting the Download icon on the toolbar saves the form fields in the exported PDF without modifying the original document. See the following GIF for reference.
-
-
-
-You can invoke the download action using the following code snippet.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.load('https://cdn.syncfusion.com/content/pdf/form-designer.pdf', null);
-pdfviewer.download();
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar,Magnification,Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.load('https://cdn.syncfusion.com/content/pdf/form-designer.pdf', null);
-pdfviewer.download();
-
-
-{% endhighlight %}
-{% endtabs %}
-
-## Printing the form fields
-
-Selecting the Print icon on the toolbar prints the PDF with the added form fields. This action does not modify the original document. See the following GIF for reference.
-
-
-
-You can invoke the print action using the following code snippet:
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.load('https://cdn.syncfusion.com/content/pdf/form-designer.pdf', null);
-pdfviewer.print.print();
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
-
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.load('https://cdn.syncfusion.com/content/pdf/form-designer.pdf', null);
-pdfviewer.print.print();
-
-{% endhighlight %}
-{% endtabs %}
-
-## setFormFieldMode programmatically
-
-The setFormFieldMode method enables adding a form field dynamically by specifying the field type. For example, the following adds a Password field when a button is clicked.
-
-```
-
-
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('addPasswordField').addEventListener('click', function () {
- pdfviewer.formDesignerModule.setFormFieldMode("Password");
-});
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('addPasswordField').addEventListener('click', function () {
- pdfviewer.formDesignerModule.setFormFieldMode("Password");
-});
-{% endhighlight %}
-{% endtabs %}
-
-## Open the existing PDF document
-
-Open a PDF that already contains form fields by clicking the Open icon on the toolbar. See the following GIF for reference.
-
-
-
-## Validate form fields
-
-Form fields are validated when enableFormFieldsValidation is set to true and the validateFormFields event is handled. The event triggers during download or print if required fields are not filled. The non-filled fields are available in the nonFillableFields property of the event arguments.
-
-Add the following code to validate form fields:
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
-TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
-TextSelection, Annotation, FormDesigner, FormFields);
-
-let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.enableFormFieldsValidation = true;
-viewer.validateFormFields= function (args) {
-var nonfilledFormFields = args.nonFillableFields;
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
-TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,BookmarkView,
-TextSelection, Annotation, FormDesigner, FormFields);
-
-let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
-pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.enableFormFieldsValidation = true;
-viewer.validateFormFields= function (args) {
-var nonfilledFormFields = args.nonFillableFields;
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Export and import form fields
-
-The PDF Viewer component supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods in the following formats:
-
-- FDF
-- XFDF
-- JSON
-
-### Export and import as FDF
-
-Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
-
-* The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting.
-* The second parameter should be the format type of the form data.
-
-The following example exports and imports form field data as FDF.
-
-```ts
-
-
-
-
-
-
-// Event triggers on Export FDF button click.
-document.getElementById('exportFdf').addEventListener('click', ()=> {
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Fdf);
-});
-
-// Event triggers on Import FDF button click.
-document.getElementById('importFdf').addEventListener('click', ()=> {
- // The file for importing the form field should be placed in the desired location, and the path should be provided correctly
- viewer.importFormFields('File', FormFieldDataFormat.Fdf);
-});
-
-```
-
-### Export and import as XFDF
-
-The following example exports and imports form field data as XFDF.
-
-```ts
-
-
-
-
-
-
-// Event triggers on Export XFDF button click.
-document.getElementById('exportXfdf').addEventListener('click', ()=> {
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Xfdf);
-});
-
-// Event triggers on Import XFDF button click.
-document.getElementById('importXfdf').addEventListener('click', ()=> {
- // The file for importing the form field should be placed in the desired location, and the path should be provided correctly
- viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
-});
-
-```
-
-### Export and import as JSON
-
-The following example exports and imports form field data as JSON.
-
-```ts
-
-
-
-
-
-
-// Event triggers on Export JSON button click.
-document.getElementById('exportJson').addEventListener('click', ()=> {
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Json);
-});
-
-// Event triggers on Import JSON button click.
-document.getElementById('importJson').addEventListener('click', ()=> {
- // The file for importing the form field should be placed in the desired location, and the path should be provided correctly
- viewer.importFormFields('File', FormFieldDataFormat.Json);
-});
-
-```
-
-### Export and import as Object
-
-The PDF Viewer component supports exporting the form field data as an object and importing that data back into the current PDF document.
-
-The following code shows how to export the form field data as an object and import the form field data from that object into the current PDF document via a button click.
-
-```ts
-
-
-
-
-
-
-let exportedData;
-
-// Event triggers on Export Object button click.
-document.getElementById('exportDataAsObject').addEventListener('click', ()=> {
- // Export the form field data to an FDF object.
- viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(value => {
- exportedData = value;
- });
-
- // // Export the form field data to an XFDF object.
- // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(value =>{
- // exportedData = value;
- // })
-
- // // Export the form field data to an JSON object.
- // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(value =>{
- // exportedData = value;
- // })
-});
-
-// Event triggers on Import Data button click.
-document.getElementById('importData').addEventListener('click', ()=> {
- // Import the form field data from the FDF object into the current PDF document.
- viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf);
-
- //// Import the form field data from the XFDF object into the current PDF document.
- //viewer.importFormFields (exportedData, FormFieldDataFormat.Xfdf);
-
- //// Import the form field data from the FDF object into the current PDF document.
- //viewer.importFormFields (exportedData, FormFieldDataFormat.Json);
-});
-```
-## Form field properties
-
-Form field properties allow customization and interaction with fields embedded in PDF documents. The following sections outline the supported field types and their configurable settings.
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-### Signature and initial fields settings
-
-Use the updateFormField method to modify form fields programmatically.
-
-The following code example explains how to update the signature field properties on a button click.
-
-```ts
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Initial',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Initial',
- thickness: 4
- });
-});
-
-```
-
-The following code shows how to configure default properties for a signature field added from the Form Designer toolbar.
-
-```ts
-
-// Properties to customize the signature field settings
-viewer.signatureFieldSettings = {
- // Set the name of the form field element.
- name: 'Signature',
- // Specify whether the signature field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the signature field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Signature',
- // Set the thickness of the Signature field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specify the properties of the signature Dialog Settings in the signature field.
- signatureDialogSettings: {
- displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
- hideSaveSignature: false,
- },
- // Specify the properties of the signature indicator in the signature field.
- signatureIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Signature Field',
- color: 'white'
- },
-};
-
-```
-
-
-
-The following code shows how to configure default properties for an initial field added from the Form Designer toolbar.
-
-```ts
-
-// Properties to customize the initial field settings
-viewer.initialFieldSettings = {
- // Set the name of the form field element.
- name: 'Initial',
- // Specify whether the initial field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the initial field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Initial',
- // Set the thickness of the initial field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies the properties of the initial indicator in the initial field.
- initialIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Initial Field',
- color: 'white'
- },
- // Specify the properties of the initial Dialog Settings in the intial field.
- initialDialogSettings: {
- displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
- hideSaveSignature: false
- }
-};
-
-```
-
-
-
-### Textbox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates Textbox field properties on a button click.
-
-```html
-
-
-```
-
-```ts
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Textbox',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Textbox',
- thickness: 4,
- value:'Textbox',
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- maxLength: 0,
- isMultiline: false,
- bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
- });
-});
-
-
-```
-
-The following code shows how to configure default properties for a Textbox field added from the Form Designer toolbar.
-
-```ts
-
-// Properties to customize the Textbox field settings
-viewer.textFieldSettings = {
- // Set the name of the form field element.
- name: 'Textbox',
- // Specify whether the Textbox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the Textbox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Textbox',
- // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'Textbox',
- // Set the font family of the textbox field.
- fontFamily: 'Courier',
- // Set the font size of the textbox field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the textbox field.
- color: 'black',
- // Set the border color of the textbox field.
- borderColor: 'black',
- // Set the background color of the textbox field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the maximum character length.
- maxLength: 0,
- // Allows multiline input in the text field. FALSE, by default.
- isMultiline: false
-};
-
-```
-
-
-
-### Password field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates Password field properties on a button click.
-
-```html
-
-
-```
-
-```ts
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Password',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Password',
- thickness: 4,
- value:'Password',
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- maxLength: 0,
- bounds: { X: 148, Y: 229, Width: 150, Height: 24 }
- });
-});
-
-
-```
-
-The following code shows how to configure default properties for a Password field added from the Form Designer toolbar.
-
-```ts
-
-// Properties to customize the Password field settings
-viewer.passwordFieldSettings = {
- // Set the name of the form field element.
- name: 'Password',
- // Specify whether the Password field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the Password field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Password',
- // Set the thickness of the Password field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'Password',
- // Set the font family of the Password field.
- fontFamily: 'Courier',
- // Set the font size of the Password field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the Password field.
- color: 'black',
- // Set the border color of the Password field.
- borderColor: 'black',
- // Set the background color of the Password field.
- backgroundColor: 'white',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the maximum character length.
- maxLength: 0,
-};
-
-```
-
-
-
-### CheckBox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates CheckBox field properties on a button click.
-
-```html
-
-
-```
-
-```ts
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'CheckBox',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'CheckBox',
- thickness: 4,
- isChecked: true,
- backgroundColor: 'white',
- borderColor: 'black',
- value: 'CheckBox',
- });
-});
-
-
-```
-
-The following code shows how to configure default properties for a CheckBox field added from the Form Designer toolbar.
-
-```ts
-
-// Properties to customize the CheckBox field settings
-viewer.checkBoxFieldSettings = {
- // Set the name of the form field element.
- name: 'CheckBox',
- // Specify whether the CheckBox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the CheckBox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'CheckBox',
- // Set the thickness of the CheckBox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies whether the check box is in checked state or not.
- isChecked: true,
- // Set the background color of the check box in hexadecimal string format.
- backgroundColor: 'white',
- // Set the border color of the check box field.
- borderColor: 'black',
- // Set the value of
-};
-
-```
-
-
-
-### RadioButton field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates RadioButton field properties on a button click.
-
-```html
-
-
-```
-
-```ts
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'RadioButton',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'RadioButton',
- thickness: 4,
- isSelected: true,
- backgroundColor: 'white',
- borderColor: 'black',
- value: 'RadioButton'
- });
-});
-
-
-```
-
-The following code shows how to configure default properties for a RadioButton field added from the Form Designer toolbar.
-
-```ts
-
-// Properties to customize the RadioButton field settings
-viewer.radioButtonFieldSettings = {
- // Set the name of the form field element.
- name: 'RadioButton',
- // Specify whether the RadioButton field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the RadioButton field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'RadioButton',
- // Set the thickness of the RadioButton field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies whether the radio button is in checked state or not.
- isSelected: true,
- // Set the background color of the radio button in hexadecimal string format.
- backgroundColor: 'white',
- // Set the border color of the radio button field.
- borderColor: 'black',
- // Set the value of the form field element.
- value: 'RadioButton'
-};
-
-```
-
-
-
-### ListBox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates ListBox field properties on a button click.
-
-```html
-
-
-```
-
-```ts
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'ListBox',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'ListBox',
- thickness: 4,
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- options: customOptions,
- });
-});
-
-
-```
-
-The following code shows how to configure default properties for a ListBox field added from the Form Designer toolbar.
-
-```ts
-
-// Properties to customize the Listbox field settings
-viewer.listBoxFieldSettings = {
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- // Set the name of the form field element.
- name: 'ListBox',
- // Specify whether the ListBox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the ListBox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'ListBox',
- // Set the thickness of the ListBox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'ListBox',
- // Set the font family of the ListBox field.
- fontFamily: 'Courier',
- // Set the font size of the ListBox field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the ListBox field.
- color: 'black',
- // Set the border color of the ListBox field.
- borderColor: 'black',
- // Set the background color of the ListBox field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the listbox items.
- options: customOptions
-};
-
-```
-
-
-
-### DropDown field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following example updates DropDown field properties on a button click.
-
-```html
-
-
-```
-
-```ts
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'DropDown',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'DropDown',
- thickness: 4,
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- options: customOptions,
- });
-});
-
-
-```
-
-The following code shows how to configure default properties for a DropDown field added from the Form Designer toolbar.
-
-```ts
-
-// Properties to customize the Dropdown field settings
-viewer.listBoxFieldSettings = {
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- // Set the name of the form field element.
- name: 'DropDown',
- // Specify whether the DropDown field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the DropDown field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'DropDown',
- // Set the thickness of the DropDown field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'DropDown',
- // Set the font family of the DropDown field.
- fontFamily: 'Courier',
- // Set the font size of the DropDown field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the DropDown field.
- color: 'black',
- // Set the border color of the DropDown field.
- borderColor: 'black',
- // Set the background color of the DropDown field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the DropDown items.
- options: customOptions
-};
-
-```
-
-
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md
deleted file mode 100644
index df46c4910..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/create-with-user-interface-interaction.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-layout: post
-title: Design form fields in the TypeScript PDF Viewer component | Syncfusion
-description: Learn how to add, drag, resize, edit, and manage form fields using the UI in the Syncfusion TypeScript PDF Viewer component.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Create with user interface interaction for TypeScript
-
-The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. Supported form field types include:
-
-- Textbox
-- Password
-- CheckBox
-- RadioButton
-- ListBox
-- DropDown
-- Signature field
-- Initial field
-
-## Enable or Disable form designer toolbar
-
-Inject the FormDesigner module and set enableFormDesignerToolbar to true to display the Form Designer icon on the toolbar. The default value is true. Use the following code to enable the toolbar option.
-
-```ts
-import { PdfViewer } from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(FormDesigner);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.enableFormDesignerToolbar= true;
-
-```
-
-## Add the form field dynamically
-
-Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
-
-
-
-## Drag the form field
-
-Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
-
-
-
-## Resize the form field
-
-Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
-
-
-
-## Edit or Update the form field dynamically
-
-Edit form field properties using the Form Field Properties dialog. Open it by right-clicking a form field and selecting Properties from the context menu. The following images show examples of available settings.
-
-
-
-
-
-
-
-## Clipboard operation with form field
-
-The PDF Viewer supports clipboard operations such as cut, copy, and paste for form fields. Right-click a form field to open the context menu and choose the desired clipboard action. The following image shows the available options.
-
-
-
-## Undo and Redo
-
-Undo and redo actions are supported for runtime changes made to form fields. Use the following code to perform undo and redo operations.
-
-```ts
-import { PdfViewer } from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(FormDesigner);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.undo();
-pdfviewer.redo();
-
-```
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/custom-data.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/custom-data.md
new file mode 100644
index 000000000..2e4f472c3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/custom-data.md
@@ -0,0 +1,106 @@
+---
+layout: post
+title: Add custom data to form fields in TypeScript Pdf Viewer | Syncfusion
+description: Learn how to attach, update, and read custom Data on PDF form fields using the Form Designer UI and APIs in the Syncfusion TypeScript PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Add custom data to form fields
+
+You can associate arbitrary metadata with any form field using the customData property. This is useful for storing business IDs, validation hints, tags, or any app-specific information alongside the field. The data stays with the field object during the viewer session and can be accessed whenever you query or update fields.
+
+N> customData is a free-form object. You control both its shape and how it is used in your application.
+
+## Add custom data when creating fields (programmatically)
+
+Pass a customData object in the second parameter of addFormField. You can include any serializable values.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields);
+
+const viewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+viewer.appendTo('#pdfViewer');
+
+viewer.documentLoad = () => {
+ const meta = { businessId: 'C-1024', tags: ['profile', 'kiosk'], requiredRole: 'admin' };
+ viewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 229, Width: 200, Height: 24 } as TextFieldSettings,
+ // Attach any custom metadata your app needs
+ customData: meta
+ } as any);
+};
+```
+
+N> To configure the server-backed PDF Viewer, set:
+`viewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+## Set default custom data for UI-created fields
+
+When users add fields via the Form Designer toolbar, you can predefine default customData using the per-field settings objects.
+
+```ts
+// Example: default custom data for all new Textbox fields added from the toolbar
+viewer.textFieldSettings = {
+ name: 'Textbox',
+ customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
+} as any;
+```
+
+You can do the same for other field types using passwordFieldSettings, checkBoxFieldSettings, radioButtonFieldSettings, listBoxFieldSettings, dropDownFieldSettings, signatureFieldSettings, and initialFieldSettings.
+
+## Update or replace custom data on existing fields
+
+Use updateFormField to set or modify the customData of any existing field (retrieved by object or ID).
+
+```ts
+const fields = viewer.retrieveFormFields();
+const target = fields[0];
+viewer.formDesignerModule.updateFormField(target, {
+ customData: { group: 'profile', flags: ['pii', 'masked'], updatedAt: Date.now() }
+} as any);
+```
+
+Tip: You can merge new values with existing ones in your app code before calling updateFormField.
+
+## Read custom data
+
+You can read customData from any field at any time. Typical entry points:
+- After document load
+- On your own UI actions (save, validate, route, etc.)
+
+```ts
+viewer.documentLoad = () => {
+ const fields = viewer.retrieveFormFields();
+ fields.forEach((f: any) => {
+ console.log('Field', f.name, 'customData:', f.customData);
+ });
+};
+```
+
+## Notes and best practices
+
+- Keep customData small and serializable (plain objects, arrays, numbers, strings, booleans).
+- Treat customData as application metadata. Use it to drive business rules, validation, or routing in your app.
+- When cloning or copying fields in your UI, also copy or adjust customData as needed.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Form constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md
new file mode 100644
index 000000000..ac25f2b1d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md
@@ -0,0 +1,233 @@
+---
+layout: post
+title: Form constraints in the TypeScript PDF Viewer component | Syncfusion
+description: Learn how to configure form field constraints such as isReadOnly, isRequired, and isPrint in the Syncfusion TypeScript PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Form constraints in TypeScript PDF Viewer
+
+The PDF Viewer components provides support to control user interaction and output behavior of form fields using the following constraints:
+
+- isReadOnly: Prevents users from editing a field.
+- isRequired: Marks a field as mandatory and participates in validation.
+- isPrint: Includes the field appearance when printing or exporting with print.
+
+You can set these properties when you create fields, update them later programmatically, or configure default settings so fields created from the Form Designer toolbar inherit the values.
+
+## isReadOnly
+
+Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code.
+
+- Creation
+```ts
+pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ isReadOnly: true,
+ value: 'EMP-0001'
+} as TextFieldSettings);
+```
+
+- Update existing field
+```ts
+const field = pdfviewer.formFieldCollections.find(f => f.name === 'EmployeeId');
+if (field) {
+ pdfviewer.formDesignerModule.updateFormField(field, { isReadOnly: false } as TextFieldSettings);
+}
+```
+
+- Default for new Textbox fields
+```ts
+pdfviewer.textFieldSettings = { isReadOnly: true };
+```
+
+## isRequired
+
+Use `isRequired` to mark fields as mandatory so they participate in validation during print/download. Turn on validation with enableFormFieldsValidation and handle validateFormFields to block actions if required fields are empty.
+
+- Creation
+```ts
+pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required'
+} as TextFieldSettings);
+```
+
+- Validation wiring
+```ts
+pdfviewer.enableFormFieldsValidation = true;
+pdfviewer.validateFormFields = (args: any) => {
+ //validateFormFields event triggers when fields are empty.
+ alert("Please fill all required fields. Missing: "+args.formField[0].name);
+};
+```
+
+- Default for new Textbox fields
+```ts
+pdfviewer.textFieldSettings = { isRequired: true };
+```
+
+## isPrint
+
+Use `isPrint` to control whether a field’s appearance is included when printing the PDF from the viewer.
+
+- Creation (do not print a signature field)
+```ts
+pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApplicantSign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ isPrint: false
+} as SignatureFieldSettings);
+```
+
+- Update existing field
+```ts
+const sign = pdfviewer.formFieldCollections.find(f => f.name === 'ApplicantSign');
+if (sign) {
+ pdfviewer.formDesignerModule.updateFormField(sign, { isPrint: true } as SignatureFieldSettings);
+}
+```
+
+- Default for new signature fields
+```ts
+pdfviewer.signatureFieldSettings = { isPrint: false };
+```
+
+N> Printing can be invoked programmatically using pdfviewer.print.print(); fields with isPrint: false will not appear in the print output.
+
+## Set constraints when creating a field
+
+Use `addFormField` to create fields and pass the constraint properties in the settings object. The example below adds a Textbox and a Signature field with different constraint combinations.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields);
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+pdfviewer.appendTo('#PdfViewer');
+
+pdfviewer.documentLoad = () => {
+ // Read-only Textbox that is printed but not required
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ isReadOnly: true,
+ isRequired: false,
+ isPrint: true,
+ value: 'EMP-0001'
+ } as TextFieldSettings);
+
+ // Required Signature field that is not included in print
+ pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApplicantSign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: false,
+ tooltip: 'Sign to accept the terms'
+ } as SignatureFieldSettings);
+};
+```
+
+N> To configure the server-backed PDF Viewer, add the following serviceUrl in index.ts:
+`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+## Update constraints programmatically
+
+Use `updateFormField` to change constraint flags of an existing field. The snippet below toggles isReadOnly, sets a field as required, and controls whether the field should appear when printing.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields);
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+pdfviewer.appendTo('#PdfViewer');
+
+pdfviewer.documentLoad = () => {
+ // Add a sample textbox
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 }
+ } as TextFieldSettings);
+
+ // Retrieve it and update constraint flags
+ const field = pdfviewer.formFieldCollections.find(f => f.name === 'Email');
+ if (field) {
+ pdfviewer.formDesignerModule.updateFormField(field, {
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: true,
+ tooltip: 'Enter a valid email'
+ } as TextFieldSettings);
+ }
+};
+```
+
+## Configure default constraints for newly added fields
+
+Set default settings so all fields created from the Form Designer toolbar inherit the constraint flags.
+
+The example below configures defaults for Textbox and Signature fields.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, FormDesigner, FormFields);
+
+let pdfviewer: PdfViewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf' });
+pdfviewer.appendTo('#PdfViewer');
+
+// Textbox fields will be editable, required, and included in print by default
+pdfviewer.textFieldSettings = {
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: true,
+ tooltip: 'Required field'
+};
+
+// Signature fields will be optional and hidden when printing
+pdfviewer.signatureFieldSettings = {
+ isReadOnly: false,
+ isRequired: false,
+ isPrint: false,
+ tooltip: 'Sign if applicable'
+};
+```
+
+## Behavior notes
+
+- isReadOnly only blocks user edits in the UI. You can still update the field programmatically.
+- isRequired participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details.
+- isPrint controls field appearance in the print output. It does not affect download/export unless printing is triggered.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form validation](./form-validation)
+- [Form fields API](./formfields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md
index c4ec104bb..1a53dcecc 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md
@@ -14,23 +14,23 @@ The PDF Viewer control provides the support to different Form Field events. The
| Form Field events | Description |
|---|---|
-| [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs/) | Event trigger when a form field is added.|
-| [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs/) | Events trigger when the form field is selected.|
-| [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs/) | Events trigger when the form field is double-clicked.|
-| [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) | Events trigger when focus out from the form fields.|
-| [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) | Events trigger when the mouse cursor leaves the form field.|
-| [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs/) | Events trigger when the mouse cursor is over a form field.|
-| [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs/) | Events trigger when a form field is moved.|
-| [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) | Events trigger when a property of form field is changed.|
-| [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs/) | Events trigger when a form field is removed.|
-| [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs/) | Events trigger when a form field is resized.|
-| [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs/) | Events trigger when a form field is selected.|
-| [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs/) | Events trigger when a form field is unselected.|
-| [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) | Events trigger when validation is failed.|
+| [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs) | Event trigger when a form field is added.|
+| [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs) | Events trigger when the form field is selected.|
+| [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs) | Events trigger when the form field is double-clicked.|
+| [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs) | Events trigger when focus out from the form fields.|
+| [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs) | Events trigger when the mouse cursor leaves the form field.|
+| [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs) | Events trigger when the mouse cursor is over a form field.|
+| [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs) | Events trigger when a form field is moved.|
+| [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) | Events trigger when a property of form field is changed.|
+| [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs) | Events trigger when a form field is removed.|
+| [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs) | Events trigger when a form field is resized.|
+| [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs) | Events trigger when a form field is selected.|
+| [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs) | Events trigger when a form field is unselected.|
+| [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs) | Events trigger when validation is failed.|
## formFieldAdd event
-The [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs/) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition.
+The [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -43,7 +43,7 @@ The [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfvi
## formFieldClick event
-The [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs/) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.
+The [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -56,7 +56,7 @@ The [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdf
## formFieldDoubleClick event
-The [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs/) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
+The [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -69,7 +69,7 @@ The [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/a
## formFieldFocusOut event
-The [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
+The [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -82,7 +82,7 @@ The [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/
## formFieldMouseLeave event
-The [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
+The [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -95,7 +95,7 @@ The [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/ap
## formFieldMouseOver event
-The [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs/) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.
+The [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -108,7 +108,7 @@ The [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api
## formFieldMove event
-The [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs/) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
+The [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -121,7 +121,7 @@ The [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfv
## formFieldPropertiesChange event
-The [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
+The [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -134,7 +134,7 @@ The [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentat
## formFieldRemove event
-The [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs/) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.
+The [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -147,7 +147,7 @@ The [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pd
## formFieldResize event
-The [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs/) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.
+The [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -160,7 +160,7 @@ The [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pd
## formFieldSelect event
-The [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs/) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
+The [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -173,7 +173,7 @@ The [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pd
## formFieldUnselect event
-The [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs/) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
+The [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -186,7 +186,7 @@ The [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/
## validateFormFields event
-The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
+The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
{% tabs %}
{% highlight ts tabtitle="index.ts" %}
@@ -195,4 +195,16 @@ The [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api
{% highlight html tabtitle="index.html" %}
{% include code-snippet/pdfviewer/javascript-es6/formfieldvalidationevent-cs2/index.html %}
{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md
new file mode 100644
index 000000000..58e17880e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Form filling in TypeScript PDF Viewer Control | Syncfusion
+description: Learn to view, fill, export, and import PDF form fields in Syncfusion TS PDF Viewer, including disabling interaction and handling signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Form filling in TypeScript PDF Viewer
+
+The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.
+
+The PDF Viewer supports the following form field types:
+
+* Text box
+* Password
+* Check box
+* Radio button
+* List box
+* Dropdown
+* Signature field
+* Initial field
+
+
+
+## Disabling form fields
+
+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.
+
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.enableFormDesigner = false; //To disable Form Desinger
+pdfviewer.appendTo('#PdfViewer');
+```
+
+## Access interactive form fields
+
+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.
+
+Use the following code-snippet to access interactive form fields collection:
+```html
+
+```
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+
+pdfviewer.appendTo('#PdfViewer');
+
+// Access the form fields collection via button click
+document.getElementById('formFieldCollection')?.addEventListener('click',function() {
+ const fields = pdfviewer.formFieldCollection; // Gets all form fields
+ console.log(fields)//Log the formField Collection
+});
+
+```
+
+## Add a handwritten signature to a signature field
+
+Add a handwritten signature to a signature field by following these steps:
+
+* Click the signature field in the PDF document to open the signature panel.
+
+
+
+* Draw the signature in the signature panel.
+
+
+
+* Select **CREATE**. The drawn signature is added to the signature field.
+
+
+
+## Delete a signature from a signature field
+
+Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
+
+
+
+## Export and import form fields
+
+The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported:
+
+* FDF
+* XFDF
+* JSON
+
+For more information, see the [Form fields documentation](./import-export-formfields/export-formfields).
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./formfields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-validation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-validation.md
new file mode 100644
index 000000000..87beb8ee2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-validation.md
@@ -0,0 +1,92 @@
+---
+layout: post
+title: Form validation in the TypeScript PDF Viewer component | Syncfusion
+description: Learn how to enable built-in form field validation and validate missing required fields in the Syncfusion TypeScript PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Validate form fields in TypeScript PDF Viewer
+
+The PDF Viewer Component can validate form fields during print, download or submit form. Use the [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property to turn on validation and handle the [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/validateformfieldsargs) event to review which required fields are not filled.
+
+When validation is enabled and the user attempts to print, download or submit form, the event fires with a list of non-filled fields in args.nonFillableFields. You can cancel the operation, show a message, or focus the first invalid field.
+
+## Enable validation
+
+Set `enableFormFieldsValidation` to true and wire the validateFormFields event.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields);
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+
+pdfviewer.appendTo('#PdfViewer');
+pdfviewer.enableFormFieldsValidation = true;
+
+pdfviewer.validateFormFields = (args: any) => {
+ alert("Please fill all required fields. Missing: "+args.formField[0].name);
+ console.log(args.nonFillableFields)
+};
+```
+
+## Mark a field as required and validate
+
+The snippet below creates a required Textbox and demonstrates validation blocking print until the field is filled.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, FormDesigner, FormFields, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, FormDesigner, FormFields);
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+pdfviewer.appendTo('#PdfViewer');
+
+pdfviewer.documentLoad = () => {
+ // Add a required Textbox
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required'
+ } as TextFieldSettings);
+};
+
+pdfviewer.enableFormFieldsValidation = true;
+pdfviewer.validateFormFields = (args: any) => {
+ alert("Please fill all required fields. Missing: "+args.formField[0].name);
+ console.log(args.nonFillableFields)
+};
+```
+
+## Tips
+
+- Use isRequired on individual fields to include them in the validation check.
+- The event only fires when a print or download action is invoked.
+- To perform custom checks (e.g., regex for email), iterate over pdfviewer.retrieveFormFields() and apply your own logic before triggering print or download.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields API](./formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/formfields-api.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/formfields-api.md
new file mode 100644
index 000000000..dfa7e79ce
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/formfields-api.md
@@ -0,0 +1,421 @@
+---
+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: ##DomainURL##
+---
+
+# Form Fields API in TypeScript PDF Viewer
+
+The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The following APIs are available:
+
+| API | Description |
+|---|---|
+| [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) | Updates the value for one or more form fields.|
+| [updateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) | Updates the properties of one or more form fields.|
+| [retrieveFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields) | Retrieves all form fields or by specific criteria.|
+| [resetFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#resetformfields) | Resets the specified or all form fields to their default values.|
+| [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) | Imports values and states for form fields from a JSON object or file stream.|
+| [focusFormField](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#focusformfield) | Sets focus to a form field by name or ID.|
+| [exportFormFieldsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) | Exports form fields as a JSON object.|
+| [exportFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) | Exports form fields as a downloadable file.|
+| [clearFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#clearformfields) | Clears values of specified or all form fields without removing them.|
+| [isFormFieldDocument](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformfielddocument) | Indicates whether the loaded document contains form fields.|
+| [isFormDesignerToolbarVisible](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) | Gets whether the Form Designer toolbar is currently visible.|
+| [formFieldCollections](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#formfieldcollections) | Gets the collection of current form fields with their properties.|
+| [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) | Enables or disables form field validation.|
+| [enableFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfields) | Enables or disables interaction with form fields.|
+| [enableFormDesignerToolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformdesignertoolbar) | Shows or hides the Form Designer toolbar.|
+
+## updateFormFieldsValue
+
+Updates the value of one or more form fields programmatically.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+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);
+ }
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## updateFormFields
+
+Updates form field properties such as bounds, color, font, isReadOnly, required, and more.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+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 %}
+
+## retrieveFormFields
+
+Retrieves all form fields and their properties or filters by type/name.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+const btn = document.getElementById('retrieveFormFields');
+if (btn) {
+ btn.onclick = () => {
+ const fields = pdfviewer.retrieveFormFields();
+ console.log(fields);
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## resetFormFields
+
+Resets specified form fields or all fields to their default values.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+const btn = document.getElementById('resetFormFields');
+if (btn) {
+ btn.onclick = () => {
+ pdfviewer.resetFormFields();
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## importFormFields
+
+Imports form field data from an object or file into the current document.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+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 %}
+
+## focusFormField
+
+Moves focus to a form field by name or ID.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+const btn = document.getElementById('focusFormField');
+if (btn) {
+ btn.onclick = () => {
+ pdfviewer.focusFormField('FirstName');
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## exportFormFieldsAsObject
+
+Exports current form field values and states as a JSON object.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FormFieldDataFormat } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+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 %}
+
+## exportFormFields
+
+Exports form field data to a file for download.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FormFieldDataFormat} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+const btn = document.getElementById('exportFormFields');
+if (btn) {
+ btn.onclick = () => {
+ pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## clearFormFields
+
+Clears values of specified or all fields without removing the fields themselves.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+pdfviewer.appendTo('#PdfViewer');
+
+const btn = document.getElementById('clearFormFields');
+if (btn) {
+ btn.onclick = () => {
+ let field=pdfviewer.retrieveFormFields();
+ pdfviewer.clearFormFields(field[0]);
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## isFormFieldDocument
+
+Returns true if the loaded document contains one or more form fields.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+
+const element = document.getElementById('checkFormFieldDocument');
+if (element) {
+ element.onclick = () => {
+ console.log(pdfviewer.isFormFieldDocument);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## 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.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+
+// Open the Form Designer toolbar and read its visibility state
+pdfviewer.enableFormDesignerToolbar(true);
+console.log(pdfviewer.isFormDesignerToolbarVisible);
+{% endhighlight %}
+{% endtabs %}
+
+## formFieldCollections
+
+Gets the current collection of form fields with their properties from the viewer instance.
+
+```html
+
+```
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+
+const element = document.getElementById('formfieldcollection');
+if (element) {
+ element.onclick = () => {
+ console.log(pdfviewer.formFieldCollections);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFieldsValidation
+
+Enables or disables built-in validation for required and constrained fields.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.enableFormFieldsValidation = true; // enable form fields validation
+pdfviewer.appendTo('#PdfViewer');
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormFields
+
+Enables or disables user interaction with form fields globally.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.enableFormFields = false; // Disable interaction with all fields
+pdfviewer.appendTo('#PdfViewer');
+{% endhighlight %}
+{% endtabs %}
+
+## enableFormDesignerToolbar
+
+Shows or hides the Form Designer toolbar at runtime.
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.appendTo('#PdfViewer');
+
+// Show or hide the Form Designer toolbar at runtime
+pdfviewer.enableFormDesignerToolbar(true); // show
+// pdfviewer.enableFormDesignerToolbar(false); // hide
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Group form fields](./group-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields Validation](./form-validation)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/group-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/group-formfields.md
new file mode 100644
index 000000000..4730922d4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/group-formfields.md
@@ -0,0 +1,121 @@
+---
+layout: post
+title: Group form fields in the TypeScript PDF Viewer component | Syncfusion
+description: Learn how to group PDF form fields in the Syncfusion TypeScript PDF Viewer by assigning the same name to multiple widgets.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Group form fields in TypeScript PDF Viewer
+
+In PDF forms, multiple widgets can represent the same logical form field. The Syncfusion PDF Viewer supports grouping form fields by assigning the same Name to multiple widgets. Grouped widgets mirror their values and states based on the field type.
+
+Key behavior when fields share the same Name:
+
+- Textbox and Password: Text entered in one widget appears in all widgets with the same name.
+- CheckBox: Checking one widget checks all widgets with the same name (mirrored state).
+- RadioButton: Widgets with the same name are grouped; only one radio button in the group can be selected at a time.
+- ListBox and DropDown: The selected item is shared across widgets with the same name.
+- Signature field and Initial field: The applied signature/initial is mirrored across widgets with the same name.
+
+N> Grouping is driven solely by the Name property. Bounds determine placement; name determines grouping.
+
+## Group with the user interface
+
+Use the Form Designer toolbar and set the same Name for multiple widgets to group them.
+
+Quick steps:
+
+1. Enable the Form Designer toolbar.
+2. Draw the desired fields (e.g., two Textbox widgets or multiple RadioButton widgets).
+3. Right‑click a field > Properties, and set the same Name on each widget you want to group.
+4. Apply and test: editing one grouped widget reflects in the others.
+
+Textboxes and Password fields (shared value)
+- Give both widgets the same Name to mirror the typed value across them.
+
+
+
+Radio buttons (exclusive choice within a group)
+- Add radio buttons that share the same Name to create one group; only one can be selected at a time.
+
+
+
+## Group programmatically
+
+Assign the same name when adding fields via code. The following example shows:
+
+- Two Textbox widgets named EmployeeId that mirror values.
+- A RadioButton group named Gender with exclusive selection.
+- Two CheckBox widgets named Subscribe that mirror checked state.
+
+```ts
+import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
+ TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings,
+ RadioButtonFieldSettings, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, Annotation, FormDesigner, FormFields);
+
+let pdfviewer: PdfViewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+});
+pdfviewer.appendTo('#PdfViewer');
+
+pdfviewer.documentLoad = () => {
+ // Textbox group: same name => mirrored value
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+ } as TextFieldSettings);
+
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'EmployeeId', // same name groups the two widgets
+ bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
+ } as TextFieldSettings);
+
+ // Radio button group: same name => exclusive selection across the group
+ pdfviewer.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender',
+ bounds: { X: 148, Y: 289, Width: 18, Height: 18 },
+ isSelected: false
+ } as RadioButtonFieldSettings);
+
+ pdfviewer.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender', // grouped with the first
+ bounds: { X: 292, Y: 289, Width: 18, Height: 18 },
+ isSelected: false
+ } as RadioButtonFieldSettings);
+
+ // CheckBox group: same name => mirrored checked state
+ pdfviewer.formDesignerModule.addFormField('CheckBox', {
+ name: 'Subscribe',
+ bounds: { X: 56, Y: 664, Width: 20, Height: 20 },
+ isChecked: false
+ } as CheckBoxFieldSettings);
+
+ pdfviewer.formDesignerModule.addFormField('CheckBox', {
+ name: 'Subscribe', // grouped with the first
+ bounds: { X: 242, Y: 664, Width: 20, Height: 20 },
+ isChecked: false
+ } as CheckBoxFieldSettings);
+};
+```
+
+N> To configure the server-backed PDF Viewer, add the following serviceUrl in the index.ts file:
+`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';`
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form fields Validation](./form-validation)
+- [Form fields API](./formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md
new file mode 100644
index 000000000..2250de7dd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md
@@ -0,0 +1,156 @@
+---
+layout: post
+title: Export form data in the TypeScript PDF Viewer component | Syncfusion
+description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion TypeScript PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Export form data from PDF
+
+The PDF Viewer component supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods in the following formats:
+
+- FDF
+- XFDF
+- JSON
+
+## Export as FDF
+
+Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
+
+* The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting.
+* The second parameter should be the format type of the form data.
+
+The following example exports and imports form field data as FDF.
+
+```html
+
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
+
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
+});
+viewer.appendTo('#pdfViewer');
+
+document.getElementById('exportFdf')!.addEventListener('click', () => {
+ // Data must be the desired path or file name for the exported document.
+ viewer.exportFormFields('ExportedData', FormFieldDataFormat.Fdf);
+});
+```
+
+## Export as XFDF
+
+The following example exports form field data as XFDF.
+
+```html
+
+```
+
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
+
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
+});
+viewer.appendTo('#pdfViewer');
+
+document.getElementById('exportXfdf')!.addEventListener('click', () => {
+ // Data must be the desired path or file name for the exported document.
+ viewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
+});
+```
+
+## Export as JSON
+
+The following example exports form field data as JSON.
+
+```html
+
+```
+
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
+
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
+});
+viewer.appendTo('#pdfViewer');
+
+document.getElementById('exportJson')!.addEventListener('click', () => {
+ // Data must be the desired path or file name for the exported document.
+ viewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+});
+```
+
+## Export as Object
+
+Export the form data to a JavaScript object for custom persistence (database, API, or client storage).
+The following example exports and imports form field data as Object.
+
+```html
+
+```
+
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
+
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
+});
+viewer.appendTo('#pdfViewer');
+
+let exportedData: object | undefined;
+document.getElementById('exportObj')!.addEventListener('click', () => {
+ viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
+ exportedData = data; // Save or send to server
+ console.log('Exported object:', exportedData);
+ });
+
+ // Alternative formats:
+ // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...)
+ // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...)
+});
+```
+
+## Common use cases
+
+- Persist user-entered data to your server without modifying the original PDF.
+- Export as JSON for easy integration with REST APIs.
+- Export as FDF/XFDF for interoperability with other PDF tools.
+- Export as object to combine with your app state and store securely.
+- Automate exports after validation using validateFormFields.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Import form fields](./import-formfields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields)
+- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-export-events.md
new file mode 100644
index 000000000..2196e74fa
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-export-events.md
@@ -0,0 +1,70 @@
+---
+layout: post
+title: Import/Export events in the TypeScript PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion TypeScript PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import/Export events
+
+Import/Export events let you track and customize the full lifecycle of form field data flowing into and out of the PDF Viewer.
+
+Use them to validate inputs, show progress UI, log audit trails, or block operations based on your business rules. Each event exposes typed event-args (ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, ExportFailureEventArgs) describing the operation context.
+
+Use these events to monitor and customize form field import/export operations.
+
+## Import events
+- [importStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts.
+- [importSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importsuccess): Triggers when form fields are successfully imported.
+- [importFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing form fields fails.
+
+## Handle import events
+```ts
+viewer.importStart = (args: any) => {
+ console.log('Import started', args);
+};
+viewer.importSuccess = (args: any) => {
+ console.log('Import success', args);
+};
+viewer.importFailed = (args: any) => {
+ console.error('Import failed', args);
+};
+```
+
+## Export events
+- [exportStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts.
+- [exportSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportsuccess): Triggers when form fields are successfully exported.
+- [exportFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting form fields fails.
+
+## Handle export events
+```ts
+viewer.exportStart = (args: any) => {
+ console.log('Export started', args);
+};
+viewer.exportSuccess = (args: any) => {
+ console.log('Export success', args);
+};
+viewer.exportFailed = (args: any) => {
+ console.error('Export failed', args);
+};
+```
+
+Notes:
+- importStart/importSuccess/importFailed cover the lifecycle of form field imports.
+- exportStart/exportSuccess/exportFailed cover the lifecycle of form field exports.
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Import form fields](./import-formfields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields)
+- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md
new file mode 100644
index 000000000..2f20c84c0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md
@@ -0,0 +1,156 @@
+---
+layout: post
+title: Import form data in the TypeScript PDF Viewer component | Syncfusion
+description: Learn how to import PDF form field data (FDF, XFDF, JSON, and from an object) using the Syncfusion TypeScript PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import form data into PDF
+
+The PDF Viewer provides APIs to import interactive form field values into the currently loaded PDF. You can import from the following formats:
+
+- FDF
+- XFDF
+- JSON
+
+Supported API:
+- importFormFields(sourceOrObject, format)
+
+Note: When using the server-backed viewer, set serviceUrl before importing.
+
+## Import as FDF
+
+```html
+
+
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
+
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
+});
+viewer.appendTo('#pdfViewer');
+
+document.getElementById('importFdf')!.addEventListener('click', () => {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ viewer.importFormFields('File', FormFieldDataFormat.Fdf);
+});
+```
+
+## Import as XFDF
+
+```html
+
+
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
+
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
+});
+viewer.appendTo('#pdfViewer');
+
+document.getElementById('importXfdf')!.addEventListener('click', () => {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
+});
+```
+
+## Import as JSON
+
+```html
+
+
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
+
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
+});
+viewer.appendTo('#pdfViewer');
+
+document.getElementById('importJson')!.addEventListener('click', () => {
+ // The file for importing should be accessible at the given path or as a file stream depending on your integration
+ viewer.importFormFields('File', FormFieldDataFormat.Json);
+});
+```
+
+## Import as Object
+
+Import data previously exported with exportFormFieldsAsObject. Useful for client-side roundtrips without writing a file.
+
+```html
+
+
+
+```
+```ts
+import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner);
+
+const viewer = new PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/' // Server-backed
+ resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
+});
+viewer.appendTo('#pdfViewer');
+
+let exportedData: object | undefined;
+
+document.getElementById('exportDataAsObject')!.addEventListener('click', () => {
+ viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(value => {
+ exportedData = value;
+ });
+});
+
+document.getElementById('importData')!.addEventListener('click', () => {
+ if (exportedData) {
+ // Import the previously exported object data
+ viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf);
+ }
+ // Alternatives:
+ // viewer.importFormFields(exportedData, FormFieldDataFormat.Xfdf);
+ // viewer.importFormFields(exportedData, FormFieldDataFormat.Json);
+});
+```
+
+## Common use cases
+
+- Pre-fill application forms from your database using JSON.
+- Migrate data from other PDF tools using FDF/XFDF.
+- Restore user progress stored locally or on the server using object import.
+- Combine with validation to block print/download until required fields are filled.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Export form fields](./export-formfields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields)
+- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields)
+- [Group form fields](../group-formfields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../formfields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md
new file mode 100644
index 000000000..4866709a1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md
@@ -0,0 +1,63 @@
+---
+layout: post
+title: Overview of Forms in TypeScript PDF Viewer Control | Syncfusion
+description: Learn what the Form Designer in Syncfusion TypeScript PDF Viewer offers, supported field types, and how the topics are organized.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Overview of Forms in TypeScript PDF Viewer
+
+Syncfusion TypeScript PDF Viewer provides a complete forms 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.
+
+## Form Designer
+
+Create and customize interactive fields directly on the PDF page.
+- Add fields: textbox, checkbox, radio button, dropdown, list box, signature, and initials
+- Edit quickly: move, resize, align, distribute, copy/paste, undo/redo
+- Configure properties: name, value, font, color, border, alignment, required/read-only/visibility, tab order
+- Manage fields: select, group/ungroup, reorder, or delete
+- Save and print: persist designed fields in the PDF and print with appearances
+- Tailor the UI: show/hide or customize the Form Designer toolbar, and handle events for add/edit/select/move/resize
+
+## Form Fields
+
+Work with the runtime form fields present in a PDF (AcroForm).
+- Parse and render existing fields
+- Fill fields and validate input (required, read-only, print visibility)
+- Import/Export form data as JSON, XFDF, FDF, or as a plain object
+- Control interaction: toggle read-only, show/hide, and manage printing behavior
+
+## Supported form field types
+
+- Textbox
+- Password
+- CheckBox
+- RadioButton
+- ListBox
+- DropDown
+- Signature field
+- Initial field
+
+## Typical workflows
+
+- Design → Save → Fill: create or modify fields, save them into the PDF, then fill and validate
+- Fill → Export/Import: complete forms and export data to JSON/XFDF/FDF, or import data to prefill
+- Customize → Integrate: wire up events and business rules; tailor the designer toolbar for your app
+
+## See also
+
+- [Form filling](./form-filling)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./Create-edit-Style-del-formFields/create-formfields)
+- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
+- [Style form fields](./Create-edit-Style-del-formFields/style-formfields)
+- [Group form fields](./group-formfields)
+- [Form constraints](./form-constrain)
+- [Form validation](./form-validation)
+- [Form Fields API](./formfields-api)
+- [Custom data on form fields](./custom-data)
+- [Import form data](./import-export-formfields/import-formfields)
+- [Export form data](./import-export-formfields/export-formfields)
+- [Import/Export events](./import-export-formfields/import-export-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-filling.md
deleted file mode 100644
index a6384128f..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-filling.md
+++ /dev/null
@@ -1,83 +0,0 @@
----
-layout: post
-title: Form filling in TypeScript PDF Viewer | Syncfusion
-description: Learn to view, fill, export, and import PDF form fields in Syncfusion TS PDF Viewer, including disabling interaction and handling signatures.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Form filling in TypeScript PDF Viewer
-
-The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data.
-
-The PDF Viewer supports the following form field types:
-
-* Text box
-* Password
-* Check box
-* Radio button
-* List box
-* Dropdown
-* Signature field
-* Initial field
-
-
-
-## Disabling form fields
-
-The PDF Viewer provides an option to disable interaction with form fields. Use the following configuration to disable form fields in the viewer.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib";
-pdfviewer.enableFormDesigner = false;
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add a handwritten signature to a signature field
-
-Add a handwritten signature to a signature field by following these steps:
-
-* Click the signature field in the PDF document to open the signature panel.
-
-
-
-* Draw the signature in the signature panel.
-
-
-
-* Select **CREATE**. The drawn signature is added to the signature field.
-
-
-
-## Delete a signature from a signature field
-
-Delete a signature placed in a signature field by using the Delete option in the annotation toolbar.
-
-
-
-## Export and import form fields
-
-The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported:
-
-* FDF
-* XFDF
-* JSON
-
-For more information, see the [Form fields documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/create-programmatically#export-and-import-form-fields).
-
-## See also
-
-* [Handwritten signature in TypeScript PDF Viewer](./annotations/signature-annotation)
-* [Form Designer events](./form-designer/form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formFields_properties.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formFields_properties.png
new file mode 100644
index 000000000..d4535afa7
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formFields_properties.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupRadiobutton.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupRadiobutton.png
new file mode 100644
index 000000000..82fc6ae48
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupRadiobutton.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupTextFileds.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupTextFileds.png
new file mode 100644
index 000000000..2fd8e1b2f
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/groupTextFileds.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png
new file mode 100644
index 000000000..41130691e
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-style.png
new file mode 100644
index 000000000..011c687fc
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox-style.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox.png
new file mode 100644
index 000000000..f9eb2003b
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-checkbox.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-del-formfields.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-del-formfields.png
new file mode 100644
index 000000000..f8b3b2ff9
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-del-formfields.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-edit.png
new file mode 100644
index 000000000..04b248ba5
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-style.png
new file mode 100644
index 000000000..430321898
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown-style.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown.png
new file mode 100644
index 000000000..965cc22f9
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-dropdown.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-edit.png
new file mode 100644
index 000000000..87691cee0
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-style.png
new file mode 100644
index 000000000..7cd25ad64
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial-style.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial.png
new file mode 100644
index 000000000..302cd3b86
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-initial.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-edit.png
new file mode 100644
index 000000000..0c330076e
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-style.png
new file mode 100644
index 000000000..a71cc3dde
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox-style.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox.png
new file mode 100644
index 000000000..45b7e47ff
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-listbox.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-edit.png
new file mode 100644
index 000000000..e9eee2579
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-style.png
new file mode 100644
index 000000000..174897616
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password-style.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password.png
new file mode 100644
index 000000000..e98120ec4
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-password.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-edit.png
new file mode 100644
index 000000000..d0d6f78f4
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-style.png
new file mode 100644
index 000000000..f323829b8
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton-style.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton.png
new file mode 100644
index 000000000..b24775cec
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-radiobutton.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-edit.png
new file mode 100644
index 000000000..b5f1fdb11
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-style.png
new file mode 100644
index 000000000..8e7e4affd
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature-style.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature.png
new file mode 100644
index 000000000..ca2c5ad12
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-signature.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-edit.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-edit.png
new file mode 100644
index 000000000..7e7fcd9ed
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-edit.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-style.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-style.png
new file mode 100644
index 000000000..578ea19a7
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox-style.png differ
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox.png b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox.png
new file mode 100644
index 000000000..3a70e27be
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/ui-textbox.png differ