1044525- Revamp UG Documentation for forms, interaction and localization samples in Typescript Platform

Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/default-language.md

@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Localization in the TypeScript PDF Viewer 
+# Localization in the JavaScript ES6 PDF Viewer
 
 The PDF Viewer supports localization of UI text, tooltips, and messages using culture-specific string collections so the interface matches users' language and regional settings.
 
@@ -30,7 +30,7 @@ PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnific
 const pdfviewer: PdfViewer = new PdfViewer({
     documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
     resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
-    locale: 'en-US', //Using locale update culture
+    locale: 'en-US', // Using locale to update culture
 });
 pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
@@ -42,8 +42,8 @@ PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnific
 
 const pdfviewer: PdfViewer = new PdfViewer({
     documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-    serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
-    locale: 'en-US' //Using locale update culture
+    serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/',
+    locale: 'en-US' // Using locale to update culture
 });
 pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
@@ -108,7 +108,7 @@ The following table lists the default text values used by the PDF Viewer in the
 |Highlight context|Highlight|
 |Underline context|Underline|
 |Strikethrough context|Strike through|
-|Server error|Web-service is not listening. PDF Viewer depends on web-service for all it's features. Please start the web service to continue.|
+|Server error|Web-service is not listening. PDF Viewer depends on web-service for all its features. Please start the web service to continue.|
 |Open text|Open|
 |First text|First Page|
 |Previous text|Previous Page|

Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/new-language.md

@@ -8,11 +8,11 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Set a new language in the TypeScript PDF Viewer
+# Set a new language in the JavaScript ES6 PDF Viewer
 
 Localize the PDF Viewer UI by:
 - Registering culture-specific strings with `L10n.load` at the application level
-- Setting the [`locale`]((https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#locale)) property on the `PdfViewer` instance to the desired culture
+- Setting the [`locale`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#locale) property on the `PdfViewer` instance to the desired culture
 
 ![German Locale](../images/locale-de.gif)
 

Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/rtl-language-support.md

@@ -1,14 +1,14 @@
 ---
 layout: post
 title: RTL Localization in JavaScript ES6 PDF Viewer | Syncfusion
-description: Learn about the Localization and Right to Left Lanugage Support in Syncfusion JavaScript ES6 PDF Viewer component.
+description: Learn about the Localization and Right to Left Language Support in Syncfusion JavaScript ES6 PDF Viewer component.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# RTL language support in TypeScript PDF Viewer
+# RTL language support in the JavaScript ES6 PDF Viewer
 
 Use RTL support to render the viewer interface for right-to-left languages.
 - Enable `enableRtl` to apply right-to-left layout.
@@ -31,10 +31,10 @@ PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnific
 const pdfviewer: PdfViewer = new PdfViewer({
     documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
     resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
-    locale: 'ar-AE', //Using locale updates culture
-    enableRtl: true, //To enbale Right to Left rendering.
+    locale: 'ar-AE', // Using locale to update culture
+    enableRtl: true, // To enable Right to Left rendering.
 });
-//Load culutre files here
+// Load culture files here
     L10n.load({
                 'ar-AE': {
                     'PdfViewer': {

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/custom-data.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Add custom data to PDF form fields in TypeScript PDF Viewer
 
-The JavaScript PDF Viewer allows attaching application-specific data to form fields using the `customData` property. This enables associating business identifiers, tags, validation hints, or workflow metadata with form fields.
+The Syncfusion TypeScript PDF Viewer allows attaching application-specific data to form fields using the `customData` property. This enables associating business identifiers, tags, validation hints, or workflow metadata with form fields.
 
 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.
 

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-constrain.md

@@ -71,7 +71,7 @@ If required fields are empty, validation can prevent further actions.
 // 1) Default for new Textbox fields
 pdfviewer.textFieldSettings = { isRequired: true };
 
-// 2) Validation wiring
+// 2) Wire up the validateFormFields event (fires when required fields are empty on submit/validate)
 pdfviewer.enableFormFieldsValidation = true;
 pdfviewer.validateFormFields = (args: any) => {
   // Triggers when required fields are empty on submit/validate

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-designer.md

@@ -80,7 +80,7 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Form designer UI
 
-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.
+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.
 
 ![FormDesigner](../images/FormDesigner.gif)
 
@@ -197,7 +197,7 @@ Move, resize, and edit an existing form field directly in the PDF Viewer using t
 
 - Resize a field using the handles displayed on the field boundary.
 
-![Moving and resizing a form field](..//images/move-resize-forms.gif)
+![Moving and resizing a form field](../images/move-resize-forms.gif)
 
 - Edit a field by selecting it to open the Form Field Properties popover. The popover allows modification of form field and widget annotation properties. Changes are reflected immediately in the viewer and saved when the properties popover is closed.
 For more information, see Editing Form Fields

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-field-events.md

@@ -20,19 +20,19 @@ The following table lists the 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. |
+| [formFieldAdd](https://ej2.syncfusion.com/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/documentation/api/pdfviewer/formFieldClickArgs) | Fired when a form field is clicked in the viewer. |
+| [formFieldDoubleClick](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldDoubleClickArgs) | Fired when a form field is double clicked. |
+| [formFieldFocusOut](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldFocusOutEventArgs) | Triggered when a form field loses focus after editing. |
+| [formFieldMouseLeave](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldMouseLeaveArgs) | Fired when the mouse pointer leaves a form field. |
+| [formFieldMouseOver](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldMouseoverArgs) | Fired when the mouse pointer moves over a form field. |
+| [formFieldMove](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldMoveArgs) | Triggered when a form field is moved to a new position. |
+| [formFieldPropertiesChange](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldPropertiesChangeArgs) | Fired when any form field property changes, such as font, color, or constraint values. |
+| [formFieldRemove](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldRemoveArgs) | Triggered when a form field is deleted from the document. |
+| [formFieldResize](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldResizeArgs) | Fired when a form field is resized. |
+| [formFieldSelect](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldSelectArgs) | Fired when a form field is selected in the Form Designer. |
+| [formFieldUnselect](https://ej2.syncfusion.com/documentation/api/pdfviewer/formFieldUnselectArgs) | Fired when a previously selected form field is unselected. |
+| [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/validateFormFieldsArgs) | Fired when form field validation fails during print or download actions. |
 
 **Common use cases**
 

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-fields-api.md

@@ -39,15 +39,15 @@ Updates the value of one or more form fields programmatically.
 ```
 {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-const btn = document.getElementById('updateFormFields');
+const btn = document.getElementById('updateFormFieldsValue');
 if (btn) {
   btn.onclick = () => {
    // Retrieve form fields collection
   const fields = pdfviewer.retrieveFormFields();
-  // Find the textbox field by name (Here field name is FIrst Name)
+  // Find the textbox field by name (Here field name is First Name)
   const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly
   if (field) {
-    // give value to be updated in teh for
+    // set the value to be updated in the field
     field.value='John Doe';
     field.tooltip='First'
     pdfviewer.updateFormFieldsValue(field);
@@ -71,7 +71,7 @@ if (btn) {
   btn.onclick = () => {
    // Retrieve form fields collection
   const fields = pdfviewer.retrieveFormFields();
-  // Find the textbox field by name (Here field name is FIrst Name)
+  // 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
@@ -218,7 +218,7 @@ Clears values of specified or all fields without removing the fields themselves.
 ```
 {% tabs %}
 {% highlight ts tabtitle="index.ts" %}
-const btn = document.getElementById('clearFormFields');
+const btn = document.getElementById('clearformfield');
 if (btn) {
   btn.onclick = () => {
   let field=pdfviewer.retrieveFormFields();

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-filling.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Form filling in TypeScript PDF Viewer Control | Syncfusion
-description: Learn to view, fill, export, and import PDF form fields in Syncfusion TS PDF Viewer, including disabling interaction and handling signatures.
+description: Learn to fill, import, and export PDF form fields in the Syncfusion TS PDF Viewer, including handling the validateFormFields event.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
@@ -36,13 +36,13 @@ The following example demonstrates how to update PDF form field values programma
 ```ts
 // Wire up the button click
 document.getElementById('updateBtn')!.onclick = () => {
-  //Retriveformfields
+  // Retrieve form fields
   const fields =
     pdfviewer.retrieveFormFields?.() || pdfviewer.formFieldCollection || [];
-  //Get form fields by name
+  // Get form fields by name
   const field = fields.find((f) => f?.name === 'name') || fields[0];
 
- //Update the Values
+  // Update the values
   if (field) {
     field.value = 'John Doe';
     field.tooltip = 'First';
@@ -133,7 +133,6 @@ pdfviewer.validateFormFields = (args: any) => {
 - [Form Designer overview](./overview)
 - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
 - [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)

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/form-validation.md

@@ -24,7 +24,7 @@ When validation is enabled and a user attempts to print, download, or submit the
 
 ## 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.
+To enable validation, set the [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) property to true and wire the validateFormFields event.
 
 ```ts
 // 1) Default for new Textbox fields

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-export-events.md

@@ -27,15 +27,15 @@ Each event provides detailed context through typed event arguments such as [Impo
 
 ```ts
 // ...viewer initialization...
-viewer.importStart = (args: any) => {
+viewer.importStart = (args: ImportStartEventArgs) => {
   console.log('Import started', args);
   // e.g. show spinner, validate inputs
 };
-viewer.importSuccess = (args: any) => {
+viewer.importSuccess = (args: ImportSuccessEventArgs) => {
   console.log('Import success', args);
   // e.g. hide spinner, show toast
 };
-viewer.importFailed = (args: any) => {
+viewer.importFailed = (args: ImportFailureEventArgs) => {
   console.error('Import failed', args);
   // e.g. show error dialog
 };
@@ -50,15 +50,15 @@ viewer.importFailed = (args: any) => {
 
 ```ts
 // ...viewer initialization...
-viewer.exportStart = (args: any) => {
+viewer.exportStart = (args: ExportStartEventArgs) => {
   console.log('Export started', args);
   // e.g. disable export UI
 };
-viewer.exportSuccess = (args: any) => {
+viewer.exportSuccess = (args: ExportSuccessEventArgs) => {
   console.log('Export success', args);
   // e.g. enable UI, provide download link
 };
-viewer.exportFailed = (args: any) => {
+viewer.exportFailed = (args: ExportFailureEventArgs) => {
   console.error('Export failed', args);
   // e.g. re-enable UI, notify user
 };
@@ -78,5 +78,4 @@ viewer.exportFailed = (args: any) => {
 - [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)

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/import-export-form-fields/import-form-fields.md

@@ -11,7 +11,7 @@ documentation: ug
 
 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)
+- [FDF](#import-fdf)
 - [XFDF](#import-xfdf)
 - [JSON](#import-json)
 

Document-Processing/PDF/PDF-Viewer/javascript-es6/forms/manage-form-fields/create-form-fields.md

@@ -114,13 +114,13 @@ pdfviewer.formDesignerModule.addFormField('Password', {
   pdfviewer.formDesignerModule.addFormField('RadioButton', {
     name: 'Gender',
      value: 'Male',
-     pageNumber: 0,
+     pageNumber: 1,
      bounds: { X: 100, Y: 270, Width: 16, Height: 16 }
   } as RadioButtonFieldSettings);
     pdfviewer.formDesignerModule.addFormField('RadioButton', {
     name: 'Gender',
      value: 'Female',
-     pageNumber: 0,
+     pageNumber: 1,
      bounds: { X: 160, Y: 270, Width: 16, Height: 16 }
   } as RadioButtonFieldSettings);
 ```
@@ -163,6 +163,7 @@ pdfviewer.formDesignerModule.addFormField('Password', {
   pdfviewer.formDesignerModule.addFormField('DropDown', {
     name: 'Country',
     options,
+    pageNumber: 1,
     bounds: { X: 560, Y: 320, Width: 150, Height: 24 },
   } as DropdownFieldSettings);
 ```
@@ -177,6 +178,7 @@ pdfviewer.formDesignerModule.addFormField('Password', {
 //Add Signature Field using addFormField Method
   pdfviewer.formDesignerModule.addFormField('SignatureField', {
     name: 'Sign',
+    pageNumber: 1,
     bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
     tooltip: 'sign Here',
     isRequired: true,
@@ -192,7 +194,8 @@ pdfviewer.formDesignerModule.addFormField('Password', {
 ```ts
 //Add Initial Field using addFormField Method
   pdfviewer.formDesignerModule.addFormField('InitialField', {
-    name: 'Sign',
+    name: 'Initials',
+    pageNumber: 1,
     bounds: { X: 57, Y: 923, Width: 200, Height: 43 },
     tooltip: 'sign Here',
     isRequired: true,
@@ -242,7 +245,7 @@ Form Fields can be edited using the UI or API.
 //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.,
+    //In setFormFieldMode-You can pass the required field to be added like Textbox, Checkbox etc.,
 });
 ```
 
@@ -253,7 +256,7 @@ document.getElementById('addPasswordField').addEventListener('click', function (
 - [Form Designer overview](../overview)
 - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
 - [Modify form fields](./modify-form-fields)
-- [Style form fields](./style-form-fields)
+- [Style form fields](./customize-form-fields)
 - [Remove form fields](./remove-form-fields)
 - [Group form fields](../group-form-fields)
 - [Form validation](../form-validation)