1004880: Updated Forms Pending Sections

Author: SF4524LogeshKumar

Document-Processing-toc.html

@@ -1596,7 +1596,7 @@
 									</li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/custom-data">Add custom data in form fields</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/group-formfields">Grouping form fields</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-constrain">Form constrains</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-constrain">Form Field Flags</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-validation">Form Validation</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/custom-fonts-ts">Custom fonts</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-field-events">Form Field events</a></li>

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

@@ -7,100 +7,131 @@ control: PDF Viewer
 documentation: ug
 ---
 
-# Add custom data to form fields
+# Add Custom Data to PDF Form Fields in TypeScript PDF Viewer
 
-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.
+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.
 
-N> customData is a free-form object. You control both its shape and how it is used in your application.
+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.
 
-## Add custom data when creating fields (programmatically)
+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)
 
-Pass a customData object in the second parameter of addFormField. You can include any serializable values.
+**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, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
-         TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
+import { PdfViewer, FormDesigner, FormFields, Toolbar, Navigation, Magnification, TextSelection } from '@syncfusion/ej2-pdfviewer';
 
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields);
+PdfViewer.Inject(Toolbar, Navigation, Magnification, TextSelection, FormFields, FormDesigner);
 
-const viewer: PdfViewer = new PdfViewer({
+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' };
+  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
+    bounds: { X: 146, Y: 229, Width: 200, Height: 24 },
     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 PDF Form Fields Added Using UI
 
-## Set default custom data for UI-created fields
+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:
 
-When users add fields via the Form Designer toolbar, you can predefine default customData using the per-field settings objects.
+- [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
-// Example: default custom data for all new Textbox fields added from the toolbar
+// ...viewer initialization as above...
+// Example for texbox defaults
 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.
+// Example for checkbox defaults
+viewer.checkBoxFieldSettings = {
+  name: 'Checkbox',
+  customData: { consentType: 'marketing', defaultChecked: false }
+} as any;
+```
 
-## Update or replace custom data on existing fields
+## Update or Replace PDF Form Field Custom Data
 
-Use updateFormField to set or modify the customData of any existing field (retrieved by object or ID).
+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[0];
-viewer.formDesignerModule.updateFormField(target, {
-  customData: { group: 'profile', flags: ['pii', 'masked'], updatedAt: Date.now() }
-} as any);
+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: You can merge new values with existing ones in your app code before calling updateFormField.
+**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
+## Read Custom Data from PDF Form Fields
 
-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.)
+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);
+    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
+    }
   });
 };
 ```
 
-## Notes and best practices
+## 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.
+- 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
+## 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)
+- [Create form fields](./overview-create-forms)
+- [Group form fields](../group-formfields)
+- [Form flags](./form-constrain)
 - [Form validation](./form-validation)
 - [Form fields API](./formfields-api)