1042138: Form Fields and Toolbar Enhancement in Core PDF Viewer

Document-Processing-toc.html

@@ -345,8 +345,9 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
 								</ul>
 							</li>
-							<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar">Toolbar Customization</a>
+							<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar-customization/overview">Toolbar</a>
 							    <ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar-customization/overview">Overview</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar-customization/primary-toolbar">Primary Toolbar</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar-customization/annotation-toolbar">Annotation Toolbar</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/toolbar-customization/form-designer-toolbar">Form Designer Toolbar</a></li>
@@ -465,6 +466,10 @@
 									<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-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>
+									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/forms/form-handling-best-practices">PDF Form Handling Best Practices</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/flatten-form-fields.md

@@ -0,0 +1,104 @@
+---
+layout: post
+title: Flatten Form Fields in ASP.NET Core PDF Viewer | Syncfusion
+description: Flatten interactive PDF form fields in the ASP.NET Core PDF Viewer before downloading or saving the PDF so the fields become static content.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Flatten Form Fields in ASP.NET Core PDF Viewer
+
+## 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
+
+- ASP.NET Core PDF Viewer installed and configured. For more information, see [getting started guide](../getting-started)
+- Basic viewer setup completed with the toolbar and page organizer. For more information, see [getting started guide](../getting-started)
+
+## Flatten forms before downloading PDF
+
+1. Access the viewer instance from the `ejs-pdfviewer` element so you can use the 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 the client-side `ej.pdf.PdfDocument` to open the document, set `field.flatten = true` for each form field, then save.
+5. To flatten the form fields when downloading through the *Save As* option in Page Organizer, repeat steps 2–4 by using the [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 class="text-center">
+    <ejs-pdfviewer id="pdfviewer" style="height:600px" resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
+                   downloadStart="onDownloadStart" pageOrganizerSaveAs="onPageOrganizerSaveAs">
+    </ejs-pdfviewer>
+</div>
+
+<script type="text/javascript">
+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 handleFlattening() {
+  var pdfviewer = document.getElementById('pdfviewer').ej2_instances[0];
+  pdfviewer.saveAsBlob().then(function (blob) {
+    blobToBase64(blob).then(function (data) {
+      // Use the client-side PDF library to flatten form fields
+      var document = new ej.pdf.PdfDocument(data);
+
+      for (var i = 0; i < document.form.count; i++) {
+        var field = document.form.fieldAt(i);
+        field.flatten = true;
+      }
+
+      // To flatten both annotations and form fields:
+      // document.flatten = true;
+
+      document.save(pdfviewer.fileName + '.pdf');
+      document.destroy();
+    });
+  });
+}
+
+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 the viewer instance is null, ensure the `ejs-pdfviewer` element is rendered and the DOM is ready before invoking [saveAsBlob()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#saveasblob).
+- Missing [resourceUrl](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl): If viewer resources are not reachable, set [resourceUrl](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) to the correct CDN or local path for the ej2-pdfviewer-lib.
+
+## Related topics
+
+- [`downloadStart` event reference](../events#downloadstart)
+- [`pageOrganizerSaveAs` event reference](../events#pageorganizersaveas)
+- [Form Designer in ASP.NET Core PDF Viewer](./form-designer)

Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-handling-best-practices.md

@@ -0,0 +1,114 @@
+---
+layout: post
+title: Form Handling Best Practices in ASP.NET Core PDF Viewer | Syncfusion
+description: Recommended best practices for naming, validating, grouping, importing, and designing form fields in the ASP.NET Core PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Form Handling Best Practices in ASP.NET Core PDF Viewer
+
+This guide provides a comprehensive overview of recommended practices for creating, organizing, validating, and automating PDF forms in the ASP.NET Core PDF Viewer.
+
+It explains how to structure field names, ensure consistency, apply validation rules, group related fields, and streamline workflows through pre-filling and data import/export. By following these guidelines, you can build clean, reliable, and efficient form experiences that are easier to maintain and work seamlessly across different use cases.
+
+## 1. Use Clear and Unique Field Names
+
+Field names are critical for automation, data mapping, and debugging. Always:
+
+- Use descriptive, unique names for each field (e.g., `FirstName`, `InvoiceNumber`).
+- Avoid generic names like `Textbox1` or `Field2`.
+- Ensure names are consistent across import/export workflows.
+
+![Forms Unique Field Name](../../javascript-es6/images/ui-textbox-edit.png)
+
+You can refer to [Create Form Fields](./manage-form-fields/create-form-fields) in the ASP.NET Core PDF Viewer to know more about creating form fields.
+
+## 2. Maintain Consistent Field Types
+
+Changing a field's type (e.g., from textbox to dropdown) can break data mapping and validation. Best practices:
+
+- Do not change a field's type after creation.
+- Fields with the same name must always have the same type.
+- Use the correct field type for the intended data (e.g., checkbox for boolean, textbox for free text).
+
+![Grouping Form Fields](../../javascript-es6/images/groupTextFileds.png)
+
+You can refer to [Group Form Fields](./group-form-fields) in the ASP.NET Core PDF Viewer to know more about grouping form fields.
+
+## 3. Validate Data Before Submission
+
+Validation ensures data quality and prevents errors downstream. Always:
+
+- Mark required fields and check for empty values.
+- Validate formats (email, phone, numbers, etc.).
+- Use custom validation logic for business rules.
+- Prevent submission or export if validation fails.
+
+You can refer to [Form Validation](./form-validation) in the PDF Viewer to know more about form fields validation.
+
+## 4. Pre-Fill Known Values
+
+Pre-filling fields improves user experience and reduces errors. For example:
+
+- Populate user profile data (name, email, address) automatically.
+- Use default values for common fields.
+
+![Form Filling](../../javascript-es6/images/FormFilled.png)
+
+You can refer to [Form Filling](./form-filling) in the ASP.NET Core PDF Viewer to know more about form filling.
+
+## 5. Automate with Import/Export
+
+Automate workflows by importing/exporting form data. Recommendations:
+
+- Use **JSON** for web apps and REST APIs.
+- Use **XFDF/FDF** for Adobe workflows.
+- Use **XML** for legacy systems.
+- Ensure field names match exactly for successful mapping.
+
+You can refer to [Export/Import Form fields](./import-export-form-fields/export-form-fields) in the ASP.NET Core PDF Viewer to know more about export and import form fields.
+
+## 6. Group Related Fields for Complex Forms
+
+Group fields logically for better structure and easier validation. Examples:
+
+- Address sections (Street, City, State, ZIP)
+- Invoice line items
+- Repeated form subsections
+
+Benefits:
+
+- Structured exported data
+- Easier validation
+- Improved user experience
+
+![Grouping Form Fields](../../javascript-es6/images/groupTextFileds.png)
+
+You can refer to [Group Form Fields](./group-form-fields) in the ASP.NET Core PDF Viewer to know more about grouping form fields.
+
+## 7. Keep Form Design Clean and Accessible
+
+Good design improves usability and accessibility. Tips:
+
+- Maintain consistent spacing and alignment (use grid layouts).
+- Use uniform field widths and clear labels.
+- Avoid clutter - don't crowd too many fields in one area.
+- Use section headers to guide users.
+
+![Form Fields](../../javascript-es6/images/FormFill.png)
+
+You can refer to [Customize Form Fields](./manage-form-fields/customize-form-fields) in the ASP.NET Core PDF Viewer to know more about styling form fields.
+
+## See Also
+
+- [Filling PDF Forms](./form-filling)
+- [Create Form Fields](./manage-form-fields/create-form-fields)
+- [Modify Form Fields](./manage-form-fields/modify-form-fields)
+- [Style Form Fields](./manage-form-fields/customize-form-fields)
+- [Remove Form Fields](./manage-form-fields/remove-form-fields)
+- [Group Form Fields](./group-form-fields)
+- [Form Validation](./form-validation)
+- [Import and Export Form Fields](./import-export-form-fields/export-form-fields)

Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/read-form-field-values.md

@@ -0,0 +1,106 @@
+---
+layout: post
+title: Read Form Field Values in ASP.NET Core PDF Viewer | Syncfusion
+description: Read and extract values from PDF form fields in the ASP.NET Core PDF Viewer, including text, checkboxes, radio buttons, dropdowns, and signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Read and Extract Form Field Values in ASP.NET Core PDF Viewer
+
+The ASP.NET Core PDF Viewer allows you to read the values of interactive PDF form fields including textboxes, checkboxes, radio buttons, dropdowns, signatures, and more. Use the APIs below to retrieve form data programmatically for validation, submission, or syncing with your application.
+
+This guide shows common patterns with concise code snippets you can copy into your cshtml views.
+
+## Access the Form Field Collection
+
+Get all available form field data by reading the viewer's `formFieldCollections`. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+```
+
+## Read Text Field Values
+
+Find the text field by name and read its value property. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+var name = (formFields.find(field => field.type === 'Textbox' && field.name === 'name')).value;
+```
+
+## Read Checkbox / Radio Button Values
+
+Check whether a checkbox or radio button is selected by reading its `isChecked` value. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+var radioButtons = formFields.filter(field => field.type === 'RadioButton' && field.name === 'gender');
+var checkedField = (radioButtons.find(field => field.isChecked)).name;
+```
+
+## Read Dropdown values
+
+Read the dropdown's selected option by accessing its `value` property. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+var state = (formFields.find(field => field.type === 'DropdownList' && field.name === 'state')).value;
+```
+
+## Read Signature Field Data
+
+This reads the signature path data stored in a signature field so it can be later converted to an image. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+var signData = (formFields.find(field => field.type === 'SignatureField' && field.name === 'signature')).value;
+```
+
+## Extract All Form Field Values
+
+This iterates every field in the collection and logs each field's name and value, useful for exporting or validating all form data. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections).
+
+```js
+var formFields = pdfviewer.formFieldCollections;
+formFields.forEach(field => {
+    if (field.type === 'RadioButton' || field.type === 'Checkbox') {
+        console.log(`${field.name}: ${field.isChecked}`);
+    }
+    else {
+        console.log(`${field.name}: ${field.value}`);
+    }
+});
+```
+
+## Extract Form Data After Document Loaded
+
+Place your form-reading logic inside `documentLoad` event handler, so values are read after the PDF is loaded in the viewer. For more information, see [`formFieldCollections`](./form-fields-api#formfieldcollections) and [`documentLoad`](../event#documentload).
+
+```js
+// If you need to access form data right after the PDF loads
+pdfviewer.documentLoad = function () {
+    var formFields = pdfviewer.formFieldCollections;
+    var email = formFields.find(field => field.name === 'email').value;
+    console.log('Email: ', email);
+};
+```
+
+## Use Cases
+
+- Validate and pre-fill form fields in your application before user submission.
+- Submit filled form data from the viewer to a back end service for processing or storage.
+- Synchronize form field values with external UI components to keep application state in sync.
+- Export form data for reporting, archival, or integration with other systems.
+
+## Troubleshooting
+
+- Use the exact field names defined in the PDF when searching through the `formFieldCollections`.
+- If a field might be missing in some documents, add null checks.
+
+## See also
+
+- [`formFieldCollections`](./form-fields-api#formfieldcollections)
+- [`documentLoad`](../event#documentload)