1023434: Revamped the form fields module

Document-Processing-toc.html

@@ -494,7 +494,12 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-validation">Form Validation</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/how-to/custom-fonts">Custom fonts</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-field-events">Form Field events</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-handling-best-practices">PDF Form Handling Best Practices</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-fields-api">APIs</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/flatten-form-fields">Flatten form fields</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/read-form-field-values">Read form fields</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/submit-form-data">Submit form data</a></li>
+
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pdf">Organize Pages</a>

Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/custom-data.md

@@ -1,38 +1,43 @@
 ---
 layout: post
-title: Add custom data to form fields in ASP.NET Core 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 ASP.NET Core PDF Viewer.
+title: Add custom data to form fields in ASP.NET Core 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 ASP.NET Core PDF Viewer.
 platform: document-processing
 control: PDF Viewer
 documentation: ug
 ---
 
 # Add Custom Data to PDF Form Fields in ASP.NET Core PDF Viewer
 
-The Syncfusion ASP.NET Core PDF Viewer allows attaching custom 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 ASP.NET Core 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.
 
-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.
+Custom data remains associated with the form field for the duration of the viewer session and can be accessed or updated whenever the field is queried or modified.
 
-This page explains:
-- [Adding custom data when creating form fields](#add-custom-data-while-creating-pdf-form-fields)
-- [Defining default custom data for fields created using the UI](#set-default-custom-data-for-pdf-form-fields-added-using-ui)
-- [Updating or replacing custom data for existing fields](#update-or-replace-pdf-form-field-custom-data)
-- [Reading custom data from form fields](#read-custom-data-from-pdf-form-fields)
-- [Applying best practices when using custom data](#best-practices)
+This article explains how to:
 
-**Key Points**
-- **customData** is a free-form object; its structure is defined by the application.
-- Use only serializable values such as objects, arrays, strings, numbers, and booleans.
-- Custom data does not affect field appearance or behavior unless consumed by application logic.
+This article 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 field appearance or behavior unless consumed by your application logic.
+
+---
 
 ## Add Custom Data While Creating PDF Form Fields
 
-Custom data can be attached at the time of field creation by passing a **customData** object in the settings parameter of **addFormField()**.
+Attach custom data at field creation by passing a `customData` object in the settings parameter of `addFormField()`.
 
 {% tabs %}
 {% highlight cshtml tabtitle="Standalone" %}
 <div class="text-center">
-    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
+    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf">
     </ejs-pdfviewer>
 </div>
 <script type="text/javascript">
@@ -51,9 +56,11 @@ document.addEventListener('DOMContentLoaded', function () {
 {% endhighlight %}
 {% endtabs %}
 
+---
+
 ## 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), default **customData** can be defined so that newly created fields automatically inherit it. Default custom data can be configured using per-field settings objects such as:
+When form fields are added via the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar), define default `customData` so newly created fields inherit it. Default custom data is configured using per-field settings objects such as:
 
 - [textFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_TextFieldSettings)
 - [passwordFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_PasswordFieldSettings)
@@ -64,10 +71,11 @@ When users add form fields using the [Form Designer toolbar](../toolbar-customiz
 - [signatureFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_SignatureFieldSettings)
 - [initialFieldSettings](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_InitialFieldSettings)
 
+
 {% tabs %}
 {% highlight cshtml tabtitle="Standalone" %}
 <div class="text-center">
-    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
+    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf">
     </ejs-pdfviewer>
 </div>
 <script type="text/javascript">
@@ -89,14 +97,16 @@ document.addEventListener('DOMContentLoaded', function () {
 {% endhighlight %}
 {% endtabs %}
 
+---
+
 ## Update or Replace PDF Form Field Custom Data
 
-The **customData** of an existing form field can be modified using the [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) method. The field can be identified using its object reference or field ID.
+Modify an existing field's `customData` by using the [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) method. The field may be identified by its object reference or field ID.
 
 {% tabs %}
 {% highlight cshtml tabtitle="Standalone" %}
 <div class="text-center">
-    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
+    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf">
     </ejs-pdfviewer>
 </div>
 <script type="text/javascript">
@@ -114,19 +124,22 @@ document.addEventListener('DOMContentLoaded', function () {
 {% endtabs %}
 
 **Tip:**
-New values should be merged with the existing **customData** object before calling [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to avoid overwriting previously stored data.
+Merge new values into the existing `customData` object before calling [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to avoid unintentionally overwriting existing metadata.
+
+---
 
 ## Read Custom Data from PDF Form Fields
 
-The **customData** property can be accessed from any form field at any point in the application flow, such as:
-- After the document is loaded.
-- During save or submit operations.
-- While performing validation or conditional routing.
+Access the `customData` property from any form field at any point in your application flow, for example:
+
+- After the document is loaded
+- During save or submit operations
+- While performing validation or conditional routing
 
 {% tabs %}
 {% highlight cshtml tabtitle="Standalone" %}
 <div class="text-center">
-    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf">
+    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf">
     </ejs-pdfviewer>
 </div>
 <script type="text/javascript">
@@ -146,12 +159,14 @@ document.addEventListener('DOMContentLoaded', function () {
 {% endhighlight %}
 {% endtabs %}
 
+---
+
 ## Best Practices
 
-- Treat **customData** as application metadata, not display data.
+- Treat `customData` as application metadata, not display data.
 - Use it to drive business rules, validation logic, and workflow decisions.
-- Keep data minimal and structured for easy processing.
-- When cloning or copying form fields, ensure **customData** is copied or updated as required.
+- 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/asp-core-pdf-viewer-examples)
 
@@ -160,7 +175,7 @@ document.addEventListener('DOMContentLoaded', function () {
 - [Form Designer overview](./overview)
 - [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar)
 - [Create form fields](./overview-create-forms)
-- [Group form fields](./group-form-fields)
+- [Group form fields](../group-form-fields)
 - [Form flags](./form-constrain)
 - [Form validation](./form-validation)
 - [Form fields API](./form-fields-api)

Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/flatten-form-fields.md

@@ -0,0 +1,117 @@
+---
+layout: post
+title: Flatten PDF form fields in ASP.NET Core PDF Viewer | Syncfusion
+description: Learn how to flatten interactive PDF form fields before download or save-as in EJ2 ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Flatten PDF form fields in ASP.NET Core
+
+## Overview
+
+Flattening PDF forms converts interactive fields such as textboxes, dropdowns, checkboxes, signatures, etc., into non‑editable page content. Use this when you want to protect filled data, finalize a document, or prepare it for secure sharing.
+
+## Prerequisites
+
+- EJ2 ASP.NET Core PDF Viewer installed and configured
+- Basic viewer setup completed with toolbar and page organizer services injected. For more information, see [getting started guide](../getting-started)
+
+## Flatten forms before downloading PDF
+
+1. Get a reference to the `PdfViewer` instance using `document.getElementById()` so you can access viewer APIs from event handlers.
+2. Intercept the download flow using [`downloadStart`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_DownloadStart) and cancel the default flow.
+3. Retrieve the viewer's blob via [`saveAsBlob()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#saveasblob) and convert the blob to base64.
+4. Use `PdfDocument` from Syncfusion PDF Library to open the document, set `field.flatten = true` for each form field, then save.
+5. For the flattening the form fields when downloading through *Save As* option in Page Organizer, repeat steps 2–4 by using [`pageOrganizerSaveAs`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_PageOrganizerSaveAs) event.
+
+## Complete example
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+<div style="width:100%;height:640px">
+    <ejs-pdfviewer id="pdfviewer"
+                   style="height:640px"
+                   documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
+                   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+                   downloadStart="onDownloadStart"
+                   pageOrganizerSaveAs="onPageOrganizerSaveAs">
+    </ejs-pdfviewer>
+</div>
+
+<script>
+    var viewer;
+
+    function blobToBase64(blob) {
+        return new Promise(function(resolve, reject) {
+            var reader = new FileReader();
+            reader.onerror = function() { reject(reader.error); };
+            reader.onload = function() {
+                var dataUrl = reader.result;
+                var data = dataUrl.split(',')[1];
+                resolve(data);
+            };
+            reader.readAsDataURL(blob);
+        });
+    }
+
+    function flattenFormFields(data) {
+        // Use the Syncfusion PDF library to open the document
+        var document = new ej.pdf.PdfDocument(data);
+
+        // Flatten all form fields
+        for (var index = 0; index < document.form.count; index++) {
+            var field = document.form.fieldAt(index);
+            field.flatten = true;
+        }
+
+        // If both annotations and form fields need to be flattened, use:
+        // document.flatten = true
+
+        // Save the flattened document
+        var fileName = viewer.fileName || 'document.pdf';
+        document.save(fileName);
+        document.destroy();
+    }
+
+    function handleFlattening() {
+        viewer = document.getElementById('pdfviewer').ej2_instances[0];
+        if (!viewer) return;
+
+        viewer.saveAsBlob().then(function(blob) {
+            blobToBase64(blob).then(function(data) {
+                flattenFormFields(data);
+            });
+        });
+    }
+
+    function onDownloadStart(args) {
+        args.cancel = true;
+        handleFlattening();
+    }
+
+    function onPageOrganizerSaveAs(args) {
+        args.cancel = true;
+        handleFlattening();
+    }
+</script>
+{% endhighlight %}
+{% endtabs %}
+
+## Expected result
+
+- The downloaded or "Save As" PDF will contain the visible appearance of filled form fields as static, non-editable content.
+- Form fields will no longer be interactive or editable in common PDF readers.
+
+## Troubleshooting
+
+- If viewer instance is not found, ensure the PDF Viewer is loaded and the page is fully rendered before invoking [`saveAsBlob()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#saveasblob).
+- Missing resources: If viewer resources are not reachable, verify that the resource path for the ej2-pdfviewer-lib is correctly configured in your server.
+
+## Related topics
+
+- [`downloadStart` event reference](../events#downloadstart)
+- [`pageOrganizerSaveAs` event reference](../events#pageorganizersaveas)
+- [Form Designer in ASP.NET Core PDF Viewer](./form-designer)