Organize Pages
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md
deleted file mode 100644
index 3884ad3e4..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md
+++ /dev/null
@@ -1,366 +0,0 @@
----
-layout: post
-title: Create form fields in the TypeScript PDF Viewer | Syncfusion
-description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion TypeScript PDF Viewer.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Create form fields in TypeScript PDF Viewer
-
-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. You can also create and manage form fields programmatically using the API.
-
-The PDF Viewer supports the following form field types:
-
-- [Textbox](#add-textbox)
-- [Password](#add-password)
-- [CheckBox](#add-checkbox)
-- [RadioButton](#add-radiobutton)
-- [ListBox](#add-listbox)
-- [DropDown](#add-dropdown)
-- [Signature field](#signature-field)
-- [Initial field](#add-initial-field)
-
-## 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.
-
-
-
-## Textbox
-
-### Add Textbox
-
-- Open the Form Designer toolbar.
-- Select Textbox, then click/tap on the page to place it.
-- Resize/move as needed and set properties in the property panel.
-
-
-
-### Add Textbox Programmatically
-
-To add a Textbox programmatically, call addFormField with type 'Textbox' and pass as `TextFieldSettings` object. The example below adds a textbox when the document loads.
-
-```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');
-
-pdfviewer.documentLoad = () => {
- pdfviewer.formDesignerModule.addFormField('Textbox', {
- name: 'First Name',
- bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
- } as TextFieldSettings);
-};
-```
-
-## Password
-
-### Add Password
-
-- Open the Form Designer toolbar.
-- Select Password, then place it on the page.
-- Configure tooltip, required, max length, etc.
-
-
-
-### Add Password Programmatically
-
-To add a Password field programmatically, call addFormField with type 'Password' and pass as `PasswordFieldSettings` object. The example below adds the field when the document loads.
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } 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');
-
-pdfviewer.documentLoad = () => {
- pdfviewer.formDesignerModule.addFormField('Password', {
- name: 'Account Password',
- bounds: { X: 148, Y: 270, Width: 180, Height: 24 }
- } as PasswordFieldSettings);
-};
-```
-
-## CheckBox
-
-### Add CheckBox
-
-- Choose CheckBox in the Form Designer toolbar.
-- Click on the page to place, duplicate for multiple options if needed.
-- Use property panel to set IsChecked, tooltip, and appearance.
-
-
-
-### Add CheckBox Programmatically
-
-To add a CheckBox programmatically, call `addFormField` with type 'CheckBox' and pass as `CheckBoxFieldSettings` object. Set isChecked and bounds as needed. The example below adds the field when the document loads.
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } 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');
-
-pdfviewer.documentLoad = () => {
- pdfviewer.formDesignerModule.addFormField('CheckBox', {
- name: 'Subscribe',
- isChecked: false,
- bounds: { X: 56, Y: 664, Width: 20, Height: 20 }
- } as CheckBoxFieldSettings);
-};
-```
-
-## RadioButton
-
-### Add RadioButton
-
-- Select RadioButton in the Form Designer toolbar.
-- Place buttons sharing the same Name to create a group (e.g., Gender).
-- Use property panel to set selection, colors, and tooltip.
-
-
-
-### Add RadioButton Programmatically
-
-To add radio buttons programmatically, call addFormField with type 'RadioButton' and pass as `RadioButtonFieldSettings` object. Use the same name to group buttons. The example below adds two radio buttons when the document loads.
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } 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');
-
-pdfviewer.documentLoad = () => {
- // Group by name: 'Gender'
- pdfviewer.formDesignerModule.addFormField('RadioButton', {
- name: 'Gender',
- isSelected: false,
- bounds: { X: 148, Y: 289, Width: 18, Height: 18 }
- } as RadioButtonFieldSettings);
-
- pdfviewer.formDesignerModule.addFormField('RadioButton', {
- name: 'Gender',
- isSelected: false,
- bounds: { X: 292, Y: 289, Width: 18, Height: 18 }
- } as RadioButtonFieldSettings);
-};
-```
-
-## ListBox
-
-### Add ListBox
-
-- Choose ListBox in the Form Designer toolbar.
-- Place the field and add items in the property panel.
-- Configure font, size, and selection behavior.
-
-
-
-### Add ListBox Programmatically
-
-To add a ListBox programmatically, call `addFormField` with type 'ListBox' and pass as `ListBoxFieldSettings` object, including an options array for the items. The example below adds the field when the document loads.
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, ListBoxFieldSettings } 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');
-
-pdfviewer.documentLoad = () => {
- const options = [
- { itemName: 'Item 1', itemValue: 'item1' },
- { itemName: 'Item 2', itemValue: 'item2' },
- { itemName: 'Item 3', itemValue: 'item3' }
- ];
-
- pdfviewer.formDesignerModule.addFormField('ListBox', {
- name: 'States',
- options,
- bounds: { X: 380, Y: 320, Width: 150, Height: 60 }
- } as ListBoxFieldSettings);
-};
-```
-
-## DropDown
-
-### Add DropDown
-
-- Select DropDown in the Form Designer toolbar.
-- Place the field, then add items via the property panel.
-- Adjust appearance and default value.
-
-
-
-### Add DropDown Programmatically
-
-To add a DropDown programmatically, call addFormField with type 'DropDown' and pass a `DropdownFieldSettings` object with an options array. The example below adds the field when the document loads.
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } 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');
-
-pdfviewer.documentLoad = () => {
- const options = [
- { itemName: 'Item 1', itemValue: 'item1' },
- { itemName: 'Item 2', itemValue: 'item2' },
- { itemName: 'Item 3', itemValue: 'item3' }
- ];
-
- pdfviewer.formDesignerModule.addFormField('DropDown', {
- name: 'Country',
- options,
- bounds: { X: 560, Y: 320, Width: 150, Height: 24 }
- } as DropdownFieldSettings);
-};
-```
-
-## Signature field
-
-### Add Signature field
-
-- Select Signature field in the Form Designer toolbar.
-- Place the field where the signer should sign.
-- Configure indicator text, thickness, tooltip, and required state.
-
-
-
-### Add Signature field Programmatically
-
-To add a Signature field programmatically, call addFormField with type 'SignatureField' and pass a `SignatureFieldSettings` object. The example below adds the field when the document loads.
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } 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');
-
-pdfviewer.documentLoad = () => {
- pdfviewer.formDesignerModule.addFormField('SignatureField', {
- name: 'Sign',
- bounds: { X: 57, Y: 923, Width: 200, Height: 43 }
- } as SignatureFieldSettings);
-};
-```
-
-## Initial field
-
-### Add Initial field
-
-- Select Initial field in the Form Designer toolbar.
-- Place the field where initials are required.
-- Configure indicator text, tooltip, and required state.
-
-
-
-### Add Initial field Programmatically
-
-To add an Initial field programmatically, call addFormField with type 'InitialField' and pass an `InitialFieldSettings` object. The example below adds the field when the document loads.
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } 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');
-
-pdfviewer.documentLoad = () => {
- pdfviewer.formDesignerModule.addFormField('InitialField', {
- name: 'Initial',
- bounds: { X: 148, Y: 466, Width: 200, Height: 43 }
- } as InitialFieldSettings);
-};
-```
-
-## 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.
-
-```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/pdf-succinctly.pdf';
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('addPasswordField').addEventListener('click', function () {
- pdfviewer.formDesignerModule.setFormFieldMode("Password");
- //In setFormFieldModule-You can pass the required field to be added like Textbox, Checkbox etc.,
-});
-```
-
-[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)
-- [Edit form fields](./edit-formfields)
-- [Style form fields](./style-formfields)
-- [Remove form fields](./remove-formfields)
-- [Group form fields](../group-formfields)
-- [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/Create-edit-Style-del-formFields/edit-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md
deleted file mode 100644
index 79e5641c4..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md
+++ /dev/null
@@ -1,419 +0,0 @@
----
-layout: post
-title: Edit form fields in the TypeScript PDF Viewer | Syncfusion
-description: Learn how to edit PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Edit form fields in TypeScript PDF Viewer
-
-The PDF Viewer component allows user to edit PDF form fields using the Form Designer UI and update them programmatically.
-
-The PDF Viewer supports editing these field types:
-
-- [Textbox](#textbox)
-- [Password](#password)
-- [CheckBox](#checkbox)
-- [RadioButton](#radiobutton)
-- [ListBox](#listbox)
-- [DropDown](#dropdown)
-- [Signature field](#signature-field)
-- [Initial field](#initial-field)
-
-## Edit with the UI
-
-- Select a form field and Right-click to open the Properties panel from the context menu to change its settings.
-
-
-
-- Drag to move; use resize handles to resize.
-- Use the toolbar to toggle field mode and add new fields.
-
-## Textbox
-
-### Edit Textbox
-
-- Right-click the textbox → Properties.
-- Change value, font, size, colors, border thickness, alignment, max length, multiline.
-
-
-
-### Edit Textbox programmatically
-
-Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the textbox, and applies value, typography, colors, alignment, and border thickness updates.
-
-```html
-
-```
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FontStyle, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-(document.getElementById('editTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
- // 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,
- fontStyle: FontStyle.None,
- color: 'black',
- backgroundColor: 'white',
- borderColor: 'black',
- thickness: 2,
- alignment: 'Left',
- maxLength: 50
- } as TextFieldSettings);
- }
-});
-```
-
-## Password
-
-### Edit Password
-
-- Right-click the password field → Properties.
-- Change tooltip, required, max length, font, and appearance.
-
-
-
-### Edit Password programmatically
-
-Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the password field, and applies tooltip, validation flags, typography, colors, alignment, max length, and border thickness updates.
-
-```html
-
-```
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-(document.getElementById('editPasswordBox') as HTMLButtonElement)?.addEventListener('click', () => {
- // Retrieve form fields collection
- const fields = pdfviewer.retrieveFormFields();
- // Find the password field by name (Here field name is Password)
- const field = fields.find((f: any) => f.name === 'Password');
- if (field) {
- // Update password field properties
- pdfviewer.formDesignerModule.updateFormField(field, {
- tooltip: 'Enter your password',
- isReadOnly: false,
- isRequired: true,
- isPrint: true,
- fontFamily: 'Courier',
- fontSize: 10,
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- maxLength: 20,
- thickness: 1
- } as PasswordFieldSettings);
- }
-});
-```
-
-## CheckBox
-
-### Edit CheckBox
-
-- Right-click the checkbox → Properties.
-- Enable checked state.
-
-
-
-### Edit CheckBox programmatically
-
-Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the checkbox field, and applies checked state, tooltip, colors, and border thickness updates.
-
-```html
-
-```
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-(document.getElementById('editCheckbox') as HTMLButtonElement)?.addEventListener('click', () => {
- // Retrieve form fields collection
- const fields = pdfviewer.retrieveFormFields();
- // Find the checkbox field by name (Here field name is Subscribe)
- const cb = fields.find((f: any) => f.name === 'Subscribe');
- if (cb) {
- // Update checkbox field properties and state
- pdfviewer.formDesignerModule.updateFormField(cb, {
- isChecked: true,
- backgroundColor: 'white',
- borderColor: 'black',
- thickness: 2,
- tooltip: 'Subscribe to newsletter'
- } as CheckBoxFieldSettings);
- }
-});
-```
-
-## RadioButton
-
-### Edit RadioButton
-
-- Right-click a radio button → Properties.
-- Set selected state. Buttons with the same Name form a group; only one can be selected.
-
-
-
-### Edit RadioButton programmatically
-
-Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the radio button group, and applies selection state and border appearance updates.
-
-```html
-
-```
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-(document.getElementById('editRadio') as HTMLButtonElement)?.addEventListener('click', () => {
- // Retrieve form fields collection
- const fields = pdfviewer.retrieveFormFields();
- // Filter the radio button group by name (Here group name is Gender)
- const genderRadios = fields.filter((f: any) => f.name === 'Gender');
- if (genderRadios[1]) {
- // Update radio button selection and appearance
- pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false } as RadioButtonFieldSettings);
- pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings);
- }
-});
-```
-
-## ListBox
-
-### Edit ListBox
-
-- Right-click the list box → Properties.
-- Add/remove items, set selection, and adjust fonts and colors.
-
-
-
-### Edit ListBox programmatically
-
-Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the list box, and applies options, selection, typography, colors, and border appearance updates.
-
-```html
-
-```
-```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);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-(document.getElementById('editListBox') as HTMLButtonElement)?.addEventListener('click', () => {
- // Retrieve form fields collection
- const fields = pdfviewer.retrieveFormFields();
- // Find the listbox field by name (Here field name is States)
- const lb = fields.find((f: any) => f.name === 'States');
- if (lb) {
- // Update listbox options, selection, and appearance
- pdfviewer.formDesignerModule.updateFormField(lb, {
- options: [
- { itemName: 'Alabama', itemValue: 'AL' },
- { itemName: 'Alaska', itemValue: 'AK' },
- { itemName: 'Arizona', itemValue: 'AZ' }
- ],
- value: 'AZ',
- fontFamily: 'Courier',
- fontSize: 10,
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white'
- } as unknown as TextFieldSettings);
- }
-});
-```
-
-## DropDown
-
-### Edit DropDown
-
-- Right-click the dropdown → Properties.
-- Add/remove items, set default value, and adjust appearance.
-
-
-
-### Edit DropDown programmatically
-
-Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the dropdown, and applies items, value, typography, colors, and border appearance updates.
-
-```html
-
-```
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-(document.getElementById('editDropDown') as HTMLButtonElement)?.addEventListener('click', () => {
- // Retrieve form fields collection
- const fields = pdfviewer.retrieveFormFields();
- // Find the dropdown field by name (Here field name is Country)
- const dd = fields.find((f: any) => f.name === 'Country');
- if (dd) {
- // Update dropdown items, value, and appearance
- pdfviewer.formDesignerModule.updateFormField(dd, {
- options: [
- { itemName: 'USA', itemValue: 'US' },
- { itemName: 'Canada', itemValue: 'CA' },
- { itemName: 'Mexico', itemValue: 'MX' }
- ],
- value: 'US',
- fontFamily: 'Courier',
- fontSize: 10,
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white'
- } as DropdownFieldSettings);
- }
-});
-```
-
-## Signature field
-
-### Edit Signature field
-
-- Right-click the signature field → Properties.
-- Change tooltip, thickness, indicator text, required/visibility states.
-
-
-
-### Edit Signature field programmatically
-
-Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the signature field, and applies tooltip, required/print flags, colors, and border thickness updates.
-
-```html
-
-```
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-(document.getElementById('editSignature') as HTMLButtonElement)?.addEventListener('click', () => {
- // Retrieve form fields collection
- const fields = pdfviewer.retrieveFormFields();
- // Find the signature field by name (Here field name is Sign)
- const sig = fields.find((f: any) => f.name === 'Sign');
- if (sig) {
- // Update signature field properties
- pdfviewer.formDesignerModule.updateFormField(sig, {
- tooltip: 'Please sign here',
- thickness: 3,
- isRequired: true,
- isPrint: true,
- backgroundColor: 'white',
- borderColor: 'black'
- } as SignatureFieldSettings);
- }
-});
-```
-
-## Initial field
-
-### Edit Initial field
-
-- Right-click the initial field → Properties.
-- Change tooltip, indicator text, thickness, and required/visibility states.
-
-
-
-### Edit Initial field programmatically
-
-Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the initial field, and applies tooltip, required/print flags, colors, and border thickness updates.
-
-```html
-
-```
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-(document.getElementById('editInitial') as HTMLButtonElement)?.addEventListener('click', () => {
- // Retrieve form fields collection
- const fields = pdfviewer.retrieveFormFields();
- // Find the initial field by name (Here field name is Initial)
- const init = fields.find((f: any) => f.name === 'Initial');
- if (init) {
- // Update initial field properties
- pdfviewer.formDesignerModule.updateFormField(init, {
- tooltip: 'Add your initials',
- thickness: 2,
- isRequired: true,
- isPrint: true,
- backgroundColor: 'white',
- borderColor: 'black'
- } as InitialFieldSettings);
- }
-});
-```
-
-[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-formfields)
-- [Remove form Fields](./remove-formfields)
-- [Style form fields](./style-formfields)
-- [Group form fields](../group-formfields)
-- [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/Create-edit-Style-del-formFields/remove-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md
deleted file mode 100644
index 667789153..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md
+++ /dev/null
@@ -1,104 +0,0 @@
----
-layout: post
-title: Remove form fields in the TypeScript PDF Viewer component | Syncfusion
-description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion TypeScript PDF Viewer component.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Remove form fields in TypeScript PDF Viewer control
-
-The PDF Viewer component allows users to remove PDF form fields using the Form Designer UI and programmatically.
-
-## Remove form fields using the UI
-
-You can remove designed form fields directly from the Form Designer toolbar.
-
-Steps:
-
-- Select the target form field on the page.
-- Click the Delete Form Field icon on the Form Designer toolbar.
-- Alternatively, press the `Delete key` after selecting one or more fields.
-
-
-
-## Remove form fields programmatically
-
-Use the `deleteFormField` method to remove form fields programmatically. Retrieve the target field from the `formFieldCollections` property (by object or ID) and pass it to `deleteFormField`.
-
-The following example adds three fields on document load (Textbox, Password, and Signature) and shows two ways to remove them using buttons.
-
-```html
-
-
-
-```
-```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);
-
-const 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'
-});
-
-// Optional server-backed
-// pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
-
-pdfviewer.appendTo('#PdfViewer');
-
-// Add form fields on document load
-pdfviewer.documentLoad = () => {
- pdfviewer.formDesignerModule.addFormField('Textbox', {
- name: 'First Name',
- bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
- } as TextFieldSettings);
-
- pdfviewer.formDesignerModule.addFormField('Password', {
- name: 'Password',
- bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
- } as TextFieldSettings);
-
- pdfviewer.formDesignerModule.addFormField('SignatureField', {
- name: 'Sign Here',
- bounds: { X: 146, Y: 280, Width: 200, Height: 43 }
- } as SignatureFieldSettings);
-};
-
-// Delete all added form fields on button click
-(document.getElementById('deleteAllFields') as HTMLButtonElement).addEventListener('click', () => {
- const fields = [...pdfviewer.formFieldCollections]; // clone to avoid mutation issues
- fields.forEach(field => pdfviewer.formDesignerModule.deleteFormField(field));
-});
-
-// Delete by ID on button click (example uses the first field's ID)
-(document.getElementById('deleteById') as HTMLButtonElement).addEventListener('click', () => {
- if (pdfviewer.formFieldCollections.length > 0) {
- const id = pdfviewer.formFieldCollections[0].id;
- if (id) {
- pdfviewer.formDesignerModule.deleteFormField(id);
- }
- }
-});
-```
-
-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-formfields)
-- [Edit form fields](./edit-formfields)
-- [Style form fields](./style-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/Create-edit-Style-del-formFields/style-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/style-formfields.md
deleted file mode 100644
index 529aff90b..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/style-formfields.md
+++ /dev/null
@@ -1,548 +0,0 @@
----
-layout: post
-title: Style form fields in the TypeScript PDF Viewer | Syncfusion
-description: Learn how to configure typography, colors, borders, alignment, and other style settings for PDF form fields using the UI and programmatically.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
----
-
-# Style form fields in TypeScript PDF Viewer
-
-The PDF Viewer component allows users to style and customize the appearance of PDF form fields using the Form Designer UI and programmatically. User can also set the default settings applied when fields are added from the Form Designer toolbar.
-
-Supported field types:
-
-- [Textbox](#textbox)
-- [Password](#password)
-- [CheckBox](#checkbox)
-- [RadioButton](#radiobutton)
-- [ListBox](#listbox)
-- [DropDown](#dropdown)
-- [Signature field](#signature-field)
-- [Initial field](#initial-field)
-
-## Textbox
-
-### Style Textbox
-
-Use the Properties panel to adjust the value, font family/size/style, text color, border and background colors, border thickness, text alignment, and maximum length.
-
-
-
-### Style Textbox programmatically
-
-Use `updateFormField` to modify a textbox’s appearance and behavior on a button click. The example below finds the field by name (or falls back to the first field) and updates value, typography, colors, alignment, and border thickness.
-
-```html
-
-```
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FontStyle, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-// Update textbox styling on button click
-(document.getElementById('updateTextboxStyle') as HTMLButtonElement)?.addEventListener('click', () => {
- // Retrieve form fields collection
- const fields = pdfviewer.retrieveFormFields();
- // Find the textbox field by name
- const tb = fields.find((f: any) => f.name === 'First Name') || fields[0];
- if (tb) {
- // Update textbox field styling
- pdfviewer.formDesignerModule.updateFormField(tb, {
- value: 'John',
- fontFamily: 'Courier',
- fontSize: 12,
- fontStyle: FontStyle.None,
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- thickness: 2
- } as TextFieldSettings);
- }
-});
-```
-
-### Default Textbox settings
-
-The PDF Viewer exposes a default settings APIs for form fields. Use the [TextFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#textfieldsettings) to pre configure TextBox properties applied when adding fields from the Form Designer toolbar.
-
-```ts
-// Apply as defaults for Textbox added from toolbar
-pdfviewer.textFieldSettings = {
- name: 'Textbox',
- isReadOnly: false,
- 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
-};
-```
-
-## Password
-
-### Style Password
-
-Use the Properties panel to configure the tooltip, font family and size, masked text color, border and background colors, text alignment, maximum length, and border thickness.
-
-
-
-### Style Password programmatically
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-// Retrieve form fields collection and find the password field by name
-const pw = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Password');
-if (pw) {
- // Update password field styling
- pdfviewer.formDesignerModule.updateFormField(pw, {
- tooltip: 'Enter password',
- fontFamily: 'Courier',
- fontSize: 10,
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- maxLength: 20,
- thickness: 1
- } as PasswordFieldSettings);
-}
-```
-
-### Default Password settings
-
-The PDF Viewer exposes default settings APIs for form fields. Use the [PasswordFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#passwordfieldsettings) to pre configure Password properties applied when adding fields from the Form Designer toolbar.
-
-```ts
-pdfviewer.passwordFieldSettings = {
- name: 'Password',
- isReadOnly: false,
- 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
-};
-```
-
-## CheckBox
-
-### Style CheckBox
-
-Use the Properties panel to toggle the checked state and customize border and background colors, and border thickness.
-
-
-
-### Style CheckBox programmatically
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-// Retrieve form fields collection and find the checkbox field by name
-const cb = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Subscribe');
-if (cb) {
- // Update checkbox field styling
- pdfviewer.formDesignerModule.updateFormField(cb, {
- isChecked: true,
- backgroundColor: 'white',
- borderColor: 'black',
- thickness: 2,
- tooltip: 'Subscribe'
- } as CheckBoxFieldSettings);
-}
-```
-
-### Default CheckBox settings
-
-The PDF Viewer exposes default settings APIs for form fields. Use the [CheckBoxFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#checkboxfieldsettings) to pre configure CheckBox properties applied when adding fields from the Form Designer toolbar.
-
-```ts
-pdfviewer.checkBoxFieldSettings = {
- name: 'CheckBox',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'CheckBox',
- thickness: 4,
- isChecked: true,
- backgroundColor: 'white',
- borderColor: 'black'
-};
-```
-
-## RadioButton
-
-### Style RadioButton
-
-Use the Properties panel to set the selected state, border and background colors, and border thickness. Radio buttons with the same name are grouped automatically.
-
-
-
-### Style RadioButton programmatically
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-// Retrieve all radio buttons by group name
-const radios = pdfviewer.formFieldCollections.filter((f: any) => f.name === 'Gender');
-if (radios.length > 1) {
- // Deselect first option
- pdfviewer.formDesignerModule.updateFormField(radios[0], { isSelected: false } as RadioButtonFieldSettings);
- // Select second option and style
- pdfviewer.formDesignerModule.updateFormField(radios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings);
-}
-```
-
-### Default RadioButton settings
-
-The PDF Viewer exposes default settings APIs for form fields. Use the [RadioButtonFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings) to pre configure RadioButton properties applied when adding fields from the Form Designer toolbar.
-
-```ts
-pdfviewer.radioButtonFieldSettings = {
- name: 'RadioButton',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'RadioButton',
- thickness: 4,
- isSelected: true,
- backgroundColor: 'white',
- borderColor: 'black',
- value: 'RadioButton'
-};
-```
-
-## ListBox
-
-### Style ListBox
-
-Use the Properties panel to add or remove items, set the selected value, and adjust typography and colors.
-
-
-
-### Style ListBox programmatically
-
-```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);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-// Retrieve form fields collection and find the list box field by name
-const lb = pdfviewer.formFieldCollections.find((f: any) => f.name === 'States');
-if (lb) {
- // Update list box items, value, and styling
- pdfviewer.formDesignerModule.updateFormField(lb, {
- options: [
- { itemName: 'Item 1', itemValue: 'item1' },
- { itemName: 'Item 2', itemValue: 'item2' },
- { itemName: 'Item 3', itemValue: 'item3' }
- ],
- value: 'item2',
- fontFamily: 'Courier',
- fontSize: 10,
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white'
- } as unknown as TextFieldSettings);
-}
-```
-
-### Default ListBox settings
-
-The PDF Viewer exposes default settings APIs for form fields. Use the [listBoxFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#listboxfieldsettings) to pre configure ListBox properties applied when adding fields from the Form Designer toolbar.
-
-```ts
-const customOptions = [
- { itemName: 'item1', itemValue: 'item1' },
- { itemName: 'item2', itemValue: 'item2' },
- { itemName: 'item3', itemValue: 'item3' }
-];
-
-pdfviewer.listBoxFieldSettings = {
- name: 'ListBox',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'ListBox',
- thickness: 4,
- value: 'ListBox',
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'White',
- alignment: 'Left',
- options: customOptions
-};
-```
-
-## DropDown
-
-### Style DropDown
-
-Use the Properties panel to add or remove items, set the default value, and adjust typography and colors.
-
-
-
-### Style DropDown programmatically
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-// Retrieve form fields collection and find the dropdown field by name
-const dd = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Country');
-if (dd) {
- // Update dropdown items, value, and styling
- pdfviewer.formDesignerModule.updateFormField(dd, {
- options: [
- { itemName: 'USA', itemValue: 'US' },
- { itemName: 'Canada', itemValue: 'CA' },
- { itemName: 'Mexico', itemValue: 'MX' }
- ],
- value: 'US',
- fontFamily: 'Courier',
- fontSize: 10,
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white'
- } as DropdownFieldSettings);
-}
-```
-
-### Default DropDown settings
-
-The PDF Viewer exposes default settings APIs for form fields. DropDown uses [DropDownFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#DropDownfieldsettings) to pre configure properties applied when adding fields from the Form Designer toolbar.
-
-```ts
-const ddOptions = [
- { itemName: 'item1', itemValue: 'item1' },
- { itemName: 'item2', itemValue: 'item2' },
- { itemName: 'item3', itemValue: 'item3' }
-];
-
-// DropDown uses listBoxFieldSettings for defaults
-pdfviewer.DropdownFieldSettings = {
- name: 'DropDown',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'DropDown',
- thickness: 4,
- value: 'DropDown',
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'White',
- alignment: 'Left',
- options: ddOptions
-};
-```
-
-## Signature field
-
-### Style Signature field
-
-Use the Properties panel to configure the tooltip, indicator text, dialog display modes, border thickness, required setting, and colors.
-
-
-
-### Style Signature field programmatically
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-// Retrieve form fields collection and find the signature field by name
-const sig = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Sign');
-if (sig) {
- // Update signature field settings
- pdfviewer.formDesignerModule.updateFormField(sig, {
- tooltip: 'Please sign here',
- thickness: 3,
- isRequired: true,
- isPrint: true,
- backgroundColor: 'white',
- borderColor: 'black'
- } as unknown as SignatureFieldSettings);
-}
-```
-
-### Default Signature field settings
-
-The PDF Viewer exposes default settings APIs for form fields. Use the [SignatureFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#signaturefieldsettings) to pre configure Signature properties applied when adding fields from the Form Designer toolbar.
-
-```ts
-pdfviewer.signatureFieldSettings = {
- name: 'Signature',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Signature',
- thickness: 4,
- signatureDialogSettings: {
- displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
- hideSaveSignature: false
- },
- signatureIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Signature Field',
- color: 'white'
- }
-};
-```
-
-## Initial field
-
-### Style Initial field
-
-Use the Properties panel to configure the tooltip, indicator text, dialog display modes, border thickness, and colors.
-
-
-
-### Style Initial field programmatically
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
-
-const pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-pdfviewer.appendTo('#PdfViewer');
-
-// Retrieve form fields collection and find the initial field by name
-const init = pdfviewer.formFieldCollections.find((f: any) => f.name === 'Initial');
-if (init) {
- // Update initial field settings
- pdfviewer.formDesignerModule.updateFormField(init, {
- tooltip: 'Add your initials',
- thickness: 2,
- isRequired: true,
- isPrint: true,
- backgroundColor: 'white',
- borderColor: 'black'
- } as unknown as InitialFieldSettings);
-}
-```
-
-### Default Initial field settings
-
-The PDF Viewer exposes default settings APIs for form fields. Use the [InitialFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#initialfieldsettings) to pre configure Initial properties applied when adding fields from the Form Designer toolbar.
-
-```ts
-pdfviewer.initialFieldSettings = {
- name: 'Initial',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Initial',
- thickness: 4,
- initialIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Initial Field',
- color: 'white'
- },
- initialDialogSettings: {
- displayMode: DisplayMode.Draw | DisplayMode.Upload | DisplayMode.Text,
- hideSaveSignature: false
- }
-};
-```
-
-[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-formfields)
-- [Edit form fields](./edit-formfields)
-- [Remove form fields](./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/custom-data.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/custom-data.md
deleted file mode 100644
index 2e4f472c3..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/custom-data.md
+++ /dev/null
@@ -1,106 +0,0 @@
----
-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-field-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md
deleted file mode 100644
index 1a53dcecc..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-field-events.md
+++ /dev/null
@@ -1,210 +0,0 @@
----
-layout: post
-title: Form Field Events in TypeScript PDF Viewer control | Syncfusion
-description: Learn here all about different form field in Syncfusion TypeScript PDF Viewer component of Syncfusion Essential JS 2 and more.
-platform: document-processing
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# PDF Viewer Form Field events in TypeScript
-
-The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are:
-
-| 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 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldaddevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldaddevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldclickevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldclickevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfielddoubleclickevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfielddoubleclickevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldfocusoutevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldfocusoutevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldmouseleaveevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldmouseleaveevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldmouseoverevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldmouseoverevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldmoveevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldmoveevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldpropertieschangeevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldpropertieschangeevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldremoveevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldremoveevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldresizeevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldresizeevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldselectevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldselectevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldunselectevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldunselectevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## 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.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldvalidationevent-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/javascript-es6/formfieldvalidationevent-cs2/index.html %}
-{% 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 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-validation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-validation.md
deleted file mode 100644
index 87beb8ee2..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-validation.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-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/group-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/group-formfields.md
deleted file mode 100644
index eb518a163..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/group-formfields.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-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
deleted file mode 100644
index ac00a3e49..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/export-formfields.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-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](#export-as-fdf)
-- [XFDF](#export-as-xfdf)
-- [JSON](#export-as-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](../form-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
deleted file mode 100644
index 2196e74fa..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-export-events.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-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
deleted file mode 100644
index 0bd3344a7..000000000
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/import-export-formfields/import-formfields.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-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](#import-as-fdf)
-- [XFDF](#import-as-xfdf)
-- [JSON](#import-as-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 round trips 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](../form-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/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/custom-data.md
new file mode 100644
index 000000000..3e3772fce
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/custom-data.md
@@ -0,0 +1,137 @@
+---
+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 PDF Form Fields in TypeScript PDF Viewer
+
+The Syncfusion **TypeScript PDF Viewer** allows you to attach **custom application-specific data** to form fields by using the customData property. This enables you to associate business identifiers, tags, validation hints, or workflow metadata with form fields.
+
+The custom data remains linked to the form field throughout the viewer session and can be accessed or updated whenever the field is queried or modified.
+
+This page explains how to:
+- [Add custom data when creating form fields](#add-custom-data-while-creating-pdf-form-fields)
+- [Define default custom data for fields created using the UI](#set-default-custom-data-for-pdf-form-fields-added-using-ui)
+- [Update or replace custom data for existing fields](#update-or-replace-pdf-form-field-custom-data)
+- [Read custom data from form fields](#read-custom-data-from-pdf-form-fields)
+- [Apply best practices when using custom data](#best-practices)
+
+**Key Points**
+- customData is a **free form object**; you control its structure.
+- Use only **serializable values** such as objects, arrays, strings, numbers, and booleans.
+- Custom data does not affect the field appearance or behavior unless consumed by your application logic.
+
+## Add Custom Data While Creating PDF Form Fields
+
+You can attach custom data at the time of field creation by passing a **customData** object in the settings parameter of **addFormField()**.
+
+```ts
+import { PdfViewer, FormDesigner, FormFields, Toolbar, Navigation, Magnification, TextSelection } from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(Toolbar, Navigation, Magnification, TextSelection, FormFields, FormDesigner);
+
+const viewer = 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 },
+ customData: meta
+ } as any);
+};
+```
+
+## Set Default Custom Data for PDF Form Fields Added Using UI
+
+When users add form fields using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), you can define default customData so that newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as:
+
+- [textFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#textfieldsettings)
+- [passwordFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#passwordfieldsettings)
+- [checkBoxFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#checkboxfieldsettings)
+- [radioButtonFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings)
+- [listBoxFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#listboxfieldsettings)
+- [dropDownFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#dropdownfieldsettings)
+- [signatureFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#signaturefieldsettings)
+- [initialFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#initialfieldsettings)
+
+```ts
+// ...viewer initialization as above...
+// Example for texbox defaults
+viewer.textFieldSettings = {
+ name: 'Textbox',
+ customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
+} as any;
+
+// Example for checkbox defaults
+viewer.checkBoxFieldSettings = {
+ name: 'Checkbox',
+ customData: { consentType: 'marketing', defaultChecked: false }
+} as any;
+```
+
+## Update or Replace PDF Form Field Custom Data
+
+You can modify the customData of an existing form field by using the [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) method. The field can be identified using either its object reference or field ID.
+
+```ts
+// Retrieve existing fields
+const fields = viewer.retrieveFormFields();
+const target = fields.find((f: any) => f.name === 'Email');
+
+if (target) {
+ // Merge with existing customData to avoid overwriting
+ const merged = Object.assign({}, target.customData || {}, { updatedAt: Date.now(), verified: true });
+ viewer.formDesignerModule.updateFormField(target, { customData: merged } as any);
+}
+```
+
+**Tip:**
+Merge new values with the existing customData object before calling [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data.
+
+## Read Custom Data from PDF Form Fields
+
+You can access the customData property from any form field at any point in your application flow, such as:
+- After the document is loaded
+- During save or submit operations
+- While performing validation or conditional routing
+
+```ts
+viewer.documentLoad = () => {
+ const fields = viewer.retrieveFormFields();
+ fields.forEach((f: any) => {
+ console.log('Field:', f.name, 'customData:', f.customData);
+ // Example: route based on customData
+ if (f.customData && f.customData.requiredRole === 'admin') {
+ // mark field for special handling
+ }
+ });
+};
+```
+
+## Best Practices
+
+- Treat customData as application metadata, not display data.
+- Use it to drive business rules, validation logic, and workflow decisions.
+- Keep the data minimal and structured for easy processing.
+- When cloning or copying form fields, ensure customData is copied or updated as required.
+
+[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](./overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-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/forms/form-constrain.md
similarity index 62%
rename from Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md
rename to Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-constrain.md
index 524edf9e8..583da2061 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-constrain.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-constrain.md
@@ -1,27 +1,40 @@
---
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.
+title: PDF form field flags in the TypeScript PDF Viewer | Syncfusion
+description: Learn how to apply isReadOnly, isRequired, and isPrint flags to PDF form fields in the Syncfusion TypeScript PDF Viewer.
platform: document-processing
control: PDF Viewer
documentation: ug
---
-# Form constraints in TypeScript PDF Viewer
+# PDF form field flags in TypeScript PDF Viewer
-The PDF Viewer components provides support to control user interaction and output behavior of form fields using the following constraints:
+The Syncfusion **TypeScript PDF Viewer** allows you to control how users interact with form fields and how those fields behave during validation and printing by applying **form field flags**. These flags define whether a form field can be modified, whether it is mandatory, and whether it appears in printed output.
-- [isReadOnly](#make-form-fields-readonly): Prevents users from editing a field.
-- [isRequired](#mark-fields-as-required): Marks a field as mandatory and participates in validation.
-- [isPrint](#control-field-print-behavior): Includes the field appearance when printing or exporting with print.
+This topic explains:
+- [Supported form field flags](#supported-pdf-form-field-flags)
+- [How each constraint affects field behavior](#key-actions)
+- [How to apply flags during field creation](#apply-pdf-form-field-flags-using-the-ui)
+- [How to update flags on existing fields](#update-flags-on-existing-fields-programmatically)
+- [How flags work with validation and printing](#control-print-behavior)
-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.
+## Supported PDF Form Field Flags
-
+The following flags are supported in the PDF Viewer:
-## Make Form Fields Read‑Only
+- [isReadOnly](#make-fields-read-only)
+ Prevents users from modifying the form field in the UI while still allowing updates through APIs.
-Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code. Use the following code-snippets to make form fields read-only.
+- [isRequired](#mark-fields-as-required)
+ Marks the form field as mandatory and includes it in form field validation.
+
+- [isPrint](#control-print-behavior)
+ Controls whether the form field appears when the document is printed.
+
+## Key Actions
+
+### Make Fields Read Only
+Use the **isReadOnly** property to prevent users from modifying a form field through the UI. This is useful for displaying pre filled or calculated values that should not be changed by the user.
```ts
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
@@ -58,9 +71,13 @@ pdfviewer.documentLoad = () => {
};
```
-## Mark Fields as Required
+### Mark Fields as Required
+Use the **isRequired** property to mark form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading.
+
+- Enable validation using [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation)
+- [Validate fields](./form-validation) using [validateFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields)
-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.
+If required fields are empty, validation can prevent further actions.
```ts
import {
@@ -105,13 +122,10 @@ pdfviewer.documentLoad = () => {
pdfviewer.appendTo('#pdfViewer'); // Ensure an element with id="pdfViewer" exists in your HTML
```
-## Control Field Print Behavior
-
-Use `isPrint` to control whether a field’s appearance is included when printing the PDF from the viewer.
+### Control Print Behavior
+Use the **isPrint** property to control whether a form field appears in the printed output of the PDF document.
```ts
-// npm install @syncfusion/ej2-pdfviewer
-
import {
PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields,
@@ -150,18 +164,33 @@ pdfviewer.documentLoad = () => {
pdfviewer.appendTo('#pdfViewer'); // Ensure exists
```
-N> Printing can be invoked programmatically using pdfviewer.print.print(); fields with isPrint: false will not appear in the print output.
+N> Printing can be triggered programmatically using **pdfviewer.print()**. Form fields with **isPrint: false** are excluded from the printed output.
+
+## Apply PDF Form Field Flags Using the UI
-## Set constraints when creating a field
+**Steps**
+1. Enable **Form Designer** mode in the PDF Viewer.
+2. Select an existing form field on the PDF page.
+3. The **Right click To open context menu - > Properties** popover is displayed.
+4. Configure the required constraint options.
+5. Click “Ok” and Close the properties popover to apply the changes.
-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.
+Changes are reflected immediately in the viewer.
+[Applying form field flags using the UI](../images/formfields-flag.gif)
+
+## Apply PDF Form Field Flags Programmatically
+
+You can apply or modify form field flags in the following ways.
+
+### Apply flags When Creating Fields
+Pass the flags properties in the settings object when creating form fields using **addFormField()**.
```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
- TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
+ BookmarkView, TextSelection, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
- TextSelection, Annotation, FormDesigner, FormFields);
+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',
@@ -192,12 +221,8 @@ pdfviewer.documentLoad = () => {
};
```
-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.
+### Update flags on Existing Fields programmatically
+Use the [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) method to modify constraint values on existing form fields.
```ts
import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
@@ -232,11 +257,8 @@ pdfviewer.documentLoad = () => {
};
```
-## 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.
+### Set Default Flags for New PDF Form Fields
+You can configure default flag values so that form fields added using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar) automatically inherit them. This helps ensure consistent behavior for all newly created fields.
```ts
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
@@ -265,21 +287,13 @@ pdfviewer.signatureFieldSettings = {
};
```
-## Behavior notes
-
-- Use `isReadOnly` API to only blocks user edits in the UI. You can still update the field programmatically.
-- Use `isRequired` API to participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details.
-- Use `isPrint` API 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
+## 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)
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form Validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-designer.md
similarity index 54%
rename from Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md
rename to Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-designer.md
index ba1685dca..3bb1cc1c5 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-designer.md
@@ -10,23 +10,23 @@ domainurl: ##DomainURL##
# Form Designer in TypeScript PDF Viewer
-When `Form Designer mode` is enabled in the Syncfusion `TypeScript PDF Viewer`, a default `Form Designer user interface (UI)` is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields.
+When **Form Designer mode** is enabled in the Syncfusion [TypeScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields.
Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer.
-**Key Features**
+## Key Features
**Add Form Fields**
You can add the following form fields to the PDF:
-- [Text box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-textbox)
-- [Password Field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-password)
-- [Check box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-checkbox)
-- [Radio button](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-radiobutton)
-- [Dropdown List](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-dropdown)
-- [List box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-listbox)
-- [Signature field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-signature-field)
-- [Initial field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-initial-field)
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
**Edit Form Fields**
You can move, resize, align, distribute, copy, paste, and undo or redo changes to form fields.
@@ -45,11 +45,14 @@ Designed form fields can be saved into the PDF document and printed with their a
## Enable Form Designer
-To enable form design features, inject the `FormDesigner` module into the PDF Viewer. After injecting the module, use the `enableFormDesigner` API to show or hide the Form Designer option in the main toolbar.
+To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar.
```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);
+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";
@@ -59,41 +62,40 @@ pdfviewer.appendTo('#PdfViewer');
## Form Designer UI
-When `Form Designer mode` is enabled in the Syncfusion `TypeScript PDF Viewer`, a default `Form Designer user interface (UI)` is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.
+When [Form Designer mode](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [TypeScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer.
-**Preview of the designed PDF form**
+{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
-
-
-For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in TypeScript PDF Viewer documentation](./Create-edit-Style-del-formFields/create-formfields).
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in TypeScript PDF Viewer documentation.
## Form Designer Toolbar
-The `Form Designer toolbar` appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
+The **Form Designer toolbar** appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as:
-- [Text box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-textbox)
-- [Password Field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-password)
-- [Check box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-checkbox)
-- [Radio button](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-radiobutton)
-- [Dropdown List](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-dropdown)
-- [List box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-listbox)
-- [Signature field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-signature-field)
-- [Initial field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-initial-field)
+- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
+- [Check box](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [Radio button](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [Dropdown List](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [List box](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
-**GIF – Adding a text box field using the Form Designer toolbar**
-
-Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
+Use the following Code-snippet to enable Form Designer by injecting **Form Designer mode** Module.
```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } 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);
+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";
@@ -101,11 +103,11 @@ pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfview
pdfviewer.appendTo('#PdfViewer');
```
-For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in TypeScript PDF Viewer documentation](./Create-edit-Style-del-formFields/create-formfields).
+For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in TypeScript PDF Viewer documentation](./manage-form-fields/create-form-fields).
## Show or Hide the Built-in Form Designer Toolbar
-You can control the visibility of the Form Designer toolbar using the `isFormDesignerToolbarVisible()` method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements.
+You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements.
**Use this method to:**
- Show the Form Designer toolbar when form design is required
@@ -119,8 +121,11 @@ You can control the visibility of the Form Designer toolbar using the `isFormDes
```
```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);
+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";
@@ -137,7 +142,7 @@ document.getElementById('hideDesignerBtn')!.onclick = () => {
## Customize the Built-in Form Designer Toolbar
-You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the `FormDesignerToolbarItems` property.
+You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesignertoolbaritem) property.
This customization helps you limit the available tools and simplify the user interface.
@@ -146,8 +151,11 @@ This customization helps you limit the available tools and simplify the user int
- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
```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);
+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";
@@ -187,15 +195,15 @@ You can remove a form field from the PDF document by selecting the field and usi
- Press the `Delete key` on the keyboard after selecting the form field.
The selected form field and its associated widget annotation are permanently removed from the page.
-For more information, see [Deleting Form Fields](./Create-edit-Style-del-formFields/remove-formfields)
+For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields)
## See Also
- [Filling PDF Forms](./form-filling)
-- [Create](./Create-edit-Style-del-formFields/create-formfields), [edit](./Create-edit-Style-del-formFields/edit-formfields), [style](./Create-edit-Style-del-formFields/style-formfields) and [remove](./Create-edit-Style-del-formFields/remove-formfields.) form fields
-- [Grouping form fields](./group-formfields)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/style-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Grouping form fields](./group-form-fields)
- [Form Constrains](./form-constrain)
- [Form Validation](./form-validation)
- [Custom Data](./custom-data)
-- [Import](./import-export-formfields/import-formfields)/[Export Form Data](./import-export-formfields/export-formfields)
+- [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields)
- [Form field events](./form-field-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-field-events.md
new file mode 100644
index 000000000..44b07fb34
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-field-events.md
@@ -0,0 +1,100 @@
+---
+layout: post
+title: Form Field Events in TypeScript PDF Viewer control | Syncfusion
+description: Learn here all about different form field in Syncfusion TypeScript PDF Viewer component of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Viewer Form Field Events in TypeScript
+
+The Syncfusion **TypeScript PDF Viewer** provides a comprehensive set of **form field events** that allow developers to track user interactions, respond to form changes, and implement custom business logic. These events can be used for scenarios such as [validation](./form-validation), **UI updates**, **logging**, and **workflow automation**.
+
+Form field events are triggered during actions such as adding, selecting, modifying, moving, resizing, and removing form fields.
+
+## Supported PDF Form Field Events
+
+The following table lists all supported form field events and their descriptions:
+
+| Form Field events | Description |
+|---|---|
+| [formFieldAdd](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. |
+| [formFieldClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs) | Fired when a form field is clicked in the viewer. |
+| [formFieldDoubleClick](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs) | Fired when a form field is double clicked. |
+| [formFieldFocusOut](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs) | Triggered when a form field loses focus after editing. |
+| [formFieldMouseLeave](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs) | Fired when the mouse pointer leaves a form field. |
+| [formFieldMouseOver](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs) | Fired when the mouse pointer moves over a form field. |
+| [formFieldMove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs) | Triggered when a form field is moved to a new position. |
+| [formFieldPropertiesChange](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) | Fired when any form field property changes, such as font, color, or constraint values. |
+| [formFieldRemove](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs) | Triggered when a form field is deleted from the document. |
+| [formFieldResize](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs) | Fired when a form field is resized. |
+| [formFieldSelect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs) | Fired when a form field is selected in the Form Designer. |
+| [formFieldUnselect](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs) | Fired when a previously selected form field is unselected. |
+| [validateFormFields](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs) | Fired when form field validation fails during print or download actions. |
+
+**Common Use Cases**
+
+Form field events can be used to:
+- Validate form data before printing or downloading
+- Track user interaction with form fields
+- Update UI elements dynamically
+- Log form changes for auditing
+- Trigger workflow actions based on field changes
+- Enforce business rules during form editing
+
+## Handle PDF Form Field Events
+
+You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur.
+
+```ts
+const pdfViewer = new PdfViewer({
+ // Basic examples for common form-field events
+ formFieldAdd: (args: any) => { console.log('formFieldAdd', args); },
+ formFieldRemove: (args: any) => { console.log('formFieldRemove', args); },
+ formFieldPropertiesChange: (args: any) => { console.log('formFieldPropertiesChange', args); },
+
+ // Additional events from the table
+ formFieldClick: (args: any) => { console.log('formFieldClick', args); },
+ formFieldDoubleClick: (args: any) => { console.log('formFieldDoubleClick', args); },
+ formFieldFocusOut: (args: any) => { console.log('formFieldFocusOut', args); },
+ formFieldMouseOver: (args: any) => { console.log('formFieldMouseOver', args); },
+ formFieldMouseLeave: (args: any) => { console.log('formFieldMouseLeave', args); },
+ formFieldMove: (args: any) => { console.log('formFieldMove', args); },
+ formFieldResize: (args: any) => { console.log('formFieldResize', args); },
+ formFieldSelect: (args: any) => { console.log('formFieldSelect', args); },
+ formFieldUnselect: (args: any) => { console.log('formFieldUnselect', args); },
+});
+
+//Validation Event
+pdfviewer.enableFormFieldsValidation = true;
+pdfviewer.validateFormFields = (args: any) => {
+ if (args && args.formField && args.formField.length > 0) {
+ // Example: prevent the pending action and notify the user
+ args.cancel = true;
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ // Optionally focus or scroll to the field
+ }
+};
+```
+
+**Event Behavior Notes**
+
+- Events triggered through the UI and programmatic APIs use the same event handlers.
+- Property related events are raised immediately when changes occur.
+- Validation events are triggered only during print or download operations.
+
+[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](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Field Flags](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-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/forms/form-fields-api.md
similarity index 99%
rename from Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/formfields-api.md
rename to Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-fields-api.md
index dfa7e79ce..767f48d1d 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/formfields-api.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-fields-api.md
@@ -413,9 +413,9 @@ pdfviewer.enableFormDesignerToolbar(true); // show
- [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)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Edit form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
- [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/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-filling.md
similarity index 70%
rename from Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md
rename to Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-filling.md
index 9ef60506d..4ba32c176 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-filling.md
@@ -14,7 +14,7 @@ The Syncfusion PDF Viewer supports three types of form-filling:
1. [Filling Form Fields Programmatically](#fill-pdf-forms-programmatically)
- You can fill or update PDF form fields programmatically using the updateFormFieldsValue APIs. This approach is useful when form data needs to be set dynamically based on application logic.
+ You can fill or update PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) APIs. This approach is useful when form data needs to be set dynamically based on application logic.
2. [Form Filling Through User Interface](#fill-pdf-forms-through-the-user-interface)
@@ -26,7 +26,7 @@ The Syncfusion PDF Viewer supports three types of form-filling:
## Fill PDF forms programmatically
-You can update the values of PDF form fields programmatically using the updateFormFieldsValue API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction.
+You can update the values of PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction.
The following example demonstrates how to update PDF form field values programmatically:
@@ -34,9 +34,12 @@ The following example demonstrates how to update PDF form field values programma
```
```ts
-import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormFields} from '@syncfusion/ej2-pdfviewer';
+import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,
+ThumbnailView, BookmarkView, TextSelection,
+Annotation, FormFields} from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormFields);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation,
+ThumbnailView, BookmarkView, TextSelection, Annotation, FormFields);
let pdfviewer: PdfViewer = new PdfViewer({
documentPath:
@@ -77,7 +80,7 @@ The PDF Viewer supports common form fields such as text boxes, check boxes, radi
## Fill PDF forms through Import Data
-The Syncfusion PDF Viewer allows you to import form field data into an existing PDF document using the `importFormFields` API. This feature enables you to pre-fill form fields using data from an external source without requiring manual user input.
+The Syncfusion PDF Viewer allows you to import form field data into an existing PDF document using the [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) API. This feature enables you to pre-fill form fields using data from an external source without requiring manual user input.
Imported form field data is automatically mapped to the corresponding form fields in the PDF document based on the field names. Once the data is imported, the populated values are displayed in the PDF Viewer and can be edited through the user interface if required.
@@ -86,9 +89,13 @@ Imported form field data is automatically mapped to the corresponding form field
```
```ts
-import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer';
+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);
+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',
@@ -103,25 +110,29 @@ document.getElementById('importJson')!.addEventListener('click', () => {
});
```
-For more details, see [Import Form Data](./import-export-formfields/import-formfields).
+For more details, see [Import Form Data](./import-export-form-fields/import-form-fields).
## How to get the filled data and store it to a backing system
You can export the filled form field data from the PDF Viewer and store it in a backing system such as a database or file storage. The exported data can later be imported to restore the form state.
-For more details, see [Export Form Data](./import-export-formfields/export-formfields).
+For more details, see [Export Form Data](./import-export-form-fields/export-form-fields).
## How to Validate Form Fields using `validateFormFields` Event
-The `validateFormFields` event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the `retrieveFormFields()` API to get all the form fields and check them one by one to see if any form fields values are empty.
+The [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields) event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the [retrieveFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields) API to get all the form fields and check them one by one to see if any form fields values are empty.
This validation applies to all form field types in the PDF Viewer. A textbox is empty if no text is entered, a list box or dropdown is empty if no item is selected, a signature or initial field is empty if the user has not signed, and radio buttons or checkboxes are empty if none are chosen.
-By enabling `enableFormFieldsValidation` and wiring the event, you can go through each field and stop the action if required fields are not filled.
+By enabling [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) and wiring the event, you can go through each field and stop the action if required fields are not filled.
```ts
-import {PdfViewer, Toolbar, Magnification, Navigation,LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation,FormDesigner, FormFields,TextFieldSettings} from '@syncfusion/ej2-pdfviewer';
+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);
+PdfViewer.Inject(Toolbar, Magnification, Navigation,LinkAnnotation,
+ThumbnailView, BookmarkView, TextSelection, Annotation,
+FormDesigner, FormFields);
let pdfviewer: PdfViewer = new PdfViewer({
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
@@ -166,10 +177,10 @@ pdfviewer.validateFormFields = (args: any) => {
- [Form Designer overview](./overview)
- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
-- [Create](./Create-edit-Style-del-formFields/create-formfields), [edit](./Create-edit-Style-del-formFields/edit-formfields), [style](./Create-edit-Style-del-formFields/style-formfields) and [remove](./Create-edit-Style-del-formFields/remove-formfields) form fields
-- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields)
-- [Group form fields](./group-formfields)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), [style](./manage-form-fields/customize-form-fields) and [remove](./manage-form-fields/remove-form-fields) form fields
+- [Edit form fields](./manage-form-fields/edit-form-fields)
+- [Group form fields](./group-form-fields)
- [Add custom data to form fields](./custom-data)
- [Form Constrain](./form-constrain)
- [Form validation](./form-validation)
-- [Form fields API](./formfields-api)
+- [Form fields API](./form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-validation.md
new file mode 100644
index 000000000..7434312ae
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-validation.md
@@ -0,0 +1,122 @@
+---
+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 PDF Form Fields in TypeScript PDF Viewer
+
+The Syncfusion **TypeScript PDF Viewer** provides built in support for **validating form fields** before users perform actions such as **printing**, **downloading**, or **submitting** a PDF document. Validation ensures that all required form fields are filled before allowing these actions to complete.
+This feature helps enforce data completeness and improves the reliability of collected form data.
+
+## How PDF Form Validation Works
+
+Form field validation follows this flow:
+- Enable validation using the [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property.
+- Handle the [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields) event to determine which required fields are not filled.
+- When validation is enabled and a user attempts to print, download, or submit the document:
+ - The [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields) event is triggered.
+ - Unfilled required fields are listed in args.nonFillableFields.
+ - You can cancel the action, show an error message, or move focus to an invalid field.
+
+## Enable PDF Form Field Validation
+
+To enable validation, set the [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields) property to true and wire the validateFormFields event.
+
+```ts
+import {
+ PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields,
+ TextFieldSettings
+} from '@syncfusion/ej2-pdfviewer';
+
+PdfViewer.Inject(
+ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
+ TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields
+);
+
+// Create and configure the viewer
+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'
+});
+// 1) Default for new Textbox fields
+pdfviewer.textFieldSettings = { isRequired: true };
+
+// 2) Validation wiring
+pdfviewer.enableFormFieldsValidation = true;
+pdfviewer.validateFormFields = (args: any) => {
+ // Triggers when required fields are empty on submit/validate
+ if (args && args.formField && args.formField.length > 0) {
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ }
+};
+
+// 3) Creation (add a Textbox form field once the document is loaded)
+pdfviewer.documentLoad = () => {
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required'
+ } as TextFieldSettings);
+};
+
+// Mount the viewer
+pdfviewer.appendTo('#pdfViewer'); // Ensure an element with id="pdfViewer" exists in your HTML
+```
+
+## Mark Fields as Required
+
+Only fields marked as **required** participate in validation. Use the **isRequired** property when creating or updating a form field.
+
+```ts
+// Creation of a required textbox (inside documentLoad) that blocks printing until it is filled.
+pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required'
+} as TextFieldSettings);
+```
+
+## Handle PDF Form Validation Results
+
+In the [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields) event, you can control the behavior when fields are missing. Typical actions include:
+- Cancel the print or download operation
+- Display an error message to the user
+- Set focus to the first unfilled required field
+
+```ts
+pdfviewer.enableFormFieldsValidation = true;
+pdfviewer.validateFormFields = (args: any) => {
+ if (args && args.formField && args.formField.length > 0) {
+ // Example: prevent the pending action and notify the user
+ args.cancel = true;
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ // Optionally focus or scroll to the field
+ }
+};
+```
+
+## Tips
+
+- Use isRequired to clearly mark mandatory fields.
+- Validation is triggered only during [print](../print), [download](../download), or **submit** actions.
+- For custom validation logic (such as validating an email format):
+ - Retrieve all form fields using [retrieveFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields).
+ - Apply custom checks before allowing the action to proceed.
+
+## See Also
+
+- [Form Designer overview](./overview)
+- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Group form fields](./group-form-fields)
+- [Add custom data to PDF form fields](./custom-data)
+- [Form flags](./form-constrain)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/group-form-fields.md
new file mode 100644
index 000000000..81af34c5c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/group-form-fields.md
@@ -0,0 +1,123 @@
+---
+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
+
+The Syncfusion **TypeScript PDF Viewer** allows you to **group multiple form fields into a single logical field** by assigning the **same Name** to them. Grouped form fields share their values and states automatically based on the field type. You can group form fields using the **Form Designer UI** or **programmatically using APIs**, making it easy to keep related fields synchronized across the PDF document.
+
+This page covers:
+- [How form field grouping works](#how-grouping-works)
+- [Field behavior based on type](#field-behavior-by-type)
+- [How to group form fields using the UI](#group-using-the-form-designer-ui)
+- [How to group form fields programmatically](#group-pdf-form-fields-programmatically)
+- [Related references and samples](#example-scenarios)
+
+
+## How grouping works
+
+In a PDF form, multiple PDF Form Fields can represent the same logical form field. When PDF Form Fields share the same **Name**, they are treated as a group and stay synchronized.
+
+## Field behavior by type
+
+- **Textbox and Password** — Text entered in one widget appears in all widgets with the same Name.
+- **CheckBox** — Checking one widget sets the checked state for all checkboxes with the same Name.
+- **RadioButton** — Widgets with the same Name form a radio group; only one option can be selected.
+- **ListBox and DropDown** — The selected value is shared across widgets with the same Name.
+- **Signature and Initial fields** — Applied signature/initial is mirrored across grouped widgets.
+
+N>Form field grouping is controlled by the **Name** property. The position of each widget is determined only by its bounds; grouping is not affected by location.
+
+## Group using the Form Designer UI
+
+**Steps**
+1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar).
+2. Add the form fields you want to group.
+3. Select a form field, open **Properties**, and set the **Name** value.
+4. Assign the same **Name** to all PDF Form Field that belong to the group.
+5. Apply the changes and verify that updates in one widget reflect in the others.
+
+
+
+
+
+## Group PDF Form Fields Programmatically
+
+You can also group form fields during creation by assigning the same **Name** through code.
+
+### Example Scenarios
+- Two textboxes named **EmployeeId** share the same value.
+- A radio button group named **Gender** allows single selection.
+- Two checkboxes named **Subscribe** share the 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);
+
+const 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',
+ bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
+ } as TextFieldSettings);
+
+ // Radio group: same name => exclusive selection
+ 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',
+ 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',
+ bounds: { X: 242, Y: 664, Width: 20, Height: 20 },
+ isChecked: false
+ } as CheckBoxFieldSettings);
+};
+```
+
+[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](./manage-form-fields/create-form-fields)
+- [Modify form fields](./manage-form-fields/modify-form-fields)
+- [Add custom data to form fields](./custom-data)
+- [Form Constrain](./form-constrain)
+- [Form validation](./form-validation)
+- [Form fields API](./form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/export-form-fields.md
new file mode 100644
index 000000000..731aea263
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/export-form-fields.md
@@ -0,0 +1,127 @@
+---
+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 PDF Form Data from TypeScript PDF Viewer
+
+The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats:
+
+- [FDF](#export-as-fdf)
+- [XFDF](#export-as-xfdf)
+- [JSON](#export-as-json)
+- [JavaScript Object](#export-as-object) (for custom persistence)
+
+## Available methods
+
+- [exportFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields)(destination?, format) — Exports data to a file in the specified format.
+- [exportFormFieldsAsObject](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject)(format) — Exports data as a JavaScript object for custom handling.
+- [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) — Import data back into the PDF.
+
+## How to export
+
+Use [exportFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type.
+
+### Export as FDF
+The following example exports 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', () => {
+ // Destination is optional; if omitted the browser will prompt.
+ viewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
+});
+```
+
+### Export as XFDF
+The following example exports form field data as XFDF.
+
+```html
+
+```
+
+```ts
+// ...same imports and viewer initialization as above...
+document.getElementById('exportXfdf')!.addEventListener('click', () => {
+ viewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
+});
+```
+
+### Export as JSON
+The following example exports form field data as JSON.
+
+```html
+
+```
+
+```ts
+// ...same imports and viewer initialization as above...
+document.getElementById('exportJson')!.addEventListener('click', () => {
+ viewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+});
+```
+
+### Export as Object
+
+Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to obtain form data as a JavaScript object for database or API integration.
+
+```html
+
+```
+
+```ts
+// ...same imports and viewer initialization as above...
+
+let exportedData: object | undefined;
+document.getElementById('exportObj')!.addEventListener('click', () => {
+ viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
+ exportedData = data; // Persist or send to server
+ console.log('Exported object:', exportedData);
+ });
+
+ // Alternatives:
+ // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...)
+ // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...)
+});
+```
+
+## Common Use Cases
+
+- Save user-entered data to your server without altering the original PDF.
+- Export as JSON for REST API integration.
+- Export as FDF/XFDF for compatibility with other PDF tools.
+- Export as Object to merge with app state or store securely.
+- Automate exports after [validation](../form-validation) using [validateFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#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-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-export-events.md
new file mode 100644
index 000000000..5d52522cd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-export-events.md
@@ -0,0 +1,83 @@
+---
+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
+---
+
+# PDF Form Import and Export Events in TypeScript
+
+Import/Export events let you **track and customize the entire life cycle** of form data being imported into or exported from the PDF Viewer.
+Use these events to:
+- Validate inputs before processing.
+- Show progress indicators.
+- Log audit trails.
+- Block operations based on business rules.
+
+Each event provides detailed context through typed event arguments such as [ImportStartEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importstarteventargs), [ImportSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importsuccesseventargs), [ImportFailureEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/importfailureeventargs), [ExportStartEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportstarteventargs), [ExportSuccessEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportsuccesseventargs), and [ExportFailureEventArgs](https://ej2.syncfusion.com/documentation/api/pdfviewer/exportfailureeventargs).
+
+## Import Events
+- [importStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importstart) — Fires when an import begins.
+- [importSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importsuccess) — Fires when form fields are successfully imported.
+- [importFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importfailed) — Fires if the import fails.
+
+**Example: Handle Import Events**
+
+```ts
+// ...viewer initialization...
+viewer.importStart = (args: any) => {
+ console.log('Import started', args);
+ // e.g. show spinner, validate inputs
+};
+viewer.importSuccess = (args: any) => {
+ console.log('Import success', args);
+ // e.g. hide spinner, show toast
+};
+viewer.importFailed = (args: any) => {
+ console.error('Import failed', args);
+ // e.g. show error dialog
+};
+```
+
+## Export Events
+- [exportStart](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportstart) — Fires when an export begins.
+- [exportSuccess](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportsuccess) — Fires when form fields are successfully exported.
+- [exportFailed](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportfailed) — Fires if the export fails.
+
+**Example: Handle Export Events**
+
+```ts
+// ...viewer initialization...
+viewer.exportStart = (args: any) => {
+ console.log('Export started', args);
+ // e.g. disable export UI
+};
+viewer.exportSuccess = (args: any) => {
+ console.log('Export success', args);
+ // e.g. enable UI, provide download link
+};
+viewer.exportFailed = (args: any) => {
+ console.error('Export failed', args);
+ // e.g. re-enable UI, notify user
+};
+```
+
+## Key Notes
+- importStart, importSuccess, importFailed cover the full import life cycle.
+- exportStart, exportSuccess, exportFailed cover the full export life cycle.
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Import form fields](./import-form-fields)
+- [Export form fields](./export-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-form-fields.md
new file mode 100644
index 000000000..d93cbb207
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-form-fields.md
@@ -0,0 +1,108 @@
+---
+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 PDF Form Data into TypeScript PDF Viewer
+
+The **PDF Viewer** lets you import values into interactive form fields in the currently loaded PDF. You can import data from these formats:
+
+- [FDF](#import-as-fdf)
+- [XFDF](#import-xfdf)
+- [JSON](#import-json)
+
+## API to use
+- [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format)
+
+N>If you’re using a **server-backed viewer**, set serviceUrl before importing.
+
+### Import 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 XFDF
+
+```html
+
+
+```
+
+```ts
+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 JSON
+
+```html
+
+
+```
+```ts
+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);
+});
+```
+
+## Common Use Cases
+
+- Pre-fill application forms from a database using JSON.
+- Migrate data from other PDF tools using FDF/XFDF.
+- Restore user progress saved locally or on the server.
+- Combine with validation to block print/download until required fields are completed.
+
+[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-form-fields)
+- [Import Export Events](./import-export-events)
+- [Create Edit form fields](../overview-create-forms)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/create-form-fields.md
new file mode 100644
index 000000000..c4c03cf54
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/create-form-fields.md
@@ -0,0 +1,260 @@
+---
+layout: post
+title: Create form fields in the TypeScript PDF Viewer | Syncfusion
+description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion TypeScript PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create PDF Form Fields in TypeScript
+
+You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or dynamically using APIs.
+
+## Create Form Fields Using the Form Designer UI
+Use this approach when you want to design forms manually without writing code.
+
+**Steps:**
+
+1. Enable [Form Designer](../form-designer) mode in the PDF Viewer.
+2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
+3. Click on the PDF page to place the form field.
+4. Move or resize the field as required.
+5. Configure field properties using the **Properties** panel.
+
+
+
+## Add Form Fields Programmatically (API)
+
+Use this approach when you want to generate form fields dynamically based on data or application logic.
+
+```ts
+//Add Text Box using addFormField Method
+pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'First Name',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 },
+ pageNumber: 1,
+ isRequired: true,
+ tooltip: 'Enter your first name'
+ } as TextFieldSettings);
+```
+
+**Use programmatic creation when:**
+
+- Building dynamic forms
+- Pre-filling forms from databases
+- Automating form creation workflows
+
+## PDF Form Field Types and How to Add Them
+Each field can be added via the **Form Designer** or **programmatically**.
+
+### Textbox
+
+**Add via Toolbar (UI)**
+- Open **Form Designer** → select **Textbox** → click on the page → configure in **Properties**.
+
+
+**Add Programmatically (API)**
+```ts
+//Add Text Box using addFormField Method
+pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'FirstName',
+ pageNumber: 1,
+ bounds: { X: 100, Y: 150, Width: 200, Height: 24 },
+ isRequired: true,
+ tooltip: 'Enter your first name',
+ maxLength: 40
+} as TextFieldSettings);
+```
+
+### Password
+
+**Add via Toolbar (UI)**
+- Select **Password** → place it → configure tooltip, required, max length.
+
+
+**Add Programmatically (API)**
+```ts
+//Add Password Field using addFormField Method
+pdfviewer.formDesignerModule.addFormField('Password', {
+ name: 'AccountPassword',
+ pageNumber: 1,
+ bounds: { X: 100, Y: 190, Width: 200, Height: 24 },
+ isRequired: true,
+ maxLength: 32,
+ tooltip: 'Enter a secure password',
+} as PasswordFieldSettings);
+```
+
+### CheckBox
+**Add via Toolbar (UI)**
+- Select **CheckBox** → click to place → duplicate for options → set isChecked, tooltip, appearance.
+
+
+**Add Programmatically (API)**
+```ts
+//Add CheckBox Field using addFormField Method
+ pdfviewer.formDesignerModule.addFormField('CheckBox', {
+ name: 'AgreeTerms',
+ pageNumber: 1,
+ bounds: { X: 100, Y: 230, Width: 18, Height: 18 },
+ isChecked: false,
+ tooltip: 'I agree to the terms',
+ } as CheckBoxFieldSettings);
+```
+
+### RadioButton
+**Add via Toolbar (UI)**
+- Select **RadioButton** → place buttons with the **same Name** to group → configure selection/colors.
+
+
+**Add Programmatically (API)**
+```ts
+//Add RadioButtons using addFormField Method
+ pdfviewer.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender',
+ value: 'Male',
+ pageNumber: 0,
+ bounds: { X: 100, Y: 270, Width: 16, Height: 16 }
+ } as RadioButtonFieldSettings);
+ pdfviewer.formDesignerModule.addFormField('RadioButton', {
+ name: 'Gender',
+ value: 'Female',
+ pageNumber: 0,
+ bounds: { X: 160, Y: 270, Width: 16, Height: 16 }
+ } as RadioButtonFieldSettings);
+```
+
+### ListBox
+**Add via Toolbar (UI)**
+- Select **ListBox** → place → add items in **Properties**.
+
+
+**Add Programmatically (API)**
+```ts
+//Add ListBox using addFormField Method
+ const option = [
+ { itemName: 'Item 1', itemValue: 'item1' },
+ { itemName: 'Item 2', itemValue: 'item2' },
+ { itemName: 'Item 3', itemValue: 'item3' }
+ ];
+ pdfviewer.formDesignerModule.addFormField('ListBox', {
+ name: 'States',
+ pageNumber: 1,
+ bounds: { X: 100, Y: 310, Width: 220, Height: 70 },
+ options: option,
+ } as ListBoxFieldSettings);
+```
+
+### DropDown
+**Add via Toolbar (UI)**
+- Select **DropDown** → place → add items → set default value.
+
+
+**Add Programmatically (API)**
+```ts
+//Add DropDown using addFormField Method
+ const options = [
+ { itemName: 'Item 1', itemValue: 'item1' },
+ { itemName: 'Item 2', itemValue: 'item2' },
+ { itemName: 'Item 3', itemValue: 'item3' },
+ ];
+
+ pdfviewer.formDesignerModule.addFormField('DropDown', {
+ name: 'Country',
+ options,
+ bounds: { X: 560, Y: 320, Width: 150, Height: 24 },
+ } as DropdownFieldSettings);
+```
+
+### Signature Field
+**Add via Toolbar (UI)**
+- Select **Signature Field** → place where signing is required → configure indicator text, thickness, tooltip, required.
+
+
+**Add Programmatically (API)**
+```ts
+//Add Signature Field using addFormField Method
+ pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'Sign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ tooltip: 'sign Here',
+ isRequired: true,
+ } as SignatureFieldSettings);
+```
+
+### Initial Field
+**Add via Toolbar (UI)**
+- Select **Initial Field** → place where initials are needed → configure text and required state.
+
+
+**Add Programmatically (API)**
+```ts
+//Add Initial Field using addFormField Method
+ pdfviewer.formDesignerModule.addFormField('InitialField', {
+ name: 'Sign',
+ bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
+ tooltip: 'sign Here',
+ isRequired: true,
+ } as InitialFieldSettings);
+```
+
+## Add Fields Dynamically with setFormFieldMode
+
+Use `setFormFieldMode()` to add fields on the fly based on user actions.
+
+### Edit Form Fields in TypeScript PDF Viewer
+You can edit form fields using the UI or API.
+
+#### Edit Using the UI
+- Right click a field → **Properties** to update settings. (Image here)
+- Drag to move; use handles to resize.
+- Use the toolbar to toggle field mode or add new fields.
+
+#### Edit Programmatically
+```html
+
+
+```
+```ts
+//Edit FormField on Button Click
+(document.getElementById('editTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
+ // 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,
+ fontStyle: FontStyle.None,
+ color: 'black',
+ backgroundColor: 'white',
+ borderColor: 'black',
+ thickness: 2,
+ alignment: 'Left',
+ maxLength: 50
+ } as TextFieldSettings);
+ }
+});
+//Add Form Fields using setFormFieldmode
+document.getElementById('addPasswordField').addEventListener('click', function () {
+ pdfviewer.formDesignerModule.setFormFieldMode("Password");
+ //In setFormFieldModule-You can pass the required field to be added like Textbox, Checkbox etc.,
+});
+```
+
+[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)
+- [Modify form fields](./modify-form-fields)
+- [Style form fields](./style-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form Fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/customize-form-fields.md
new file mode 100644
index 000000000..4c79d74bc
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/customize-form-fields.md
@@ -0,0 +1,87 @@
+---
+layout: post
+title: Customize form fields in the TypeScript PDF Viewer | Syncfusion
+description: Learn how to customize PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Customize the appearance of PDF Form Fields in TypeScript PDF Viewer
+
+**Styling** customizes appearance only (font, color, alignment, border, background, indicator text).
+
+## Customize Appearance of Form Fields Using the UI
+Use the **Properties** panel to adjust:
+- Font family/size, text color, alignment
+- Border color/thickness
+- Background color
+
+
+## Customize appearance Form Fields Programmatically
+Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to apply styles:
+```html
+
+```
+```ts
+// Update textbox styling on button click
+(document.getElementById('CustomizeTextboxStyle') as HTMLButtonElement)?.addEventListener('click', () => {
+ // Retrieve form fields collection
+ const fields = pdfviewer.retrieveFormFields();
+ // Find the textbox field by name
+ const tb = fields.find((f: any) => f.name === 'First Name') || fields[0];
+ if (tb) {
+ // Update textbox field styling
+ pdfviewer.formDesignerModule.updateFormField(tb, {
+ value: 'John',
+ fontFamily: 'Courier',
+ fontSize: 12,
+ fontStyle: FontStyle.None,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white',
+ alignment: 'Left',
+ thickness: 2
+ } as TextFieldSettings);
+ }
+});
+```
+
+## Set Default Styles for New Form Fields
+Define defaults so fields added from the toolbar inherit styles.
+```ts
+// Apply as defaults for Textbox added from toolbar
+pdfviewer.textFieldSettings = {
+ name: 'Textbox',
+ isReadOnly: false,
+ 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
+};
+```
+
+[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-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Remove form fields](./remove-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/modify-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/modify-form-fields.md
new file mode 100644
index 000000000..8cd985289
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/modify-form-fields.md
@@ -0,0 +1,296 @@
+---
+layout: post
+title: Modify form fields in the TypeScript PDF Viewer | Syncfusion
+description: Learn how to modify PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Modify PDF Form Field Properties
+You can modify form fields using the **UI** or **API**.
+
+## Modify PDF Form Field Properties using the UI
+- Right click a field → **Properties** to update settings.
+
+- Drag to move; use handles to resize.
+- Use the toolbar to toggle field mode or add new fields.
+
+## Modify PDF Form Field Properties programmatically
+Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to change behavior/data (including position and size):
+
+```html
+
+```
+```ts
+(document.getElementById('modifyTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
+ // 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,
+ fontStyle: FontStyle.None,
+ color: 'black',
+ backgroundColor: 'white',
+ borderColor: 'black',
+ thickness: 2,
+ alignment: 'Left',
+ maxLength: 50
+ } as TextFieldSettings);
+ }
+});
+```
+
+## Modify PDF Form Field Properties by Field type
+
+### Textbox
+- UI: Update value, font, size, colors, border thickness, alignment, max length, multiline.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for value, typography, alignment, colors, borders.
+
+```html
+
+```
+```ts
+(document.getElementById('modifyTextbox') as HTMLButtonElement)?.addEventListener('click', () => {
+ // 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,
+ fontStyle: FontStyle.None,
+ color: 'black',
+ backgroundColor: 'white',
+ borderColor: 'black',
+ thickness: 2,
+ alignment: 'Left',
+ maxLength: 50
+ } as TextFieldSettings);
+ }
+});
+```
+
+### Password
+
+- UI: Tooltip, required, max length, font, appearance.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, validation flags, typography, colors, alignment, borders.
+```html
+
+```
+```ts
+(document.getElementById('modifyPasswordBox') as HTMLButtonElement)?.addEventListener('click', () => {
+ // Retrieve form fields collection
+ const fields = pdfviewer.retrieveFormFields();
+ // Find the password field by name (Here field name is Password)
+ const field = fields.find((f: any) => f.name === 'Password');
+ if (field) {
+ // Update password field properties
+ pdfviewer.formDesignerModule.updateFormField(field, {
+ tooltip: 'Enter your password',
+ isReadOnly: false,
+ isRequired: true,
+ isPrint: true,
+ fontFamily: 'Courier',
+ fontSize: 10,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white',
+ alignment: 'Left',
+ maxLength: 20,
+ thickness: 1
+ } as PasswordFieldSettings);
+ }
+});
+```
+
+### CheckBox
+- UI: Toggle checked state.
+
+- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders.
+```html
+
+```
+```ts
+(document.getElementById('modifyCheckbox') as HTMLButtonElement)?.addEventListener('click', () => {
+ // Retrieve form fields collection
+ const fields = pdfviewer.retrieveFormFields();
+ // Find the checkbox field by name (Here field name is Subscribe)
+ const cb = fields.find((f: any) => f.name === 'Subscribe');
+ if (cb) {
+ // Update checkbox field properties and state
+ pdfviewer.formDesignerModule.updateFormField(cb, {
+ isChecked: true,
+ backgroundColor: 'white',
+ borderColor: 'black',
+ thickness: 2,
+ tooltip: 'Subscribe to newsletter'
+ } as CheckBoxFieldSettings);
+ }
+});
+```
+
+### RadioButton
+• UI: Set selected item in a group (same Name).
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance.
+```html
+
+```
+```ts
+(document.getElementById('editRadio') as HTMLButtonElement)?.addEventListener('click', () => {
+ // Retrieve form fields collection
+ const fields = pdfviewer.retrieveFormFields();
+ // Filter the radio button group by name (Here group name is Gender)
+ const genderRadios = fields.filter((f: any) => f.name === 'Gender');
+ if (genderRadios[1]) {
+ // Update radio button selection and appearance
+ pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false } as RadioButtonFieldSettings);
+ pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings);
+ }
+});
+```
+
+### ListBox
+• UI: Add/remove items, set selection, adjust fonts/colors.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders.
+```html
+
+```
+```ts
+(document.getElementById('editListBox') as HTMLButtonElement)?.addEventListener(
+ 'click',
+ () => {
+ // Retrieve form fields collection
+ const fields = pdfviewer.retrieveFormFields();
+ // Find the listbox field by name (Here field name is States)
+ const lb = fields.find((f: any) => f.name === 'States');
+ if (lb) {
+ // Update listbox options, selection, and appearance
+ let option = [
+ { itemName: 'Alabama', itemValue: 'AL' },
+ { itemName: 'Alaska', itemValue: 'AK' },
+ { itemName: 'Arizona', itemValue: 'AZ' },
+ ];
+ pdfviewer.formDesignerModule.updateFormField(lb, {
+ fontFamily: 'Courier',
+ fontSize: 5,
+ color: 'black',
+ backgroundColor: 'white',
+ tooltip: 'listbox',
+ options: option,
+ } as ListBoxFieldSettings);
+ }
+ });
+
+```
+
+### DropDown
+• UI: Add/remove items, default value, appearance.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders.
+```html
+
+```
+```ts
+(document.getElementById('editDropDown') as HTMLButtonElement)?.addEventListener('click', () => {
+ // Retrieve form fields collection
+ const fields = pdfviewer.retrieveFormFields();
+ // Find the dropdown field by name (Here field name is Country)
+ const dd = fields.find((f: any) => f.name === 'Country');
+ if (dd) {
+ // Update dropdown items, value, and appearance
+ pdfviewer.formDesignerModule.updateFormField(dd, {
+ options: [
+ { itemName: 'USA', itemValue: 'US' },
+ { itemName: 'Canada', itemValue: 'CA' },
+ { itemName: 'Mexico', itemValue: 'MX' }
+ ],
+ value: 'US',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white'
+ } as DropdownFieldSettings);
+ }
+});
+```
+
+### Signature Field
+• UI: Tooltip, thickness, indicator text, required/visibility.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
+```html
+
+```
+```ts
+(document.getElementById('editSignature') as HTMLButtonElement)?.addEventListener('click', () => {
+ // Retrieve form fields collection
+ const fields = pdfviewer.retrieveFormFields();
+ // Find the signature field by name (Here field name is Sign)
+ const sig = fields.find((f: any) => f.name === 'Sign');
+ if (sig) {
+ // Update signature field properties
+ pdfviewer.formDesignerModule.updateFormField(sig, {
+ tooltip: 'Please sign here',
+ thickness: 3,
+ isRequired: true,
+ isPrint: true,
+ backgroundColor: 'white',
+ borderColor: 'black'
+ } as SignatureFieldSettings);
+ }
+});
+```
+
+### Initial Field
+• UI: Tooltip, indicator text, thickness, required/visibility.
+
+• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders.
+```html
+
+```
+```ts
+(document.getElementById('editInitial') as HTMLButtonElement)?.addEventListener('click', () => {
+ // Retrieve form fields collection
+ const fields = pdfviewer.retrieveFormFields();
+ // Find the initial field by name (Here field name is Initial)
+ const init = fields.find((f: any) => f.name === 'Initial');
+ if (init) {
+ // Update initial field properties
+ pdfviewer.formDesignerModule.updateFormField(init, {
+ tooltip: 'Add your initials',
+ thickness: 2,
+ isRequired: true,
+ isPrint: true,
+ backgroundColor: 'white',
+ borderColor: 'black'
+ } as InitialFieldSettings);
+ }
+});
+```
+
+[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-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Style form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/move-resize-form-fields.md
new file mode 100644
index 000000000..9ab6c6974
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/move-resize-form-fields.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: Move and Resize form fields in the TypeScript PDF Viewer | Syncfusion
+description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Move and Resize PDF Form Fields
+- **Move**: Drag the form field to reposition it.
+- **Resize**: Use the resize handles to change width and height.
+
+
+
+## Move and Resize Fields Programmatically (API)
+You can set absolute bounds or move fields by a delta.
+
+**Set absolute bounds**
+```html
+
+```
+```ts
+// Move & resize by setting absolute bounds
+(document.getElementById('resizeMove') as HTMLButtonElement)?.addEventListener(
+ 'click',
+ () => {
+ // 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 bounds to move or rezie formfields
+ pdfviewer.formDesignerModule.updateFormField(field, {
+ bounds: { X: 140, Y: 210, Width: 220, Height: 24 }, // new absolute position & size
+ } as TextFieldSettings);
+ }
+ }
+);
+```
+
+## See also
+
+- [Form Designer overview](../overview)
+- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
+- [Create form fields](./create-form-fields)
+- [Remove form Fields](./remove-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/remove-form-fields.md
new file mode 100644
index 000000000..b91ddb785
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/remove-form-fields.md
@@ -0,0 +1,56 @@
+---
+layout: post
+title: Remove form fields in the TypeScript PDF Viewer component | Syncfusion
+description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion TypeScript PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Remove PDF Form Fields from a PDF
+
+## Remove Form Fields Using the UI
+**Steps:**
+1. Enable **Form Designer mode**.
+2. Select the form field.
+3. Click **Delete** in the toolbar or press the **Delete** key.
+
+
+## Remove Form Fields Programmatically
+Use **deleteFormField()** with a field reference or ID.
+
+```html
+
+
+```
+```ts
+// Delete all added form fields on button click
+(document.getElementById('deleteAllFields') as HTMLButtonElement).addEventListener('click', () => {
+ const fields = [...pdfviewer.formFieldCollections]; // clone to avoid mutation issues
+ fields.forEach(field => pdfviewer.formDesignerModule.deleteFormField(field));
+});
+
+// Delete by ID on button click (example uses the first field's ID)
+(document.getElementById('deleteById') as HTMLButtonElement).addEventListener('click', () => {
+ if (pdfviewer.formFieldCollections.length > 0) {
+ const id = pdfviewer.formFieldCollections[0].id;
+ if (id) {
+ pdfviewer.formDesignerModule.deleteFormField(id);
+ }
+ }
+});
+```
+
+[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-form-fields)
+- [Modify form fields](./modify-form-fields)
+- [Customize form fields](./customize-form-fields)
+- [Group form fields](../group-form-fields)
+- [Form validation](../form-validation)
+- [Add custom data to form fields](../custom-data)
+- [Form fields API](../form-fields-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/overview-create-forms.md
new file mode 100644
index 000000000..8a3433b90
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/overview-create-forms.md
@@ -0,0 +1,20 @@
+---
+layout: post
+title: Overview of Create form fields in TypeScript PDF Viewer | Syncfusion
+description: Learn how to create edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion TypeScript PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Create, Edit, Style, and Remove Form Fields in TypeScript PDF Viewer
+
+The [TypeScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview) allows you to create interactive PDF form fields, update their behavior and appearance, and remove them when they are no longer needed.
+All form field operations can be performed using either the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or [TypeScript APIs.](https://ej2.syncfusion.com/documentation/api/pdfviewer/overview)
+
+This section explains how to:
+
+- [Create PDF form fields](./manage-form-fields/create-form-fields)
+- [Edit form field behavior and values](./manage-form-fields/modify-form-fields)
+- [Style the appearance of form fields](./manage-form-fields/customize-form-fields)
+- [Remove form fields from a PDF document](./manage-form-fields/remove-form-fields)
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/overview.md
similarity index 63%
rename from Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md
rename to Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/overview.md
index bdae620e7..67a8f132d 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/overview.md
@@ -22,8 +22,11 @@ See the [Filling PDF Forms](./form-filling) page for full details.
Use the following code-snippet to enable form-filling by injecting `FormFields` Module.
```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields} from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields);
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection,
+ TextSearch, FormFields} from '@syncfusion/ej2-pdfviewer';
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields);
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";
@@ -45,8 +48,11 @@ See the [Form Designer](./form-designer) page for full details.
Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module.
```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);
+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";
@@ -56,19 +62,19 @@ pdfviewer.appendTo('#PdfViewer');
Create and customize interactive fields directly on the PDF page.
-- [Create](./Create-edit-Style-del-formFields/create-formfields), [edit](./Create-edit-Style-del-formFields/edit-formfields), or [remove](./Create-edit-Style-del-formFields/remove-formfields) forms
-- [Add a Signature Field](./Create-edit-Style-del-formFields/create-formfields#add-signature-field)
-- [Edit Form Field](./Create-edit-Style-del-formFields/edit-formfields)
-- [Remove Form Field](./Create-edit-Style-del-formFields/remove-formfields)
+- [Create](./manage-form-fields/create-form-fields), [edit](./manage-form-fields/modify-form-fields), or [remove](./manage-form-fields/remove-form-fields) forms
+- [Add a Signature Field](./manage-form-fields/create-form-fields#add-signature-field)
+- [Edit Form Field](./manage-form-fields/modify-form-fields)
+- [Remove Form Field](./manage-form-fields/remove-form-fields)
- [Form Field Constraints](./form-constrain)
## Supported form field types
-- [Textbox](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-textbox)
-- [Password](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-password)
-- [CheckBox](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-checkbox)
-- [RadioButton](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-radiobutton)
-- [ListBox](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-listbox)
-- [DropDown](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-dropdown)
-- [Signature field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-signature-field)
-- [Initial field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-initial-field)
\ No newline at end of file
+- [Textbox](../forms/manage-form-fields/create-form-fields#add-textbox)
+- [Password](../forms/manage-form-fields/create-form-fields#add-password)
+- [CheckBox](../forms/manage-form-fields/create-form-fields#add-checkbox)
+- [RadioButton](../forms/manage-form-fields/create-form-fields#add-radiobutton)
+- [ListBox](../forms/manage-form-fields/create-form-fields#add-listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#add-dropdown)
+- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
+- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
index 10330a098..a44e4bf5d 100644
--- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
+++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/custom-fonts-ts.md
@@ -8,23 +8,39 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Add custom fonts in TypeScript PDF Viewer
+# Add Custom Fonts to PDF Forms in TypeScript PDF Viewer
-The TypeScript PDF Viewer supports loading, editing, and saving custom fonts in form fields such as text boxes, list boxes, and drop-downs by using the customFonts property. Add the required TTF files to the resource URL directory used by the viewer so they can be loaded at runtime and used in forms.
-
-## Integrating Custom Font Collections into Form Fields in PDF Viewer
-
-To ensure proper rendering and saving of form fields that use custom fonts, especially when the fonts are not installed on the system, place the TTF files in the resource URL path referenced by the viewer and specify their names through the customFonts property (string array). These fonts will then be available for loading, editing, and saving form fields in the PDF.
+The Syncfusion **TypeScript PDF Viewer** supports loading, editing, and saving **custom fonts** in form fields such as [TextBox](../forms/manage-form-fields/create-form-fields#textbox), [ListBox](../forms/manage-form-fields/create-form-fields#listbox), and [DropDown](../forms/manage-form-fields/create-form-fields#dropdown) fields using the customFonts property. This ensures consistent text rendering even when the required fonts are not installed on the user’s system.
+Custom fonts are embedded and preserved when form fields are modified or saved, making the PDF display correctly across environments.
-To use custom fonts in the Syncfusion PDF Viewer, add the custom TTF files to the resource URL directory and configure the viewer to load them. Specify font file names using the `customFonts` property as an array of names.
+## When dynamic fonts are used
+Dynamic fonts are currently used in the following scenarios:
+- **Text annotations** — When users enter text annotations that use non standard fonts, the viewer dynamically loads the required fonts to ensure correct character rendering.
+- **PDF forms** — When users fill form fields that rely on fonts not included by default, dynamic font loading ensures the entered text is rendered correctly.
-Steps to add custom fonts
+## How Custom Fonts Work
+The custom font workflow in the PDF Viewer is as follows:
+- Place the required **TrueType Font (TTF)** files in the resource directory used by the viewer.
+- Specify the font names using the customFonts property.
+- The specified fonts become available for:
+ - Rendering form field content
+ - Editing text in form fields
+ - Saving and downloading the PDF with embedded fonts
-**Step 1:** Add custom TTF font files to the resource URL path referenced in the application. For example, place the TTF files in the [ej2-pdfviewer-lib](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started#add-the-pdf-viewer-component) folder that serves as the resource URL path. Make sure this resource URL points to a local path in your application. You may:
-- Place fonts directly under `ej2-pdfviewer-lib` or under `ej2-pdfviewer-lib/fallback fonts`. Reference them by relative path in `customFonts` (e.g., `"calibri.ttf"`, `"fallback fonts/calibri.ttf"`).
-- Or use a direct absolute URL to the font file if it’s hosted and CORS-accessible.
+## Steps to Add Custom Fonts
-**Step 2:** Use the following code to configure custom fonts in the PDF Viewer.
+### Add TTF Font Files
+1. Place the TTF font files in the resource path used by the PDF Viewer (for example, the ej2-pdfviewer-lib folder).
+2. Fonts can be referenced in either of the following ways:
+ - **Relative path**
+ Example:
+ calibri.ttf
+ fallback-fonts/calibri.ttf
+ - **Absolute URL**
+ Fonts can be hosted on a server and referenced using a fully qualified URL. Ensure that the hosting server has **CORS** enabled.
+
+### Configure Custom Fonts in the PDF Viewer
+Specify the required font names in the customFonts property.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -43,6 +59,18 @@ pdfviewer.appendTo('#PdfViewer');
{% endhighlight %}
{% endtabs %}
-These steps integrate custom fonts into PDF documents displayed in the PDF Viewer.
+N>Ensure that the font file names match the specified font names.
+
+## Supported Form Fields
+Custom fonts can be applied to the following form field types:
+- [TextBox](../forms/manage-form-fields/create-form-fields#textbox)
+- [ListBox](../forms/manage-form-fields/create-form-fields#listbox)
+- [DropDown](../forms/manage-form-fields/create-form-fields#dropdown)
+
+## Notes and Limitations
+- If text rendered using a custom font exceeds the form field’s bounds, the downloaded PDF may render incorrectly in some third party PDF viewers.
+- The same content displays correctly in the **Syncfusion PDF Viewer**.
-> Note: If a form field (TextBox, ListBox, DropDown) using a custom font has text larger than the field’s bounds, the downloaded PDF may render incorrectly in browsers or third‑party viewers. It displays correctly in the Syncfusion PDF Viewer. To avoid this, use a font size that fits within the field or enlarge the field before saving/downloading.
\ No newline at end of file
+## To avoid rendering issues:
+- Use an appropriate font size that fits within the form field.
+- Increase the size of the form field before saving or downloading the PDF.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formfields-flag.gif b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formfields-flag.gif
new file mode 100644
index 000000000..c823aca95
Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es6/images/formfields-flag.gif differ