diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 0cdb0ff055..69c0015f59 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -424,7 +424,12 @@
  • Form Validation
  • Custom fonts
  • Form Field events
    • +
  • PDF Form Handling Best Practices
  • APIs
    • +
  • Flatten form fields
    • +
  • Read form fields
    • +
  • Submit form data
    • +
  • Organize Pages diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/custom-data.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/custom-data.md index a6eb7d0086..457316698d 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/custom-data.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/custom-data.md @@ -1,7 +1,7 @@ --- 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 @@ -9,30 +9,35 @@ 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" %}
    - +
    +{% 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) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-constrain.md index da0206f82d..e3265ec27a 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-constrain.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-constrain.md @@ -1,15 +1,15 @@ --- layout: post -title: PDF form field flags in ASP.NET Core PDF Viewer | Syncfusion -description: Learn how to apply isReadOnly, isRequired, and isPrint flags to PDF form fields in the Syncfusion ASP.NET Core PDF Viewer. +title: Form constraints in the ASP.NET Core PDF Viewer component | Syncfusion +description: Learn how to configure form field constraints such as isReadOnly, isRequired, and isPrint in the Syncfusion ASP.NET Core PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug --- -# PDF Form Field Flags in ASP.NET Core PDF Viewer +# PDF form field flags in ASP.NET Core PDF Viewer -The Syncfusion ASP.NET Core PDF Viewer allows controlling 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. +The **Syncfusion ASP.NET Core 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. This topic explains: - [Supported form field flags](#supported-pdf-form-field-flags) @@ -34,117 +34,152 @@ The following flags are supported in the PDF Viewer: ## Key Actions ### Make Fields Read Only - -The **isReadOnly** property prevents users from modifying a form field through the UI. This is useful for displaying prefilled or calculated values that should not be changed. +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. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - {% endhighlight %} {% endtabs %} -### Mark Fields as Required -The **isRequired** property marks form fields as mandatory. To enforce this constraint, enable form field validation and validate fields before allowing actions such as printing or downloading. +### 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://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) - [Validate fields](./form-validation) using [validateFormFields()](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) -When required fields are empty, validation can prevent further actions. +If required fields are empty, validation can prevent further actions. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - {% endhighlight %} {% endtabs %} ### Control Print Behavior - -The **isPrint** property controls whether a form field appears in the printed output of the PDF document. +Use the **isPrint** property to control whether a form field appears in the printed output of the PDF document. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - {% endhighlight %} {% endtabs %} -N> Printing can be triggered programmatically using **pdfviewer.print()**. Form fields with **isPrint: false** are excluded from the printed output. + +N> Printing can be triggered programmatically using `pdfviewer.print()`. Form fields with `isPrint: false` are excluded from printed output. ## Apply PDF Form Field Flags Using the UI **Steps** -1. Enable Form Designer mode in the PDF Viewer. -2. Select an existing form field on the PDF page. -3. Right-click to open the context menu and select Properties. -4. Configure the required constraint options. -5. Click OK to close the properties popover and apply changes. +1. Enable **Form Designer** mode in the PDF Viewer. +2. Select an existing form field on the PDF page. +3. Right-click the field, open the context menu, and select Properties. +4. Configure the required constraint options. +5. Click OK to apply changes and close the properties popover. Changes are reflected immediately in the viewer. @@ -152,115 +187,133 @@ Changes are reflected immediately in the viewer. ## Apply PDF Form Field Flags Programmatically -Form field flags can be applied or modified in the following ways. +You can apply or modify form field flags in the following ways. -### Apply Flags When Creating Fields - -Flags properties can be passed in the settings object when creating form fields using **addFormField()**. +### Apply flags when creating fields +Pass the flags properties in the settings object when creating form fields using **addFormField()**. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - {% endhighlight %} {% endtabs %} -### Update Flags on Existing Fields Programmatically - -The [updateFormField()](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html) method modifies constraint values on existing form fields. +### Update flags on existing fields programmatically +Use the `updateFormField()` method to modify constraint values on existing form fields. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - {% endhighlight %} {% endtabs %} -### Set Default Flags for New PDF Form Fields - -Default flag values can be configured so that form fields added using the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar) automatically inherit them. This ensures consistent behavior for all newly created 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. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - {% endhighlight %} {% endtabs %} @@ -274,4 +327,4 @@ document.addEventListener('DOMContentLoaded', function () { - [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 +- [Form fields API](./form-fields-api) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-designer.md index 6754edb807..421d69b9ec 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-designer.md @@ -10,14 +10,15 @@ domainurl: ##DomainURL## # Form Designer in ASP.NET Core PDF Viewer -When **Form Designer mode** is enabled in the Syncfusion ASP.NET Core PDF Viewer, a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) 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 `ASP .Net Core PDF Viewer`, a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) 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. -Form fields can be placed on the PDF, moved and resized, configured with field and widget properties, previewed, and removed as needed. The Form Designer toolbar can be shown, hidden, and customized to control available tools based on application requirements, enabling flexible and interactive form design directly within the viewer. +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 -**Add Form Fields** +## Key Features +**Add Form Fields:** The following form fields can be added to the PDF: - [Text box](../forms/manage-form-fields/create-form-fields#add-textbox) @@ -29,29 +30,33 @@ The following form fields can be added to the PDF: - [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** - -Form fields can be moved, resized, aligned, distributed, copied, pasted, and changes can be undone or redone. - -**Set Field Properties** +**Edit Form Fields:** +Form fields can be moved, resized, aligned, distributed, copied, pasted, and have changes undone or redone. +**Set Field Properties:** Field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read-only state can be configured. -**Control Field Behavior** +**Control Field Behavior:** +Field behavior can be controlled, including enabling or disabling read-only mode, showing or hiding fields, and determining whether fields appear when printing the document. -Read-only mode can be enabled or disabled, fields can be shown or hidden, and visibility during printing can be controlled. +**Manage Form Fields:** +Form fields can be selected, grouped or ungrouped, reordered, and deleted as needed. -**Manage Form Fields** +**Save and Print Forms:** +Designed form fields can be saved into the PDF document and printed with their appearances. -Form fields can be selected, grouped or ungrouped, reordered, and deleted as needed. +## Design Forms with UI interaction + +When `Form Designer mode` is enabled in the Syncfusion [ASP .Net Core PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) 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. -**Save and Print Forms** +![FormDesigner](../../javascript-es6/images/FormDesigner.gif) -Designed form fields can be saved to the PDF document and printed with their appearances. +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 ASP .Net Core PDF Viewer documentation. ## Enable Form Designer -Form design features are enabled using the ASP.NET Core TagHelper for the PDF Viewer. The TagHelper renders the client component and loads the EJ2 bundle (via `resourceUrl`), which provides the Form Designer modules at runtime. +Form design features are enabled by injecting the `FormDesigner`module into the PDF Viewer. The [enableFormDesigner](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesigner) API controls whether the Form Designer option appears in the main toolbar. + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -63,32 +68,24 @@ Form design features are enabled using the ASP.NET Core TagHelper for the PDF Vi }
    - +
    {% endhighlight %} {% endtabs %} -## Form Designer UI - -When Form Designer mode is enabled in the Syncfusion ASP.NET Core PDF Viewer, a default [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) 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. Fields can be placed on the PDF, selected, resized or moved, and configured using available editing options, enabling interactive form creation directly within the viewer. - -![FormDesigner](../../javascript-es6/images/FormDesigner.gif) - -{% 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](./manage-form-fields/create-form-fields) documentation. +### Form Designer Toolbar -## 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](../forms/manage-form-fields/create-form-fields#add-textbox) - [Password Field](../forms/manage-form-fields/create-form-fields#add-password) @@ -99,123 +96,55 @@ The Form Designer toolbar appears at the top of the PDF Viewer and provides quic - [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 placing the corresponding form field by selecting the tool and clicking the desired location in the PDF document. - -![Adding Text Box](../../javascript-es6/images/AddTextBox.gif) +#### Show or Hide the Built-in Form Designer Toolbar -The following code snippet enables Form Designer using the ASP.NET Core TagHelper: - -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -@page "{handler?}" -@model IndexModel -@{ - ViewData["Title"] = "Home page"; -} +The visibility of the Form Designer toolbar is controlled by the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This method enables the application to display or hide the Form Designer tools based on requirements. Refer to the code example [here](../toolbar-customization/form-designer-toolbar#2-show-or-hide-form-designer-toolbar-at-runtime). -
    - - -
    +- The Form Designer toolbar is shown when form design is required. +- The toolbar can be hidden to provide a cleaner viewing experience. - +#### Customize the Built-in Form Designer Toolbar -{% endhighlight %} -{% endtabs %} +The Form Designer toolbar can be customized by specifying the tools to display and arranging them in the required order using the `FormDesignerToolbarItems` property. -For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) documentation. +This customization helps limit the available tools and simplify the user interface. A code example is available [here](../toolbar-customization/form-designer-toolbar#3-show-or-hide-form-designer-toolbar-items). -## Show or Hide the Built-in Form Designer Toolbar +**Key Points** +- Only the toolbar items listed are included, in the exact order specified. +- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI. -The visibility of the Form Designer toolbar can be controlled using the [isFormDesignerToolbarVisible()](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_IsFormDesignerToolbarVisible) method. This allows displaying or hiding the Form Designer tools based on application requirements. +### Adding Form Fields -**Use this method to:** -- Show the Form Designer toolbar when form design is required. -- Hide the toolbar to provide a cleaner viewing experience. +Each toolbar item in form designer toolbar allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document. -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - - - -
    - - -
    +![Adding a text box using the Form Designer toolbar](../../javascript-es6/images/AddTextBox.gif) - -{% endhighlight %} -{% endtabs %} +For more information about creating form fields in the PDF Viewer, refer to the [Form Creation in ASP .Net Core PDF Viewer documentation](./manage-form-fields/create-form-fields#create-form-fields-using-the-form-designer-ui). -## Customize the Built-in Form Designer Toolbar +### Move, Resize, and Edit Form Fields -The Form Designer toolbar can be customized by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormDesignerToolbar) property. This customization limits available tools and simplifies the user interface. +Fields can be moved, resized, and edited directly in the PDF Viewer using the Form Designer. -**Key Points** -- Include only the toolbar items needed, in the exact order specified. -- Toolbar items not listed remain hidden, resulting in a cleaner, more focused UI. +- A field is moved by selecting it and dragging it to the required position. -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
    - - -
    -{% endhighlight %} -{% endtabs %} +- Fields are resized using the handles displayed on the field boundary. -## Move, Resize, and Edit Form Fields +![Moveing and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif) -Existing form fields can be moved, resized, and edited directly in the PDF Viewer using the Form Designer. +- Selecting a field opens the Form Field Properties popover, which allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed. +For more information, see Editing Form Fields -- Move a field by selecting it and dragging it to the required position. -- Resize a field using the handles displayed on the field boundary. +### Edit Form Field properties -![Moving and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif) +The **Properties** panel lets you customize the styles of form fields. Open the panel by selecting the **Properties** option in a field's context menu. -- Edit a field by selecting it to open the Form Field Properties popover. The popover allows modifying form field and widget annotation properties. Changes are reflected immediately and saved when the properties popover is closed. For more information, see [Editing Form Fields](./manage-form-fields/modify-form-fields). +![Textbox style from UI showing font, color, and border settings](../../javascript-es6/images/ui-textbox-style.png) -## Deleting Form Fields +### Deleting Form Fields -Form fields can be removed from the PDF document by selecting the field and using one of the following methods: -- Click the Delete option in the Form Designer UI. -- Press the Delete key after selecting the form field. +A form field is removed by selecting it and either clicking the `Delete` option in the Form Designer UI or pressing the `Delete` key on the keyboard. The selected form field and its associated widget annotation are permanently removed from the page. -The selected form field and its associated widget annotation are permanently removed from the page. For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields). +For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields) ## See Also @@ -226,4 +155,4 @@ The selected form field and its associated widget annotation are permanently rem - [Form Validation](./form-validation) - [Custom Data](./custom-data) - [Import](./import-export-form-fields/import-form-fields)/[Export Form Data](./import-export-form-fields/export-form-fields) -- [Form field events](./form-field-events) +- [Form field events](./form-field-events) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-field-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-field-events.md index afc9324a84..192f3227fc 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-field-events.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-field-events.md @@ -1,8 +1,8 @@ --- layout: post -title: Form Field Events in ASP.NET Core PDF Viewer control | Syncfusion -description: Learn here all about different form field events in the Syncfusion ASP.NET Core PDF Viewer component and more. -platform: document-processing +title: Form Field Events in ASP.NET Core Pdfviewer control | Syncfusion +description: Learn here all about different form field in Syncfusion ASP.NET Core Pdfviewer component of Syncfusion Essential JS 2 and more. +control: Form Field Events control: PDF Viewer documentation: ug domainurl: ##DomainURL## @@ -10,93 +10,125 @@ domainurl: ##DomainURL## # PDF Viewer Form Field Events in ASP.NET Core -The Syncfusion ASP.NET Core PDF Viewer provides comprehensive form field events for tracking user interactions, responding to form changes, and implementing custom business logic. Events support scenarios such as [validation](./form-validation), UI updates, logging, and workflow automation. +The Syncfusion ASP.NET Core PDF Viewer provides a set of form field events that report changes associated with creating, selecting, modifying, moving, resizing, or removing form fields. These events supply metadata related to the affected field and are raised during user interaction or programmatic updates. -Form field events are triggered when adding, selecting, modifying, moving, resizing, and removing form fields. +Validation‑related events are emitted when the viewer performs operations that require confirmation of field completion, such as print or download actions. ## Supported PDF Form Field Events The following table lists all supported form field events and their descriptions: -| Form Field events | Description | -|---|---| -| [formFieldAdd](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldAdd) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. | -| [formFieldClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldClick) | Fired when a form field is clicked in the viewer. | -| [formFieldDoubleClick](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldDoubleClick) | Fired when a form field is double clicked. | -| [formFieldFocusOut](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldFocusOut) | Triggered when a form field loses focus after editing. | -| [formFieldMouseLeave](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseLeave) | Fired when the mouse pointer leaves a form field. | -| [formFieldMouseOver](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseover) | Fired when the mouse pointer moves over a form field. | -| [formFieldMove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove) | Triggered when a form field is moved to a new position. | -| [formFieldPropertiesChange](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange) | Fired when any form field property changes, such as font, color, or constraint values. | -| [formFieldRemove](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldRemove) | Triggered when a form field is deleted from the document. | -| [formFieldResize](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldResize) | Fired when a form field is resized. | -| [formFieldSelect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect) | Fired when a form field is selected in the Form Designer. | -| [formFieldUnselect](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect) | Fired when a previously selected form field is unselected. | -| [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) | Fired when form field validation fails during print or download actions. | - -**Common Use Cases** - -Form field events support: -- Validating form data before printing or downloading. -- Tracking user interactions with form fields. -- Updating UI elements dynamically. -- Logging form changes for auditing. -- Triggering workflow actions based on field changes. -- Enforcing business rules during form editing. - -## Handle PDF Form Field Events - -Form field events can be wired on the PDF Viewer instance to execute custom logic when specific actions occur. +| Form Field events | Description | Arguments | +|---|---|---| +| [`formFieldAdd`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldAdd) | Triggered when a new form field is added, either through the Form Designer UI or programmatically. | `formFieldAddArgs` | +| [`formFieldClick`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldClick) | Fired when a form field is clicked in the viewer. | `formFieldClickArgs` | +| [`formFieldDoubleClick`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldDoubleClick) | Fired when a form field is double clicked. | `formFieldDoubleClickArgs` | +| [`formFieldFocusOut`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldFocusOut) | Triggered when a form field loses focus after editing. | `formFieldFocusOutEventArgs` | +| [`formFieldMouseLeave`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseLeave) | Fired when the mouse pointer leaves a form field. | `formFieldMouseLeaveArgs` | +| [`formFieldMouseOver`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMouseover) | Fired when the mouse pointer moves over a form field. | `formFieldMouseOverArgs` | +| [`formFieldMove`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldMove) | Triggered when a form field is moved to a new position. | `formFieldMoveArgs` | +| [`formFieldPropertiesChange`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldPropertiesChange) | Fired when any form field property changes, such as font, color, or constraint values. | `formFieldPropertiesChangeArgs` | +| [`formFieldRemove`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldRemove) | Triggered when a form field is deleted from the document. | `formFieldRemoveArgs` | +| [`formFieldResize`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldResize) | Fired when a form field is resized. | `formFieldResizeArgs` | +| [`formFieldSelect`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldSelect) | Fired when a form field is selected in the Form Designer. | `formFieldSelectArgs` | +| [`formFieldUnselect`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_FormFieldUnselect) | Fired when a previously selected form field is unselected. | `formFieldUnselectArgs` | +| [`validateFormFields`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) | Fired when form field validation fails during print or download actions. | `validateFormFieldsArgs` | + +## Example + +You can wire up form field events on the PDF Viewer instance to execute custom logic when specific actions occur. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - + function onFormFieldMouseLeave(args) { + console.log('formFieldMouseLeave', args); + } + + function onFormFieldMove(args) { + console.log('formFieldMove', args); + } + + function onFormFieldResize(args) { + console.log('formFieldResize', args); + } + + function onFormFieldSelect(args) { + console.log('formFieldSelect', args); + } + + function onFormFieldUnselect(args) { + console.log('formFieldUnselect', args); + } + + // Validation handler + function handleValidateFormFields(args) { + if (args && args.formField && args.formField.length > 0) { + // Prevent the pending action (submit/print/etc.) + args.cancel = true; + alert('Please fill all required fields. Missing: ' + args.formField[0].name); + // Optionally: focus/scroll to the field here + } + } + {% endhighlight %} {% endtabs %} **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. +- 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/asp-core-pdf-viewer-examples) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-fields-api.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-fields-api.md index cf5c4287f1..e771eeaee8 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-fields-api.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-fields-api.md @@ -1,7 +1,7 @@ --- layout: post title: Form Fields API in ASP.NET Core PDF Viewer | Syncfusion -description: Learn how to use Form Fields API to enable, update, retrieve and clear in the Syncfusion ASP.NET Core PDF Viewer. +description: Learn How to use Form Fields API to enable, update, retrieve and clear in the Syncfusion ASP.NET Core PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug @@ -10,7 +10,9 @@ domainurl: ##DomainURL## # Form Fields API in ASP.NET Core PDF Viewer -The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, and manage form fields programmatically. The table below lists the available APIs: +The PDF Viewer exposes a set of programmatic APIs to create, edit, validate, navigate, and manage form fields. These APIs enable automation of common tasks such as updating values, exporting/importing form data, resetting fields, and toggling designer or validation features. The examples below demonstrate usage patterns; code samples remain unchanged and are runnable when the viewer is initialized. + +Each sample demonstrates a single API call or small workflow (for example, updating a field value or exporting form data). Use the provided APIs in application logic or UI handlers to automate form workflows. | API | Description | |---|---| @@ -32,405 +34,468 @@ The PDF Viewer provides comprehensive APIs to create, edit, validate, navigate, ## updateFormFieldsValue -Form field values can be updated programmatically using this API. +Updates the value of one or more form fields programmatically. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## updateFormFields -Form field properties such as bounds, color, font, isReadOnly, required, and more can be updated using this API. +Updates form field properties such as bounds, color, font, isReadOnly, required, and more. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## retrieveFormFields -All form fields and their properties can be retrieved, or results can be filtered by type or name. +Retrieves all form fields and their properties or filters by type/name. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## resetFormFields -Specified form fields or all fields can be reset to their default values. +Resets specified form fields or all fields to their default values. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## importFormFields -Form field data can be imported from an object or file into the current document. +Imports form field data from an object or file into the current document. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## focusFormField -Focus can be moved to a form field by name or ID. +Moves focus to a form field by name or ID. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## exportFormFieldsAsObject -Current form field values and states can be exported as a JSON object. +Exports current form field values and states as a JSON object. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## exportFormFields -Form field data can be exported to a file for download. +Exports form field data to a file for download. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## clearFormFields -Values of specified or all fields can be cleared without removing the fields. +Clears values of specified or all fields without removing the fields themselves. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## isFormFieldDocument -Returns true if the loaded document contains form fields. +Returns true if the loaded document contains one or more form fields. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## isFormDesignerToolbarVisible -Gets the visibility status of the Form Designer toolbar. +Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially +and get the form designer Toolbar Visible status. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## formFieldCollections -The current collection of form fields with their properties can be retrieved from the viewer instance. +Gets the current collection of form fields with their properties from the viewer instance. -```html - -``` {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## enableFormFieldsValidation -Built-in validation for required and constrained fields can be enabled or disabled. +Enables or disables built-in validation for required and constrained fields. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - {% endhighlight %} {% endtabs %} ## enableFormFields -User interaction with form fields can be enabled or disabled globally. +Enables or disables user interaction with form fields globally. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - {% endhighlight %} {% endtabs %} + ## enableFormDesignerToolbar -The Form Designer toolbar can be shown or hidden at runtime. +Shows or hides the Form Designer toolbar at runtime. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - {% endhighlight %} {% endtabs %} @@ -438,9 +503,9 @@ document.addEventListener('DOMContentLoaded', function () { - [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) +- [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 Validation](./form-validation) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-filling.md index 5b4a8b33d7..f6bdedb577 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-filling.md @@ -10,32 +10,24 @@ domainurl: ##DomainURL## # Filling PDF Forms in ASP.NET Core PDF Viewer -The Syncfusion PDF Viewer supports three form-filling methods: +This guide shows how to update, import, and validate PDF form fields in the ASP .Net Core PDF Viewer so you can pre-fill forms or accept user input. -1. [Filling form fields programmatically](#fill-pdf-forms-programmatically) +**Outcome** Programmatically set field values, allow UI-driven filling, import form data, and validate fields on submit. - Form fields can be filled or updated programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This approach is useful when form data must be set dynamically based on application logic. +## Steps to fill forms -2. [Form filling through the user interface](#fill-pdf-forms-through-the-user-interface) +### Fill PDF forms programmatically - Users can fill PDF form fields directly through the UI by typing, selecting, or interacting with supported form elements. +Update form field values programmatically with [`updateFormFieldsValue`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. -3. [Importing form field data](#fill-pdf-forms-through-import-data) - - The PDF Viewer supports importing form field data into an existing document to prefill forms from external data sources. - -## Fill PDF forms programmatically - -Form field values can be updated programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows setting or modifying values dynamically, without user interaction. - -The following example demonstrates how to update PDF form field values programmatically: +Use the example below as a complete, runnable example for a small ASP .Net Core app. It retrieves form fields and updates a named field or the first available field. {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    @@ -60,19 +52,19 @@ document.addEventListener('DOMContentLoaded', function () { {% endhighlight %} {% endtabs %} -## Fill PDF forms through the User Interface +**Expected result:** Clicking the *Fill Form Fields* button sets the first or named field's value to *John Doe* in the viewer. -Users can fill PDF form fields directly through the UI. Clicking a form field enables entering or selecting values according to the field type. +### 2. Fill form fields via UI -![Form Filling](../../javascript-es6/images/FormFields.gif) +Users can click form controls and enter/select values. Supported field types include textboxes, checkboxes, radio buttons, dropdowns, list boxes, and signature fields. Edits are retained during the viewing session. -The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values can be edited at any time, and the entered data is retained during the viewing session. +![Form Filling](../../javascript-es6/images/FormFields.gif) {% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} -## Fill PDF forms through Import Data +### 3. Fill form fields through imported data -The PDF Viewer supports importing form field data into an existing document using the [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) API. Imported data is mapped to corresponding form fields by name and displayed in the viewer; values can be edited through the UI if required. +Use [`importFormFields`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) to map external data into PDF fields by name. The example below shows how to trigger import from a button handler. ```html @@ -82,7 +74,7 @@ The PDF Viewer supports importing form field data into an existing document usin
    - +
    @@ -102,24 +94,14 @@ document.addEventListener('DOMContentLoaded', function () { 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 - -Export filled form data from the PDF Viewer and store it in a backing system such as a database or file storage. Exported data can be re-imported later to restore form state. - -For more details, see [Export Form Data](./import-export-form-fields/export-form-fields). - ## How to Validate Form Fields using `validateFormFields` Event -The [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_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. - -Validation applies to all form field types. 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 not signed, and radio buttons or checkboxes are empty if none are chosen. - -Enable [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) and wire the event to inspect each field and cancel actions when required fields are not filled. +Enable [`enableFormFieldsValidation`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) and handle [`validateFormFields`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) to check required fields and cancel submission when necessary. Example below shows adding required fields via `formDesignerModule`and validating them. {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    @@ -164,6 +146,12 @@ document.addEventListener('DOMContentLoaded', function () { {% endhighlight %} {% endtabs %} +## Troubleshooting + +- If fields are not editable, confirm `FormFields` module is injected into PDF Viewer. +- If examples fail to load, verify your [`resourceUrl`](https://helpej2.syncfusion.com/ASP .Net Core/documentation/api/pdfviewer#resourceurl) matches the installed PDF Viewer version. +- For import issues, ensure JSON keys match the PDF field `name` values. + ## See also - [Form Designer overview](./overview) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-handling-best-practices.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-handling-best-practices.md new file mode 100644 index 0000000000..1043e52871 --- /dev/null +++ b/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 | Syncfusion +description: Learn the recommended best practices for naming, validating, grouping, importing, and designing form fields in the Syncfusion 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 Syncfusion 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](../forms/manage-form-fields/create-form-fields) in 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](../forms/group-form-fields) in 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](../forms/form-validation) in ASP .Net Core 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](../forms/form-filling) in 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](../forms/import-export-form-fields/export-form-fields) in 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](../forms/group-form-fields) in 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 [Group Form Fields](../forms/group-form-fields) in ASP .Net Core PDF Viewer to know more about grouping form fields. + +## See Also + +- [Filling PDF Forms](../forms/form-filling) +- [Create Form Fields](../forms/manage-form-fields/create-form-fields) +- [Modify Form Fields](../forms/manage-form-fields/modify-form-fields) +- [Style Form Fields](../forms/manage-form-fields/customize-form-fields) +- [Remove Form Fields](../forms/manage-form-fields/remove-form-fields) +- [Group Form Fields](../forms/group-form-fields) +- [Form Validation](../forms/form-validation) +- [Import and Export Form Fields](../forms/import-export-form-fields/export-form-fields) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-validation.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-validation.md index e6b153b306..df2433108c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-validation.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/form-validation.md @@ -9,17 +9,17 @@ documentation: ug # Validate PDF Form Fields in ASP.NET Core PDF Viewer -The Syncfusion **ASP.NET Core PDF Viewer** provides built-in support for validating form fields before printing, downloading, or submitting a PDF document. Validation ensures all required form fields are filled, helping enforce data completeness and improving the reliability of collected data. +The Syncfusion ASP .Net Core 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 required form fields are completed before allowing these actions. This improves data completeness and reliability. ## How PDF Form Validation Works Form field validation follows this flow: - Enable validation using the [enableFormFieldsValidation](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_EnableFormFieldsValidation) property. -- Handle the [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event to determine which required fields remain unfilled. -- When validation is enabled and the user attempts to print, download, or submit: +- Handle the [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_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://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event is triggered. - - Unfilled required fields are listed in args.nonFillableFields. - - Cancel the action, show an error message, or focus an invalid field as needed. + - Unfilled required fields are provided in the event arguments (typically as `args.formField`; older versions may use `args.nonFillableFields`). + - You can cancel the action, show an error message, or move focus to an invalid field. ## Enable PDF Form Field Validation @@ -28,7 +28,7 @@ To enable validation, set the [enableFormFieldsValidation](https://help.syncfusi {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    @@ -65,7 +65,7 @@ document.addEventListener('DOMContentLoaded', function () { ## Mark Fields as Required -Only fields marked as required participate in validation. Use the **isRequired** property when creating or updating form fields. +Only fields marked as **required** participate in validation. Use the **isRequired** property when creating or updating a form field. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} @@ -91,10 +91,10 @@ document.addEventListener('DOMContentLoaded', function () { ## Handle PDF Form Validation Results -In the [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ValidateFormFields) event, control the behavior when fields are missing. Typical actions include: -- Cancel the print or download operation. -- Display an error message to the user. -- Focus the first unfilled required field. +In the [validateFormFields](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_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 {% tabs %} {% highlight cshtml tabtitle="Standalone" %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/group-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/group-form-fields.md index cb8931d4e9..08563f533c 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/group-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/group-form-fields.md @@ -9,37 +9,35 @@ documentation: ug # Group Form Fields in ASP.NET Core PDF Viewer -The Syncfusion ASP.NET Core PDF Viewer allows grouping multiple form fields into a single logical field by assigning the same Name. Grouped fields share values and states automatically based on field type. Form field grouping can be done using the Form Designer UI or programmatically via APIs. - -This page covers: +The **Syncfusion ASP .Net Core PDF Viewer** allows grouping 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. Use the Form Designer UI for manual grouping or the Form Designer APIs for programmatic grouping to keep related fields synchronized across the document. - [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) -- [Example scenarios](#example-scenarios) +- [Related references and samples](#example-scenarios) -## How Grouping Works +## How grouping works -In a PDF form, multiple PDF Form Fields can represent the same logical form field. When fields share the same Name, they are treated as a group and remain synchronized. +In a PDF form, multiple widgets can represent the same logical form field. When widgets share the same `Name`, they are treated as a group and remain synchronized. -## Field Behavior by Type +## 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 signatures or initials are mirrored across grouped widgets. +- **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. Widget position is determined only by bounds; grouping is unaffected by location. +N> form field grouping is controlled by the `Name` property. The position of each widget is determined by its bounds; grouping is independent of location. -## Group Using the Form Designer UI +## Group using the Form Designer UI **Steps** 1. Enable the [Form Designer toolbar](../toolbar-customization/form-designer-toolbar). -2. Add the form fields to group. -3. Select a form field, open Properties, and set the Name value. -4. Assign the same Name to all PDF Form Fields in the group. -5. Apply changes and verify that updates in one widget reflect in others. +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. ![Grouping textboxes with the same name](../../javascript-es6/images/groupTextFileds.png) @@ -47,17 +45,17 @@ N> Form field grouping is controlled by the Name property. Widget position is de ## Group PDF Form Fields Programmatically -Form fields can be grouped during creation by assigning the same Name through code. +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. +- 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. {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/export-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/export-form-fields.md index 1ce1b366fc..df95b733b0 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/export-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/export-form-fields.md @@ -9,31 +9,44 @@ documentation: ug # Export PDF Form Data from ASP.NET Core PDF Viewer -The PDF Viewer allows you to export form field data in multiple formats for easy storage or integration. Supported formats: +This guide shows concise, actionable steps to export PDF form field data for storage or integration. It covers: -- [FDF](#export-as-fdf) -- [XFDF](#export-as-xfdf) -- [JSON](#export-as-json) -- [JavaScript Object](#export-as-object) (for custom persistence) +- Exporting as [FDF](#3-export-as-fdf), [XFDF](#4-export-as-xfdf), and [JSON](#5-export-as-json) using [`exportFormFields()`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/index-default#exportformfields). +- Exporting as a [JavaScript object](#6-export-as-a-javascript-object) using [`exportFormFieldsAsObject()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject). -## Available methods +## Steps -- [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. +### 1. Configure the PDF Viewer -## How to export +Set up the ASP.NET Core PDF Viewer in your Razor page. -Use [exportFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) with an optional destination path and the format type. +{% tabs %}{% highlight cshtml tabtitle="Standalone" %} + + +{% endhighlight %}{% endtabs %} -### Export as FDF -The following example exports form field data as FDF. +### 2. Initialize the Viewer instance + +Access the PDF Viewer instance using JavaScript to call export methods. + +{% tabs %}{% highlight cshtml tabtitle="Standalone" %} + +{% endhighlight %}{% endtabs %} + +### 3. Export as FDF + +Use [`exportFormFields(destination?, FormFieldDataFormat.Fdf)`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfields) to download an FDF file. {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    @@ -50,13 +63,14 @@ document.addEventListener('DOMContentLoaded', function () { {% endhighlight %} {% endtabs %} -### Export as XFDF -The following example exports form field data as XFDF. +### 4. Export as XFDF + +Use [`FormFieldDataFormat.Xfdf`](https://ej2.syncfusion.com/documentation/api/pdfviewer/formfielddataformat) to export XFDF. {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    @@ -74,13 +88,14 @@ document.addEventListener('DOMContentLoaded', function () { {% endhighlight %} {% endtabs %} -### Export as JSON -The following example exports form field data as JSON. +### 5. Export as JSON + +Use [`FormFieldDataFormat.Json`](https://ej2.syncfusion.com/documentation/api/pdfviewer/formfielddataformat) to export form data as a JSON file. {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    @@ -98,14 +113,14 @@ document.addEventListener('DOMContentLoaded', function () { {% endhighlight %} {% endtabs %} -### Export as Object +### 6. Export as a JavaScript 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. +Use [`exportFormFieldsAsObject(format)`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to get data for API calls or storing in a database. {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    @@ -130,16 +145,59 @@ document.addEventListener('DOMContentLoaded', function () { {% endhighlight %} {% endtabs %} -## Common Use Cases +## Complete example -- 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) +The example below demonstrates form field export functionality with buttons for all supported formats in an ASP.NET Core Razor view. + +{% tabs %} +{% highlight cshtml tabtitle="Standalone" %} +
    + + + + + + +
    + +{% endhighlight %} +{% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) +## Troubleshooting + +- Ensure the PDF Viewer is properly initialized with the form field services enabled in your ASP.NET Core application. +- Confirm the viewer instance is accessible via `document.getElementById('pdfviewer').ej2_instances[0]` before calling export methods. +- If exports fail in restrictive browsers, check popup/download settings and CORS for hosted endpoints. +- For server-side persistence, use [`exportFormFieldsAsObject()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject) and send the result to your API endpoint. +- Verify that the document path points to a valid PDF with form fields. + ## See also - [Form Designer overview](../overview) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-export-events.md index d807c6e18b..202f401ca0 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-export-events.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-export-events.md @@ -9,8 +9,9 @@ documentation: ug # PDF Form Import and Export Events in ASP.NET Core -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: +Import and export events enable tracking and customization of the full life cycle of form data imported into or exported from the PDF Viewer. + +Use events to: - Validate inputs before processing. - Show progress indicators. - Log audit trails. @@ -18,40 +19,43 @@ Use these events to: 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://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportStart) — Fires when an import begins. - [importSuccess](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportSuccess) — Fires when form fields are successfully imported. - [importFailed](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ImportFailed) — Fires if the import fails. + **Example: Handle Import Events** -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
    - +{% tabs %}{% highlight cshtml tabtitle="Standalone" %} +
    +
    - -{% endhighlight %} -{% endtabs %} +{% endhighlight %}{% endtabs %} ## Export Events - [exportStart](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ExportStart) — Fires when an export begins. @@ -60,33 +64,34 @@ document.addEventListener('DOMContentLoaded', function () { **Example: Handle Export Events** -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
    - +{% tabs %}{% highlight cshtml tabtitle="Standalone" %} +
    +
    - -{% endhighlight %} -{% endtabs %} +{% endhighlight %}{% endtabs %} ## Key Notes - importStart, importSuccess, importFailed cover the full import life cycle. diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md index accab91343..5328ea6c3e 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/import-export-form-fields/import-form-fields.md @@ -7,96 +7,85 @@ control: PDF Viewer documentation: ug --- -# Import PDF Form Data into ASP.NET Core PDF Viewer +# Import PDF Form Data into the ASP.NET Core 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: +This guide shows how to import form field values into an already loaded PDF in the EJ2 ASP.NET Core PDF Viewer. **Supported import formats**: FDF, XFDF, JSON, and importing from a JavaScript object. -- [FDF](#import-as-fdf) -- [XFDF](#import-xfdf) -- [JSON](#import-json) +## Steps to import data -## API to use -- [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) +1. Configure the PDF Viewer component in your ASP.NET Core Razor view using the `` tag. -N>If you’re using a **server-backed viewer**, set serviceUrl before importing. +2. Call the [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format) + method using JavaScript, where `format` is one of `FormFieldDataFormat.Fdf`, `FormFieldDataFormat.Xfdf`, or `FormFieldDataFormat.Json`. The `data` parameter may be a file path (for server-based imports), a base64 string, or a JavaScript object mapping field names to values. -### Import FDF +3. Verify the form fields are populated after the import completes. For server-backed imports, ensure [`serviceUrl`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#serviceurl) your ASP.NET Core backend is configured to handle the import file and is accessible. -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} -
    - - -
    +## Example - - - -{% endhighlight %} -{% endtabs %} +The example below provides an ASP.NET Core Razor view with buttons to import FDF, XFDF, JSON, and from an object. Replace the import file identifiers with your file path or implement a file upload to pass the form data. -### Import XFDF +{% tabs %}{% highlight cshtml tabtitle="Standalone" %} +@{ + ViewBag.Title = "PDF Viewer - Import Form Fields"; +} -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
    - - +
    + + + +
    - -{% endhighlight %} -{% endtabs %} - -### Import JSON -{% tabs %} -{% highlight cshtml tabtitle="Standalone" %} - -
    - +
    +
    - -{% endhighlight %} -{% endtabs %} +{% endhighlight %}{% endtabs %} -## Common Use Cases +[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) -- 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. +**Expected result**: The loaded PDF's interactive form fields are populated with the values from the imported file/object. For object imports, fields matching the object keys receive the provided values. -[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) +## Troubleshooting +- If imports do not populate fields, confirm the field names in the source match the PDF form field names. +- For file-based imports, ensure the import file is accessible to your ASP.NET Core application. +- If using a base64 string, encode it properly before passing it to `importFormFields()`. +- Check browser console for errors when the viewer attempts to fetch import files. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) ## See also - [Form Designer overview](../overview) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/create-form-fields.md index b4e67123be..745947fd42 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/create-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/create-form-fields.md @@ -7,48 +7,50 @@ control: PDF Viewer documentation: ug --- -# Create PDF Form Fields in ASP.NET Core PDF Viewer +# Create PDF Form Fields in ASP.NET Core -You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/asp-net-core/pdfviewer/formdesigner#/tailwind3) or dynamically using APIs. +Create or add new form fields visually with the Form Designer UI or programmatically using the ASP.NET Core PDF Viewer API. This guide explains both methods and shows field‑specific examples and a complete runnable example. -## Create Form Fields Using the Form Designer UI -Use this approach when you want to design forms manually without writing code. +**Outcome:** -**Steps:** +The guide explains the following: +- How to add fields with the Form Designer UI. +- How to add and edit fields programmatically (API). +- How to add common field types: Textbox, Password, CheckBox, RadioButton, ListBox, DropDown, Signature, Initial. -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. +## Steps -![Adding a form field using the Form Designer UI](../../javascript-es6/images/FormDesigner.gif) +### 1. Create form fields using Form Designer UI. -## Add Form Fields Programmatically (API) +- Enable the Form Designer mode in the PDF Viewer. See [Form Designer overview](../overview). +- Select a field type from the toolbar and click the PDF page to place it. +- Move/resize the field and configure properties in the **Properties** panel. -Use this approach when you want to generate form fields dynamically based on data or application logic. +![Adding a form field using the Form Designer UI](../../../javascript-es6/images/FormDesigner.gif) + +### 2. Create Form fields programmatically + +Use `addFormField` method of the `formDesigner` module inside the viewer's [`documentLoad`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#documentload) handler or in response to user actions. +Use this approach to generate form fields dynamically based on data or application logic. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} @@ -59,275 +61,293 @@ document.addEventListener('DOMContentLoaded', function () { - 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**. +## Field‑specific instructions + +Below are concise UI steps and the programmatic examples for each common field type. The code samples below are complete per‑field examples you can reuse unchanged. ### Textbox -**Add via Toolbar (UI)** -- Open **Form Designer** → select **Textbox** → click on the page → configure in **Properties**. +**Add via UI**: Open Form Designer toolbar → select Textbox → click page → configure properties + ![Textbox properties panel](../../../javascript-es6/images/ui-textbox-edit.png) -**Add Programmatically (API)** +**Add Programmatically (API)**: {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} ### Password -**Add via Toolbar (UI)** -- Select **Password** → place it → configure tooltip, required, max length. +**Add via UI**: Open form designer toolbar → Select Password → place → configure properties + ![Password Properties Panel](../../../javascript-es6/images/ui-password-edit.png) -**Add Programmatically (API)** +**Add Programmatically (API)**: + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} ### CheckBox -**Add via Toolbar (UI)** -- Select **CheckBox** → click to place → duplicate for options → set isChecked, tooltip, appearance. + +**Add via UI**: Open form designer toolbar → Select CheckBox → click to place → duplicate for options. + ![CheckBox Properties Panel](../../../javascript-es6/images/ui-checkbox-edit.png) -**Add Programmatically (API)** +**Add Programmatically (API)**: + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} ### RadioButton -**Add via Toolbar (UI)** -- Select **RadioButton** → place buttons with the **same Name** to group → configure selection/colors. + +**Add via UI**: Open form designer toolbar → Select RadioButton → place buttons using the same `name` to group them. + ![Radio Button Properties Panel](../../../javascript-es6/images/ui-radiobutton-edit.png) -**Add Programmatically (API)** +**Add Programmatically (API)**: + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} ### ListBox -**Add via Toolbar (UI)** -- Select **ListBox** → place → add items in **Properties**. + +**Add via UI**: Open form designer toolbar → Select ListBox → place → add items in Properties. + ![ListBox Properties Panel](../../../javascript-es6/images/ui-listbox-edit.png) -**Add Programmatically (API)** +**Add Programmatically (API)**: + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} ### DropDown -**Add via Toolbar (UI)** -- Select **DropDown** → place → add items → set default value. + +**Add via UI**: Open form designer toolbar → Select DropDown → place → add items → set default value. + ![DropDown Properties Panel](../../../javascript-es6/images/ui-dropdown-edit.png) -**Add Programmatically (API)** +**Add Programmatically (API)**: + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} ### Signature Field -**Add via Toolbar (UI)** -- Select **Signature Field** → place where signing is required → configure indicator text, thickness, tooltip, required. + +**Add via UI**: Open form designer toolbar → select Signature Field → place where signing is required → configure indicator text/thickness/tooltip/isRequired. + ![Signature Field](../../../javascript-es6/images/ui-signature-edit.png) -**Add Programmatically (API)** +**Add Programmatically (API)**: + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} ### Initial Field -**Add via Toolbar (UI)** -- Select **Initial Field** → place where initials are needed → configure text and required state. + +**Add via UI**: Open form designer toolbar → select Initial Field → place where initials are needed → configure text/isRequired. + ![Initial field Properties Panel](../../../javascript-es6/images/ui-initial-edit.png) -**Add Programmatically (API)** +**Add Programmatically (API)**: + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - - {% endhighlight %} {% endtabs %} -## Add Fields Dynamically with setFormFieldMode +## Add fields dynamically with setFormFieldMode -Use **setFormFieldMode()** to add fields on the fly based on user actions. +Use `setFormFieldMode()` to switch the designer into a specific field mode and let users add fields on the fly. ### Edit Form Fields in ASP.NET Core PDF Viewer You can edit form fields using the UI or API. @@ -338,54 +358,71 @@ You can edit form fields using the UI or API. - Use the toolbar to toggle field mode or add new fields. #### Edit Programmatically + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - - - -
    - + + +
    +
    - {% endhighlight %} {% endtabs %} [View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) -## See Also +## Troubleshooting + +- If fields do not appear, verify [`resourceUrl`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#resourceurl) matches the EJ2 PDF Viewer library version and that the document loads correctly. +- If using WASM or additional services, confirm those resources are reachable from the environment. + +## Related topics - [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) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/customize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/customize-form-fields.md index 432a9a12f9..22d69f3e34 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/customize-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/customize-form-fields.md @@ -1,7 +1,7 @@ --- layout: post -title: Customize form fields in the ASP.NET Core PDF Viewer | Syncfusion -description: Learn how to customize PDF form fields using the UI and programmatically with APIs in the Syncfusion ASP.NET Core PDF Viewer. +title: Style form fields in the ASP.NET Core PDF Viewer | Syncfusion +description: Learn how to configure typography, colors, borders, alignment, and other style settings for form fields using the UI and Programmatically in the ASP.NET Core. platform: document-processing control: PDF Viewer documentation: ug @@ -11,88 +11,85 @@ documentation: ug **Styling** customizes appearance only (font, color, alignment, border, background, indicator text). -## Customize Appearance of Form Fields Using the UI +## Customize appearance of form fields using the UI Use the **Properties** panel to adjust: -- Font family/size, text color, alignment -- Border color/thickness +- Font family and size, text color, and alignment +- Border color and thickness - Background color -![Textbox style from UI](../../../javascript-es6/images/ui-textbox-style.png) +![Textbox style from UI showing font, color, and border settings](../../../javascript-es6/images/ui-textbox-style.png) -## Customize appearance Form Fields Programmatically -Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to apply styles. +## Customize appearance of form fields programmatically +Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to apply styles: {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} ## Set Default Styles for New Form Fields Define defaults so fields added from the toolbar inherit styles. - {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - +
    +
    - {% endhighlight %} {% endtabs %} @@ -109,4 +106,4 @@ document.addEventListener('DOMContentLoaded', function () { - [Group form fields](../group-form-fields) - [Form validation](../form-validation) - [Add custom data to form fields](../custom-data) -- [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/asp-net-core/forms/manage-form-fields/modify-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/modify-form-fields.md index 71e59298a6..142b175e01 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/modify-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/modify-form-fields.md @@ -1,55 +1,56 @@ --- layout: post -title: Modify form fields in the ASP.NET Core PDF Viewer | Syncfusion -description: Learn how to modify PDF form fields using the UI and programmatically with APIs in the Syncfusion ASP.NET Core PDF Viewer. +title: Edit form fields in the ASP.NET Core PDF Viewer | Syncfusion +description: Learn how to edit PDF form fields using the UI and programmatically with APIs in the Syncfusion ASP.NET Core PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug --- -# Modify PDF Form Field Properties in ASP.NET Core PDF Viewer -You can modify form fields using the **UI** or **API**. +# Modify PDF Form Field Properties in ASP.NET Core -## Modify PDF Form Field Properties using the UI +Modify form fields using the UI or programmatically via the API. + +## Modify PDF form field properties using the UI - Right click a field → **Properties** to update settings. -![Textbox properties panel](../../../javascript-es6/images/ui-textbox-edit.png) +![Textbox properties panel showing properties and layout](../../../javascript-es6/images/ui-textbox-edit.png) - 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). +## Modify PDF form field properties programmatically +Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to change behavior or data (including position and size): {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} @@ -58,39 +59,40 @@ document.addEventListener('DOMContentLoaded', function () { ### Textbox - UI: Update value, font, size, colors, border thickness, alignment, max length, multiline. -![Textbox properties panel](../../../javascript-es6/images/ui-textbox-edit.png) +![Textbox properties panel showing value and typography settings](../../../javascript-es6/images/ui-textbox-edit.png) - API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for value, typography, alignment, colors, borders. {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} @@ -98,251 +100,268 @@ document.addEventListener('DOMContentLoaded', function () { ### Password - UI: Tooltip, required, max length, font, appearance. -![Password edited from UI](../../../javascript-es6/images/ui-password-edit.png) +![Password properties panel showing tooltip and validation settings](../../../javascript-es6/images/ui-password-edit.png) - API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, validation flags, typography, colors, alignment, borders. -![Password edited from UI](../../../javascript-es6/images/ui-password-edit.png) {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} ### CheckBox - UI: Toggle checked state. -![CheckBox edited from UI](../../../javascript-es6/images/ui-checkbox-edit.png) +![CheckBox properties panel showing checked state](../../../javascript-es6/images/ui-checkbox-edit.png) - API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders. + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} ### RadioButton -• UI: Set selected item in a group (same Name). -![RadioButton edited from UI](../../../javascript-es6/images/ui-radiobutton-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance. +- UI: Set selected item in a group (same Name). +![RadioButton properties panel showing grouped options](../../../javascript-es6/images/ui-radiobutton-edit.png) +- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance. + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} ### ListBox -• UI: Add/remove items, set selection, adjust fonts/colors. -![ListBox edited from UI](../../../javascript-es6/images/ui-listbox-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders. +- UI: Add/remove items, set selection, adjust fonts/colors. +![ListBox properties panel showing items and selection](../../../javascript-es6/images/ui-listbox-edit.png) +- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders. + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} ### DropDown -• UI: Add/remove items, default value, appearance. -![DropDown edited from UI](../../../javascript-es6/images/ui-dropdown-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders. +- UI: Add/remove items, default value, appearance. +![DropDown properties panel showing list items and default value](../../../javascript-es6/images/ui-dropdown-edit.png) +- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders. + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} ### Signature Field -• UI: Tooltip, thickness, indicator text, required/visibility. -![Signature field edited from UI](../../../javascript-es6/images/ui-signature-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. +- UI: Tooltip, thickness, indicator text, required/visibility. +![Signature field properties panel showing indicator and appearance](../../../javascript-es6/images/ui-signature-edit.png) +- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} -
    - + +
    +
    - - - {% endhighlight %} {% endtabs %} ### Initial Field -• UI: Tooltip, indicator text, thickness, required/visibility. -![Initial field edited from UI](../../../javascript-es6/images/ui-initial-edit.png) -• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. +- UI: Tooltip, indicator text, thickness, required/visibility. +![Initial field properties panel showing indicator and tooltip](../../../javascript-es6/images/ui-initial-edit.png) +- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. + {% tabs %} {% highlight cshtml tabtitle="Standalone" %} - -
    - + +
    +
    - {% endhighlight %} {% endtabs %} diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/move-resize-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/move-resize-form-fields.md index 2e0906e5b9..0cee0efad0 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/move-resize-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/move-resize-form-fields.md @@ -1,49 +1,56 @@ --- layout: post -title: Move and Resize form fields in the Core PDF Viewer | Syncfusion -description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion ASP.NET Core PDF Viewer. +title: Move and Resize form fields in the ASP.NET Core PDF Viewer | Syncfusion +Syncfusion description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion ASP.NET Core PDF Viewer. platform: document-processing control: PDF Viewer documentation: ug --- -# Move and Resize PDF Form Fields in ASP.NET Core PDF Viewer +# Move and Resize PDF Form Fields in ASP.NET Core + +The PDF Viewer supports moving and resizing form fields. + - **Move**: Drag the form field to reposition it. - **Resize**: Use the resize handles to change width and height. -![Moveing and Resizing a form field](../../../javascript-es6/images/move-resize-forms.gif) +![Moving and resizing a form field using the Form Designer UI](../../../javascript-es6/images/move-resize-forms.gif) + +## Move and resize fields programmatically -## Move and Resize Fields Programmatically (API) -You can set absolute bounds or move fields by a delta. +The API supports setting absolute bounds or moving fields by a delta. + +### Set absolute bounds -**Set absolute bounds** {% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    {% endhighlight %} {% endtabs %} +[View Sample on GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples) + ## See also - [Form Designer overview](../overview) @@ -53,4 +60,4 @@ document.addEventListener('DOMContentLoaded', function () { - [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 +- [Form fields API](../form-fields-api) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/remove-form-fields.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/remove-form-fields.md index 24aeb50229..2005616901 100644 --- a/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/remove-form-fields.md +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/forms/manage-form-fields/remove-form-fields.md @@ -1,30 +1,38 @@ --- layout: post -title: Remove form fields in the Core PDF Viewer component | Syncfusion -description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion ASP.NET Core PDF Viewer component. +title: Remove form fields in the ASP.NET Core PDF Viewer component | Syncfusion +Syncfusion description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion ASP.NET Core PDF Viewer component. platform: document-processing control: PDF Viewer documentation: ug --- -# Remove PDF Form Fields in ASP.NET Core PDF Viewer +# Remove PDF Form Fields from a PDF in ASP.NET Core + +The PDF Viewer supports removing form fields using the Form Designer UI or programmatically via the API. + +### Remove form fields using the UI -## 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. -![Form Designer toolbar with Delete icon](../../../javascript-es6/images/ui-del-formfields.png) -## Remove Form Fields Programmatically -Use **deleteFormField()** with a field reference or ID. +- Enable **Form Designer** mode. +- Select the form field. +- Click **Delete** in the toolbar or press the **Delete** key. + +![Form Designer toolbar showing Delete form field icon](../../../javascript-es6/images/ui-del-formfields.png) + +### Remove form fields programmatically + +Use `deleteFormField()` with a field reference or the field id. The method accepts either a field object returned by `retrieveFormFields()` or a numeric/string id. + +#### Example -{% tabs %} +Liquid{% tabs %} {% highlight cshtml tabtitle="Standalone" %}
    - +
    +{% endhighlight %} +{% endtabs %} + +### Troubleshooting + +- **No form values returned**: Ensure the PDF has interactive fields and the viewer has finished loading before calling [`exportFormFieldsAsObject()`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#exportformfieldsasobject). +- **CORS errors**: Enable CORS on the server or serve both frontend and back end from the same origin during testing. +- **Server rejects payload**: Confirm the server expects `application/json` and validates shape of the object. +- **WASM or resource errors**: Ensure [`resourceUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.pdfviewer.pdfviewer.html#Syncfusion_EJ2_PdfViewer_PdfViewer_ResourceUrl) points to the correct Syncfusion PDF Viewer library files. + +## Use cases + +- Enable remote verification and approval workflows by sending submitted form data to a back end service for review and sign-off. +- Store submitted form responses in a database to persist user inputs for auditing, reporting, or later retrieval. +- Trigger workflow automation and downstream processing by sending form data to business systems or server less functions. +- Merge submitted values into a final flattened PDF on the server to produce a non-editable document that combines the form data with the original PDF. + +## Related topics + +- [`exportFormFieldsAsObject` API reference](./form-fields-api#exportformfieldsasobject) +- [Export form data as object](./import-export-form-fields/export-form-fields#export-as-object) \ No newline at end of file