From 9bdb50bd8fe881e734bd41cf22f17b8c1d484e00 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 7 Jan 2026 18:04:25 +0530 Subject: [PATCH 1/4] 1001841: Updated Forms UG Revamp in React Platform --- .../create-formfields.md | 533 ++++++++++ .../edit-formfields.md | 545 ++++++++++ .../remove-formfields.md | 121 +++ .../style-formfields.md | 949 ++++++++++++++++++ .../react/form-designer/custom-data.md | 221 ++++ .../react/form-designer/form-constrain.md | 587 +++++++++++ .../react/form-designer/form-filling.md | 143 +++ .../react/form-designer/group-formfields.md | 140 +++ .../export-formfields.md | 211 ++++ .../import-export-events.md | 70 ++ .../import-formfields.md | 272 +++++ .../react/form-designer/overview.md | 66 ++ 12 files changed, 3858 insertions(+) create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/create-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/edit-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/custom-data.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/form-constrain.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/form-filling.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/group-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/export-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-export-events.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/overview.md diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/create-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/create-formfields.md new file mode 100644 index 000000000..6ca1b0d72 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/create-formfields.md @@ -0,0 +1,533 @@ +--- +layout: post +title: Create form fields in the React PDF Viewer | Syncfusion +description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion React PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Create form fields in React PDF Viewer + +The PDF Viewer component supports interactive form field design, including drawing, dragging, and resizing fields directly on the page. Click the Form Field icon on the toolbar to add a field and place it on the document. You can also create and manage form fields programmatically using the API. + +The PDF Viewer supports the following form field types: + +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field + +## Add the form field dynamically + +Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference. + +![Add a form field using the toolbar](../../images/addformfield.gif) + +## Drag the form field + +Drag the selected form field to reposition it within the PDF document. See the following GIF for reference. + +![Drag a selected form field in the PDF Viewer](../../images/dragformfield.gif) + +## Resize the form field + +Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference. + +![Resize a selected form field in the PDF Viewer](../../images/resizeformfield.gif) + +## Textbox + +### Add Textbox + +1) Open the Form Designer toolbar. +2) Select Textbox, then click/tap on the page to place it. +3) Resize/move as needed and set properties in the property panel. + +![Textbox added from UI](../../../javascript-es6/images/ui-textbox.png) + +### Add Textbox Programmatically + +To add a Textbox programmatically in React, use a ref to access the viewer instance and add the field in the documentLoad event. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + viewerRef.current?.formDesignerModule.addFormField('Textbox', { + name: 'First Name', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 } + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Password + +### Add Password + +1) Open the Form Designer toolbar. +2) Select Password, then place it on the page. +3) Configure tooltip, required, max length, etc. + +![Password added from UI](../../../javascript-es6/images/ui-password.png) + +### Add Password Programmatically + +To add a Password field programmatically in React, add it in the documentLoad event. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + viewerRef.current?.formDesignerModule.addFormField('Password', { + name: 'Account Password', + bounds: { X: 148, Y: 270, Width: 180, Height: 24 } + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## CheckBox + +### Add CheckBox + +1) Choose CheckBox in the Form Designer toolbar. +2) Click on the page to place, duplicate for multiple options if needed. +3) Use property panel to set IsChecked, tooltip, and appearance. + +![CheckBox added from UI](../../../javascript-es6/images/ui-checkbox.png) + +### Add CheckBox Programmatically + +To add a CheckBox programmatically in React, add it in the documentLoad event. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + viewerRef.current?.formDesignerModule.addFormField('CheckBox', { + name: 'Subscribe', + isChecked: false, + bounds: { X: 56, Y: 664, Width: 20, Height: 20 } + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## RadioButton + +### Add RadioButton + +1) Select RadioButton in the Form Designer toolbar. +2) Place buttons sharing the same Name to create a group (e.g., Gender). +3) Use property panel to set selection, colors, and tooltip. + +![Radio buttons added from UI](../../../javascript-es6/images/ui-radiobutton.png) + +### Add RadioButton Programmatically + +To add radio buttons programmatically in React, add them in the documentLoad event using the same name to create a group. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Group by name: 'Gender' + viewerRef.current?.formDesignerModule.addFormField('RadioButton', { + name: 'Gender', + isSelected: false, + bounds: { X: 148, Y: 289, Width: 18, Height: 18 } + }); + + viewerRef.current?.formDesignerModule.addFormField('RadioButton', { + name: 'Gender', + isSelected: false, + bounds: { X: 292, Y: 289, Width: 18, Height: 18 } + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## ListBox + +### Add ListBox + +1) Choose ListBox in the Form Designer toolbar. +2) Place the field and add items in the property panel. +3) Configure font, size, and selection behavior. + +![ListBox added from UI](../../../javascript-es6/images/ui-listbox.png) + +### Add ListBox Programmatically + +To add a ListBox programmatically in React, include an options array and add the field in documentLoad. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const options = [ + { itemName: 'Item 1', itemValue: 'item1' }, + { itemName: 'Item 2', itemValue: 'item2' }, + { itemName: 'Item 3', itemValue: 'item3' } + ]; + + viewerRef.current?.formDesignerModule.addFormField('ListBox', { + name: 'States', + options, + bounds: { X: 380, Y: 320, Width: 150, Height: 60 } + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## DropDown + +### Add DropDown + +1) Select DropDown in the Form Designer toolbar. +2) Place the field, then add items via the property panel. +3) Adjust appearance and default value. + +![DropDown added from UI](../../../javascript-es6/images/ui-dropdown.png) + +### Add DropDown Programmatically + +To add a DropDown programmatically in React, include an options array and add the field in documentLoad. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const options = [ + { itemName: 'Item 1', itemValue: 'item1' }, + { itemName: 'Item 2', itemValue: 'item2' }, + { itemName: 'Item 3', itemValue: 'item3' } + ]; + + viewerRef.current?.formDesignerModule.addFormField('DropDown', { + name: 'Country', + options, + bounds: { X: 560, Y: 320, Width: 150, Height: 24 } + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Signature field + +### Add Signature field + +1) Select Signature field in the Form Designer toolbar. +2) Place the field where the signer should sign. +3) Configure indicator text, thickness, tooltip, and required state. + +![Signature field added from UI](../../../javascript-es6/images/ui-signature.png) + +### Add Signature field Programmatically + +To add a Signature field programmatically in React, add it in the documentLoad event. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + viewerRef.current?.formDesignerModule.addFormField('SignatureField', { + name: 'Sign', + bounds: { X: 57, Y: 923, Width: 200, Height: 43 } + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Initial field + +### Add Initial field + +1) Select Initial field in the Form Designer toolbar. +2) Place the field where initials are required. +3) Configure indicator text, tooltip, and required state. + +![Initial field added from UI](../../../javascript-es6/images/ui-initial.png) + +### Add Initial field Programmatically + +To add an Initial field programmatically in React, add it in the documentLoad event. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + viewerRef.current?.formDesignerModule.addFormField('InitialField', { + name: 'Initial', + bounds: { X: 148, Y: 466, Width: 200, Height: 43 } + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## setFormFieldMode programmatically + +The `setFormFieldMode` method enables adding a form field dynamically by specifying the field type. For example, the following adds a Password field when a button is clicked. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const addPasswordFieldMode = () => { + viewerRef.current?.formDesignerModule.setFormFieldMode('Password'); + // You can pass other fields like 'Textbox', 'CheckBox', etc. + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See Also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Edit form fields](./edit-formfields) +- [Style form fields](./style-formfields) +- [Remove form fields](./remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Form Fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/edit-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/edit-formfields.md new file mode 100644 index 000000000..18ec46ef4 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/edit-formfields.md @@ -0,0 +1,545 @@ +--- +layout: post +title: Edit form fields in the React PDF Viewer | Syncfusion +description: Learn how to edit PDF form fields using the UI and programmatically with APIs in the Syncfusion React PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Edit form fields in React PDF Viewer + +The PDF Viewer component allows user to edit PDF form fields using the Form Designer UI and update them programmatically. + +The PDF Viewer supports editing these field types: + +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field + +## Edit with the UI + +- Select a form field and Right-click to open the Properties panel from the context menu to change its settings. + +![Edit FormFields](../../../javascript-es6/images/formFields_properties.png) + +- Drag to move; use resize handles to resize. +- Use the toolbar to toggle field mode and add new fields. + +## Textbox + +### Edit Textbox + +1) Right-click the textbox → Properties. +2) Change value, font, size, colors, border thickness, alignment, max length, multiline. + +![Textbox edited from UI](../../../javascript-es6/images/ui-textbox-edit.png) + +### Edit Textbox programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the textbox, and applies value, typography, colors, alignment, and border thickness updates. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onEditTextbox = () => { + const viewer = viewerRef.current; + if (!viewer) return; + const fields = viewer.retrieveFormFields(); + const field = fields.find(f => f.name === 'First Name') || fields[0]; + if (field) { + viewer.formDesignerModule.updateFormField(field, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + color: 'black', + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + alignment: 'Left', + maxLength: 50 + }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Password + +### Edit Password + +1) Right-click the password field → Properties. +2) Change tooltip, required, max length, font, and appearance. + +![Password edited from UI](../../../javascript-es6/images/ui-password-edit.png) + +### Edit Password programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the password field, and applies tooltip, validation flags, typography, colors, alignment, max length, and border thickness updates. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onEditPassword = () => { + const viewer = viewerRef.current; + if (!viewer) return; + const fields = viewer.retrieveFormFields(); + const field = fields.find(f => f.name === 'Password'); + if (field) { + viewer.formDesignerModule.updateFormField(field, { + tooltip: 'Enter your password', + isReadOnly: false, + isRequired: true, + isPrint: true, + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + maxLength: 20, + thickness: 1 + }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## CheckBox + +### Edit CheckBox + +1) Right-click the checkbox → Properties. +2) Toggle checked state, change border/background colors and thickness. + +![CheckBox edited from UI](../../../javascript-es6/images/ui-checkbox-edit.png) + +### Edit CheckBox programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the checkbox field, and applies checked state, tooltip, colors, and border thickness updates. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onEditCheckbox = () => { + const viewer = viewerRef.current; + if (!viewer) return; + const fields = viewer.retrieveFormFields(); + const cb = fields.find(f => f.name === 'Subscribe'); + if (cb) { + viewer.formDesignerModule.updateFormField(cb, { + isChecked: true, + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + tooltip: 'Subscribe to newsletter' + }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## RadioButton + +### Edit RadioButton + +1) Right-click a radio button → Properties. +2) Set selected state, colors, and thickness. Buttons with the same Name form a group; only one can be selected. + +![RadioButton edited from UI](../../../javascript-es6/images/ui-radiobutton-edit.png) + +### Edit RadioButton programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the radio button group, and applies selection state and border appearance updates. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onEditRadio = () => { + const viewer = viewerRef.current; + if (!viewer) return; + const fields = viewer.retrieveFormFields(); + const genderRadios = fields.filter(f => f.name === 'Gender'); + if (genderRadios.length > 1) { + viewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false }); + viewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## ListBox + +### Edit ListBox + +1) Right-click the list box → Properties. +2) Add/remove items, set selection, and adjust fonts and colors. + +![ListBox edited from UI](../../../javascript-es6/images/ui-listbox-edit.png) + +### Edit ListBox programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the list box, and applies options, selection, typography, colors, and border appearance updates. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onEditListBox = () => { + const viewer = viewerRef.current; + if (!viewer) return; + const fields = viewer.retrieveFormFields(); + const lb = fields.find(f => f.name === 'States'); + if (lb) { + viewer.formDesignerModule.updateFormField(lb, { + options: [ + { itemName: 'Alabama', itemValue: 'AL' }, + { itemName: 'Alaska', itemValue: 'AK' }, + { itemName: 'Arizona', itemValue: 'AZ' } + ], + value: 'AZ', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white' + }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## DropDown + +### Edit DropDown + +1) Right-click the dropdown → Properties. +2) Add/remove items, set default value, and adjust appearance. + +![DropDown edited from UI](../../../javascript-es6/images/ui-dropdown-edit.png) + +### Edit DropDown programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the dropdown, and applies items, value, typography, colors, and border appearance updates. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onEditDropDown = () => { + const viewer = viewerRef.current; + if (!viewer) return; + const fields = viewer.retrieveFormFields(); + const dd = fields.find(f => f.name === 'Country'); + if (dd) { + viewer.formDesignerModule.updateFormField(dd, { + options: [ + { itemName: 'USA', itemValue: 'US' }, + { itemName: 'Canada', itemValue: 'CA' }, + { itemName: 'Mexico', itemValue: 'MX' } + ], + value: 'US', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white' + }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Signature field + +### Edit Signature field + +1) Right-click the signature field → Properties. +2) Change tooltip, thickness, indicator text, required/visibility states. + +![Signature field edited from UI](../../../javascript-es6/images/ui-signature-edit.png) + +### Edit Signature field programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the signature field, and applies tooltip, required/print flags, colors, and border thickness updates. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onEditSignature = () => { + const viewer = viewerRef.current; + if (!viewer) return; + const fields = viewer.retrieveFormFields(); + const sig = fields.find(f => f.name === 'Sign'); + if (sig) { + viewer.formDesignerModule.updateFormField(sig, { + tooltip: 'Please sign here', + thickness: 3, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Initial field + +### Edit Initial field + +1) Right-click the initial field → Properties. +2) Change tooltip, indicator text, thickness, and required/visibility states. + +![Initial field edited from UI](../../../javascript-es6/images/ui-initial-edit.png) + +### Edit Initial field programmatically + +Use `updateFormField` on a button click for a simple, discoverable flow. The example below retrieves the fields, locates the initial field, and applies tooltip, required/print flags, colors, and border thickness updates. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onEditInitial = () => { + const viewer = viewerRef.current; + if (!viewer) return; + const fields = viewer.retrieveFormFields(); + const init = fields.find(f => f.name === 'Initial'); + if (init) { + viewer.formDesignerModule.updateFormField(init, { + tooltip: 'Add your initials', + thickness: 2, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Create form fields](./create-formfields) +- [Remove form Fields](./remove-formfields) +- [Style form fields](./style-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields.md new file mode 100644 index 000000000..3c45b49fc --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields.md @@ -0,0 +1,121 @@ +--- +layout: post +title: Remove form fields in the React PDF Viewer component | Syncfusion +description: Learn how to remove PDF form fields using the UI and programmatically in the Syncfusion React PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Remove form fields in React PDF Viewer control + +The PDF Viewer component allows users to remove PDF form fields using the Form Designer UI and programmatically. + +## Remove form fields using the UI + +You can remove designed form fields directly from the Form Designer toolbar. + +Steps: + +1) Select the target form field on the page. +2) Click the Delete Form Field icon on the Form Designer toolbar. +3) Alternatively, press the `Delete key` after selecting one or more fields. + +![Form Designer toolbar with Delete icon](../../../javascript-es6/images/ui-del-formfields.png) + +## Remove form fields programmatically + +Use the `deleteFormField` method to remove form fields programmatically. Retrieve the target field from the `formFieldCollections` property (by object or ID) and pass it to `deleteFormField`. + +The following example adds three fields on document load (Textbox, Password, and Signature) and shows two ways to remove them using buttons. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef, useCallback } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = useCallback(() => { + const viewer = viewerRef.current; + if (!viewer) return; + + viewer.formDesignerModule.addFormField('Textbox', { + name: 'First Name', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 } + }); + + viewer.formDesignerModule.addFormField('Password', { + name: 'Password', + bounds: { X: 338, Y: 229, Width: 150, Height: 24 } + }); + + viewer.formDesignerModule.addFormField('SignatureField', { + name: 'Sign Here', + bounds: { X: 146, Y: 280, Width: 200, Height: 43 } + }); + }, []); + + const deleteAll = useCallback(() => { + const viewer = viewerRef.current; + if (!viewer || !viewer.formFieldCollection) return; + const fields = [...viewer.formFieldCollection]; // clone to avoid mutation issues + fields.forEach(field => viewer.formDesignerModule.deleteFormField(field)); + }, []); + + const deleteById = useCallback(() => { + const viewer = viewerRef.current; + const list = viewer?.formFieldCollection || []; + if (list.length > 0) { + const id = list[0].id; + if (id) viewer.formDesignerModule.deleteFormField(id); + } + }, []); + + return ( +
+
+
+ + +
+ + + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +N> To configure the server-backed PDF Viewer, add the following `serviceUrl` as a prop in the `index.js` file: +`serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/"` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Create form fields](./create-formfields) +- [Edit form fields](./edit-formfields) +- [Style form fields](./style-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields.md new file mode 100644 index 000000000..ab3208762 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields.md @@ -0,0 +1,949 @@ +--- +layout: post +title: Style form fields in the React PDF Viewer | Syncfusion +description: Learn how to configure typography, colors, borders, alignment, and other style settings for PDF form fields using the UI and programmatically. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Style form fields in React PDF Viewer + +The PDF Viewer component allows users to style and customize the appearance of PDF form fields using the Form Designer UI and programmatically. User can also set the default settings applied when fields are added from the Form Designer toolbar. + +Supported field types: + +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field + +## Textbox + +### Style Textbox + +Use the Properties panel to adjust the value, font family/size/style, text color, border and background colors, border thickness, text alignment, and maximum length. + +![Textbox style from UI](../../../javascript-es6/images/ui-textbox-style.png) + +### Style Textbox programmatically + +Use `updateFormField` to modify a textbox’s appearance and behavior on a button click. The example below finds the field by name (or falls back to the first field) and updates value, typography, colors, alignment, and border thickness. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const updateTextboxStyle = () => { + const fields = viewerRef.current?.retrieveFormFields?.() || []; + const tb = fields.find((f) => f.name === 'First Name') || fields[0]; + if (tb) { + viewerRef.current.formDesignerModule.updateFormField(tb, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + thickness: 2 + }); + } + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Default Textbox settings + +The PDF Viewer exposes a default settings APIs for form fields. Use the [TextFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#textfieldsettings) to preconfigure TextBox properties applied when adding fields from the Form Designer toolbar. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useEffect, useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + useEffect(() => { + if (viewerRef.current) { + viewerRef.current.textFieldSettings = { + name: 'Textbox', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'Textbox', + thickness: 4, + value: 'Textbox', + fontFamily: 'Courier', + fontSize: 10, + fontStyle: 'None', + color: 'black', + borderColor: 'black', + backgroundColor: 'White', + alignment: 'Left', + maxLength: 0, + isMultiline: false + }; + } + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Password + +### Style Password + +Use the Properties panel to configure the tooltip, font family and size, masked text color, border and background colors, text alignment, maximum length, and border thickness. + +![Password style from UI](../../../javascript-es6/images/ui-password-style.png) + +### Style Password programmatically + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const fields = viewerRef.current?.retrieveFormFields?.() || []; + const pw = fields.find((f) => f.name === 'Password'); + if (pw) { + viewerRef.current.formDesignerModule.updateFormField(pw, { + tooltip: 'Enter password', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + maxLength: 20, + thickness: 1 + }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Default Password settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [PasswordFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#passwordfieldsettings) to preconfigure Password properties applied when adding fields from the Form Designer toolbar. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useEffect, useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + useEffect(() => { + if (viewerRef.current) { + viewerRef.current.passwordFieldSettings = { + name: 'Password', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'Password', + thickness: 4, + value: 'Password', + fontFamily: 'Courier', + fontSize: 10, + fontStyle: 'None', + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + maxLength: 0 + }; + } + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## CheckBox + +### Style CheckBox + +Use the Properties panel to toggle the checked state and customize border and background colors, and border thickness. + +![CheckBox style from UI](../../../javascript-es6/images/ui-checkbox-style.png) + +### Style CheckBox programmatically + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const fields = viewerRef.current?.retrieveFormFields?.() || []; + const cb = fields.find((f) => f.name === 'Subscribe'); + if (cb) { + viewerRef.current.formDesignerModule.updateFormField(cb, { + isChecked: true, + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + tooltip: 'Subscribe' + }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Default CheckBox settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [CheckBoxFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#checkboxfieldsettings) to preconfigure CheckBox properties applied when adding fields from the Form Designer toolbar. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useEffect, useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + useEffect(() => { + if (viewerRef.current) { + viewerRef.current.checkBoxFieldSettings = { + name: 'CheckBox', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'CheckBox', + thickness: 4, + isChecked: true, + backgroundColor: 'white', + borderColor: 'black' + }; + } + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## RadioButton + +### Style RadioButton + +Use the Properties panel to set the selected state, border and background colors, and border thickness. Radio buttons with the same name are grouped automatically. + +![RadioButton style from UI](../../../javascript-es6/images/ui-radiobutton-style.png) + +### Style RadioButton programmatically + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const fields = viewerRef.current?.retrieveFormFields?.() || []; + const radios = fields.filter((f) => f.name === 'Gender'); + if (radios.length > 1) { + viewerRef.current.formDesignerModule.updateFormField(radios[0], { isSelected: false }); + viewerRef.current.formDesignerModule.updateFormField(radios[1], { isSelected: true, thickness: 2, borderColor: 'black' }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Default RadioButton settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [RadioButtonFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#radiobuttonfieldsettings) to preconfigure RadioButton properties applied when adding fields from the Form Designer toolbar. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useEffect, useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + useEffect(() => { + if (viewerRef.current) { + viewerRef.current.radioButtonFieldSettings = { + name: 'RadioButton', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'RadioButton', + thickness: 4, + isSelected: true, + backgroundColor: 'white', + borderColor: 'black', + value: 'RadioButton' + }; + } + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## ListBox + +### Style ListBox + +Use the Properties panel to add or remove items, set the selected value, and adjust typography and colors. + +![ListBox style from UI](../../../javascript-es6/images/ui-listbox-style.png) + +### Style ListBox programmatically + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const fields = viewerRef.current?.retrieveFormFields?.() || []; + const lb = fields.find((f) => f.name === 'States'); + if (lb) { + viewerRef.current.formDesignerModule.updateFormField(lb, { + options: [ + { itemName: 'Item 1', itemValue: 'item1' }, + { itemName: 'Item 2', itemValue: 'item2' }, + { itemName: 'Item 3', itemValue: 'item3' } + ], + value: 'item2', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white' + }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Default ListBox settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [listBoxFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#listboxfieldsettings) to preconfigure ListBox properties applied when adding fields from the Form Designer toolbar. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useEffect, useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + useEffect(() => { + if (viewerRef.current) { + const customOptions = [ + { itemName: 'item1', itemValue: 'item1' }, + { itemName: 'item2', itemValue: 'item2' }, + { itemName: 'item3', itemValue: 'item3' } + ]; + viewerRef.current.listBoxFieldSettings = { + name: 'ListBox', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'ListBox', + thickness: 4, + value: 'ListBox', + fontFamily: 'Courier', + fontSize: 10, + fontStyle: 'None', + color: 'black', + borderColor: 'black', + backgroundColor: 'White', + alignment: 'Left', + options: customOptions + }; + } + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## DropDown + +### Style DropDown + +Use the Properties panel to add or remove items, set the default value, and adjust typography and colors. + +![DropDown style from UI](../../../javascript-es6/images/ui-dropdown-style.png) + +### Style DropDown programmatically + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const fields = viewerRef.current?.retrieveFormFields?.() || []; + const dd = fields.find((f) => f.name === 'Country'); + if (dd) { + viewerRef.current.formDesignerModule.updateFormField(dd, { + options: [ + { itemName: 'USA', itemValue: 'US' }, + { itemName: 'Canada', itemValue: 'CA' }, + { itemName: 'Mexico', itemValue: 'MX' } + ], + value: 'US', + fontFamily: 'Courier', + fontSize: 10, + color: 'black', + borderColor: 'black', + backgroundColor: 'white' + }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Default DropDown settings + +The PDF Viewer exposes default settings APIs for form fields. DropDown uses [DropDownFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#DropDownfieldsettings) to preconfigure properties applied when adding fields from the Form Designer toolbar. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useEffect, useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + useEffect(() => { + if (viewerRef.current) { + const ddOptions = [ + { itemName: 'item1', itemValue: 'item1' }, + { itemName: 'item2', itemValue: 'item2' }, + { itemName: 'item3', itemValue: 'item3' } + ]; + viewerRef.current.dropDownFieldSettings = { + name: 'DropDown', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'DropDown', + thickness: 4, + value: 'DropDown', + fontFamily: 'Courier', + fontSize: 10, + fontStyle: 'None', + color: 'black', + borderColor: 'black', + backgroundColor: 'White', + alignment: 'Left', + options: ddOptions + }; + } + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Signature field + +### Style Signature field + +Use the Properties panel to configure the tooltip, indicator text, dialog display modes, border thickness, required setting, and colors. + +![Signature style from UI](../../../javascript-es6/images/ui-signature-style.png) + +### Style Signature field programmatically + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const fields = viewerRef.current?.retrieveFormFields?.() || []; + const sig = fields.find((f) => f.name === 'Sign'); + if (sig) { + viewerRef.current.formDesignerModule.updateFormField(sig, { + tooltip: 'Please sign here', + thickness: 3, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Default Signature field settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [SignatureFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#signaturefieldsettings) to preconfigure Signature properties applied when adding fields from the Form Designer toolbar. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useEffect, useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + useEffect(() => { + if (viewerRef.current) { + viewerRef.current.signatureFieldSettings = { + name: 'Signature', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'Signature', + thickness: 4, + signatureIndicatorSettings: { + opacity: 1, + backgroundColor: '#237ba2', + height: 50, + fontSize: 15, + text: 'Signature Field', + color: 'white' + } + }; + } + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Initial field + +### Style Initial field + +Use the Properties panel to configure the tooltip, indicator text, dialog display modes, border thickness, and colors. + +![Initial style from UI](../../../javascript-es6/images/ui-initial-style.png) + +### Style Initial field programmatically + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const fields = viewerRef.current?.retrieveFormFields?.() || []; + const init = fields.find((f) => f.name === 'Initial'); + if (init) { + viewerRef.current.formDesignerModule.updateFormField(init, { + tooltip: 'Add your initials', + thickness: 2, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +### Default Initial field settings + +The PDF Viewer exposes default settings APIs for form fields. Use the [InitialFieldSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#initialfieldsettings) to preconfigure Initial properties applied when adding fields from the Form Designer toolbar. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useEffect, useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + useEffect(() => { + if (viewerRef.current) { + viewerRef.current.initialFieldSettings = { + name: 'Initial', + isReadOnly: false, + visibility: 'visible', + isRequired: false, + isPrint: true, + tooltip: 'Initial', + thickness: 4, + initialIndicatorSettings: { + opacity: 1, + backgroundColor: '#237ba2', + height: 50, + fontSize: 15, + text: 'Initial Field', + color: 'white' + } + }; + } + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Create form fields](./create-formfields) +- [Edit form fields](./edit-formfields) +- [Remove form fields](./remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/custom-data.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/custom-data.md new file mode 100644 index 000000000..06b8e6dc3 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/custom-data.md @@ -0,0 +1,221 @@ +--- +layout: post +title: Add custom data to form fields in React 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 React PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Add custom data to form fields + +You can associate arbitrary metadata with any form field using the customData property. This is useful for storing business IDs, validation hints, tags, or any app-specific information alongside the field. The data stays with the field object during the viewer session and can be accessed whenever you query or update fields. + +N> customData is a free-form object. You control both its shape and how it is used in your application. + +## Add custom data when creating fields (programmatically) + +Pass a customData object in the second parameter of addFormField. You can include any serializable values. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const meta = { businessId: 'C-1024', tags: ['profile', 'kiosk'], requiredRole: 'admin' }; + viewerRef.current?.formDesignerModule.addFormField('Textbox', { + name: 'Email', + bounds: { X: 146, Y: 229, Width: 200, Height: 24 }, + // Attach any custom metadata your app needs + customData: meta + }); + }; + + return ( +
+
+ + + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +N> To configure the server-backed PDF Viewer, set: +`viewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` + +## Set default custom data for UI-created fields + +When users add fields via the Form Designer toolbar, you can predefine default customData using the per-field settings objects. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + return ( +
+
+ + + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +You can do the same for other field types using passwordFieldSettings, checkBoxFieldSettings, radioButtonFieldSettings, listBoxFieldSettings, dropDownFieldSettings, signatureFieldSettings, and initialFieldSettings. + +## Update or replace custom data on existing fields + +Use updateFormField to set or modify the customData of any existing field (retrieved by object or ID). + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const updateFirstField = () => { + const fields = viewerRef.current?.formFieldCollection || []; + if (!fields.length) { return; } + const target = fields[0]; + viewerRef.current?.formDesignerModule.updateFormField(target, { + customData: { group: 'profile', flags: ['pii', 'masked'], updatedAt: Date.now() } + }); + }; + + return ( +
+
+ + + + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +Tip: You can merge new values with existing ones in your app code before calling updateFormField. + +## Read custom data + +You can read customData from any field at any time. Typical entry points: +- After document load +- On your own UI actions (save, validate, route, etc.) + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + const fields = viewerRef.current?.formFieldCollection || []; + fields.forEach((f) => { + console.log('Field', f.name, 'customData:', f.customData); + }); + }; + + return ( +
+
+ + + +
+
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Notes and best practices + +- Keep customData small and serializable (plain objects, arrays, numbers, strings, booleans). +- Treat customData as application metadata. Use it to drive business rules, validation, or routing in your app. +- When cloning or copying fields in your UI, also copy or adjust customData as needed. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Form constrain](./form-constrain) +- [Form validation](./form-validation) +- [Form fields API](./formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-constrain.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-constrain.md new file mode 100644 index 000000000..773e27e91 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-constrain.md @@ -0,0 +1,587 @@ +--- +layout: post +title: Form constraints in the React PDF Viewer component | Syncfusion +description: Learn how to configure form field constraints such as isReadOnly, isRequired, and isPrint in the Syncfusion React PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Form constraints in React PDF Viewer + +The PDF Viewer components provides support to control user interaction and output behavior of form fields using the following constraints: + +- isReadOnly: Prevents users from editing a field. +- isRequired: Marks a field as mandatory and participates in validation. +- isPrint: Includes the field appearance when printing or exporting with print. + +You can set these properties when you create fields, update them later programmatically, or configure default settings so fields created from the Form Designer toolbar inherit the values. + +## isReadOnly + +Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code. + +- Creation +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Creation + viewerRef.current?.formDesignerModule.addFormField('Textbox', { + name: 'EmployeeId', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 }, + isReadOnly: true, + value: 'EMP-0001' + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +- Update existing field +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Update existing field + const field = viewerRef.current?.formFieldCollection?.find(f => f.name === 'EmployeeId'); + if (field) { + viewerRef.current.formDesignerModule.updateFormField(field, { isReadOnly: false }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +- Default for new Textbox fields +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Default for new Textbox fields + if (viewerRef.current) { + viewerRef.current.textFieldSettings = { isReadOnly: true }; + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## isRequired + +Use `isRequired` to mark fields as mandatory so they participate in validation during print/download. Turn on validation with enableFormFieldsValidation and handle validateFormFields to block actions if required fields are empty. + +- Creation +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Creation + viewerRef.current?.formDesignerModule.addFormField('Textbox', { + name: 'Email', + bounds: { X: 146, Y: 260, Width: 220, Height: 24 }, + isRequired: true, + tooltip: 'Email is required' + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +- Validation wiring +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const onValidate = (args) => { + // validateFormFields event triggers when required fields are empty + alert('Please fill all required fields. Missing: ' + args.formField[0].name); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +- Default for new Textbox fields +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + if (viewerRef.current) { + viewerRef.current.textFieldSettings = { isRequired: true }; + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## isPrint + +Use `isPrint` to control whether a field’s appearance is included when printing the PDF from the viewer. + +- Creation (do not print a signature field) +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Creation (do not print a signature field) + viewerRef.current?.formDesignerModule.addFormField('SignatureField', { + name: 'ApplicantSign', + bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, + isPrint: false + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +- Update existing field +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Update existing field + const sign = viewerRef.current?.formFieldCollection?.find(f => f.name === 'ApplicantSign'); + if (sign) { + viewerRef.current.formDesignerModule.updateFormField(sign, { isPrint: true }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +- Default for new signature fields +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + if (viewerRef.current) { + viewerRef.current.signatureFieldSettings = { isPrint: false }; + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +N> Printing can be invoked programmatically using pdfviewer.print.print(); fields with isPrint: false will not appear in the print output. + +## Set constraints when creating a field + +Use `addFormField` to create fields and pass the constraint properties in the settings object. The example below adds a Textbox and a Signature field with different constraint combinations. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Read-only Textbox that is printed but not required + viewerRef.current?.formDesignerModule.addFormField('Textbox', { + name: 'EmployeeId', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 }, + isReadOnly: true, + isRequired: false, + isPrint: true, + value: 'EMP-0001' + }); + + // Required Signature field that is not included in print + viewerRef.current?.formDesignerModule.addFormField('SignatureField', { + name: 'ApplicantSign', + bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, + isReadOnly: false, + isRequired: true, + isPrint: false, + tooltip: 'Sign to accept the terms' + }); + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +N> To configure the server-backed PDF Viewer, add the following serviceUrl in React index.js: +{% tabs %} +{% highlight js tabtitle="index.js" %} + +{% endhighlight %} +{% endtabs %} + +## Update constraints programmatically + +Use `updateFormField` to change constraint flags of an existing field. The snippet below toggles isReadOnly, sets a field as required, and controls whether the field should appear when printing. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Add a sample textbox + viewerRef.current?.formDesignerModule.addFormField('Textbox', { + name: 'Email', + bounds: { X: 146, Y: 260, Width: 220, Height: 24 } + }); + + // Retrieve it and update constraint flags + const field = viewerRef.current?.formFieldCollection?.find(f => f.name === 'Email'); + if (field) { + viewerRef.current.formDesignerModule.updateFormField(field, { + isReadOnly: false, + isRequired: true, + isPrint: true, + tooltip: 'Enter a valid email' + }); + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Configure default constraints for newly added fields + +Set default settings so all fields created from the Form Designer toolbar inherit the constraint flags. + +The example below configures defaults for Textbox and Signature fields. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormDesigner, FormFields, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoad = () => { + // Textbox fields will be editable, required, and included in print by default + if (viewerRef.current) { + viewerRef.current.textFieldSettings = { + isReadOnly: false, + isRequired: true, + isPrint: true, + tooltip: 'Required field' + }; + + // Signature fields will be optional and hidden when printing + viewerRef.current.signatureFieldSettings = { + isReadOnly: false, + isRequired: false, + isPrint: false, + tooltip: 'Sign if applicable' + }; + } + }; + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Behavior notes + +- isReadOnly only blocks user edits in the UI. You can still update the field programmatically. +- isRequired participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details. +- isPrint controls field appearance in the print output. It does not affect download/export unless printing is triggered. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Add custom data to form fields](./custom-data) +- [Form validation](./form-validation) +- [Form fields API](./formfields-api) diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-filling.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-filling.md new file mode 100644 index 000000000..e0f3ed99b --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/form-filling.md @@ -0,0 +1,143 @@ +--- +layout: post +title: Form filling in React PDF Viewer Control | Syncfusion +description: Learn to view, fill, export, and import PDF form fields in Syncfusion TS PDF Viewer, including disabling interaction and handling signatures. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Form filling in React PDF Viewer + +The PDF Viewer displays existing form fields in a PDF and enables users to fill, validate, and download the filled data. + +The PDF Viewer supports the following form field types: + +* Text box +* Password +* Check box +* Radio button +* List box +* Dropdown +* Signature field +* Initial field + +![Form filling in React PDF Viewer](../../javascript-es6/images/form-filling.png) + +## Disabling form fields + +The PDF Viewer provides an option to disable interaction with form fields using `enableFormDesigner` API. Use the following configuration to disable form fields in the viewer. + + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + return (
+
+ + + +
+
); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Access interactive form fields + +You can access the collection of all interactive form fields in the loaded document using the `formFieldCollection` property. Fetch the collection after the document is loaded. + +Use the following code-snippet to access interactive form fields collection: + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + const viewerRef = useRef(null); + + const fetchFields = () => { + const fields = viewerRef.current?.formFieldCollection; // Gets all form fields + console.log(fields); // Log the formField collection + }; + return (
+
+ + + + +
+
); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Add a handwritten signature to a signature field + +Add a handwritten signature to a signature field by following these steps: + +* Click the signature field in the PDF document to open the signature panel. + +![Signature field in React PDF Viewer](../../javascript-es6/images/form-filling-signature.png) + +* Draw the signature in the signature panel. + +![Signature panel in React PDF Viewer](../../javascript-es6/images/form-filling-signature-dialog.png) + +* Select **CREATE**. The drawn signature is added to the signature field. + +![Signature added in React PDF Viewer](../../javascript-es6/images/form-filling-signature-signed.png) + +## Delete a signature from a signature field + +Delete a signature placed in a signature field by using the Delete option in the annotation toolbar. + +![Deleting a signature in React PDF Viewer](../../javascript-es6/images/form-filling-signature-del.png) + +## Export and import form fields + +The PDF Viewer supports exporting and importing form field data using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods. The following formats are supported: + +* FDF +* XFDF +* JSON + +For more information, see the [Form fields documentation](./import-export-formfields/export-formfields). + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Group form fields](./group-formfields) +- [Add custom data to form fields](./custom-data) +- [Form Constrain](./form-constrain) +- [Form validation](./form-validation) +- [Form fields API](./formfields-api) diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/group-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/group-formfields.md new file mode 100644 index 000000000..5fd4172bc --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/group-formfields.md @@ -0,0 +1,140 @@ +--- +layout: post +title: Group form fields in the React PDF Viewer component | Syncfusion +description: Learn how to group PDF form fields in the Syncfusion React PDF Viewer by assigning the same name to multiple widgets. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Group form fields in React PDF Viewer + +In PDF forms, multiple widgets can represent the same logical form field. The Syncfusion PDF Viewer supports grouping form fields by assigning the same Name to multiple widgets. Grouped widgets mirror their values and states based on the field type. + +Key behavior when fields share the same Name: + +- Textbox and Password: Text entered in one widget appears in all widgets with the same name. +- CheckBox: Checking one widget checks all widgets with the same name (mirrored state). +- RadioButton: Widgets with the same name are grouped; only one radio button in the group can be selected at a time. +- ListBox and DropDown: The selected item is shared across widgets with the same name. +- Signature field and Initial field: The applied signature/initial is mirrored across widgets with the same name. + +N> Grouping is driven solely by the Name property. Bounds determine placement; name determines grouping. + +## Group with the user interface + +Use the Form Designer toolbar and set the same Name for multiple widgets to group them. + +Quick steps: + +1. Enable the Form Designer toolbar. +2. Draw the desired fields (e.g., two Textbox widgets or multiple RadioButton widgets). +3. Right‑click a field > Properties, and set the same Name on each widget you want to group. +4. Apply and test: editing one grouped widget reflects in the others. + +Textboxes and Password fields (shared value) +- Give both widgets the same Name to mirror the typed value across them. + +![Grouping textboxes with the same name](../../javascript-es6/images/groupTextFileds.png) + +Radio buttons (exclusive choice within a group) +- Add radio buttons that share the same Name to create one group; only one can be selected at a time. + +![Grouping radio buttons with the same name](../../javascript-es6/images/groupRadiobutton.png) + +## Group programmatically + +Assign the same name when adding fields via code. The following example shows: + +- Two Textbox widgets named EmployeeId that mirror values. +- A RadioButton group named Gender with exclusive selection. +- Two CheckBox widgets named Subscribe that mirror checked state. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef, useCallback } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + const viewerRef = useRef(null); + + const onDocumentLoaded = useCallback(() => { + const viewer = viewerRef.current; + if (!viewer || !viewer.formDesignerModule) return; + + // Textbox group: same name => mirrored value + viewer.formDesignerModule.addFormField('Textbox', { + name: 'EmployeeId', + bounds: { X: 146, Y: 229, Width: 150, Height: 24 } + }); + + viewer.formDesignerModule.addFormField('Textbox', { + name: 'EmployeeId', // same name groups the two widgets + bounds: { X: 338, Y: 229, Width: 150, Height: 24 } + }); + + // Radio button group: same name => exclusive selection across the group + viewer.formDesignerModule.addFormField('RadioButton', { + name: 'Gender', + bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, + isSelected: false + }); + + viewer.formDesignerModule.addFormField('RadioButton', { + name: 'Gender', // grouped with the first + bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, + isSelected: false + }); + + // CheckBox group: same name => mirrored checked state + viewer.formDesignerModule.addFormField('CheckBox', { + name: 'Subscribe', + bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, + isChecked: false + }); + + viewer.formDesignerModule.addFormField('CheckBox', { + name: 'Subscribe', // grouped with the first + bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, + isChecked: false + }); + }, []); + + return ( +
+ + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +N> To configure the server-backed PDF Viewer, add the following serviceUrl in the index.js file by setting the serviceUrl property on PdfViewerComponent: +`serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/"` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Form Designer overview](./overview) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Add custom data to form fields](./custom-data) +- [Form Constrain](./form-constrain) +- [Form fields Validation](./form-validation) +- [Form fields API](./formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/export-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/export-formfields.md new file mode 100644 index 000000000..a4d51d005 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/export-formfields.md @@ -0,0 +1,211 @@ +--- +layout: post +title: Export form data in the React PDF Viewer component | Syncfusion +description: Learn how to export PDF form field data (FDF, XFDF, JSON, and as an object) using the Syncfusion React PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Export form data from PDF in React + +The PDF Viewer component supports exporting and importing form field data using the importFormFields, exportFormFields, and exportFormFieldsAsObject methods in the following formats: + +- FDF +- XFDF +- JSON + +## Export as FDF + +Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters: + +* The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting. +* The second parameter should be the format type of the form data. + +The following example exports and imports form field data as FDF. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + + const onExportFdf = () => { + // Data must be the desired path or file name for the exported document. + viewerRef.current?.exportFormFields('ExportedData', FormFieldDataFormat.Fdf); + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Export as XFDF + +The following example exports form field data as XFDF. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + + const onExportXfdf = () => { + // Data must be the desired path or file name for the exported document. + viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Xfdf); + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Export as JSON + +The following example exports form field data as JSON. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + + const onExportJson = () => { + // Data must be the desired path or file name for the exported document. + viewerRef.current?.exportFormFields('FormData', FormFieldDataFormat.Json); + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Export as Object + +Export the form data to a JavaScript object for custom persistence (database, API, or client storage). +The following example exports and imports form field data as Object. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, TextSelection, Annotation, FormFields, FormDesigner, Inject, FormFieldDataFormat } from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + + const onExportObject = async () => { + const data = await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Fdf); + // Save or send to server + console.log('Exported object:', data); + + // Alternative formats: + // await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf); + // await viewerRef.current?.exportFormFieldsAsObject(FormFieldDataFormat.Json); + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Common use cases + +- Persist user-entered data to your server without modifying the original PDF. +- Export as JSON for easy integration with REST APIs. +- Export as FDF/XFDF for interoperability with other PDF tools. +- Export as object to combine with your app state and store securely. +- Automate exports after validation using validateFormFields. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Import form fields](./import-formfields) +- [Import Export Events](./import-export-events) +- [Create form fields](../Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields) +- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-export-events.md new file mode 100644 index 000000000..ec63401cf --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-export-events.md @@ -0,0 +1,70 @@ +--- +layout: post +title: Import/Export events in the React PDF Viewer | Syncfusion +description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion React PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Import/Export events in React + +Import/Export events let you track and customize the full lifecycle of form field data flowing into and out of the PDF Viewer. + +Use them to validate inputs, show progress UI, log audit trails, or block operations based on your business rules. Each event exposes typed event-args (ImportStartEventArgs, ImportSuccessEventArgs, ImportFailureEventArgs, ExportStartEventArgs, ExportSuccessEventArgs, ExportFailureEventArgs) describing the operation context. + +Use these events to monitor and customize form field import/export operations. + +## Import events +- [importStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts. +- [importSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importsuccess): Triggers when form fields are successfully imported. +- [importFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing form fields fails. + +## Handle import events +```js +viewer.importStart = (args: any) => { + console.log('Import started', args); +}; +viewer.importSuccess = (args: any) => { + console.log('Import success', args); +}; +viewer.importFailed = (args: any) => { + console.error('Import failed', args); +}; +``` + +## Export events +- [exportStart](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts. +- [exportSuccess](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportsuccess ): Triggers when form fields are successfully exported. +- [exportFailed](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting form fields fails. + +## Handle export events +```js +viewer.exportStart = (args: any) => { + console.log('Export started', args); +}; +viewer.exportSuccess = (args: any) => { + console.log('Export success', args); +}; +viewer.exportFailed = (args: any) => { + console.error('Export failed', args); +}; +``` + +Notes: +- importStart/importSuccess/importFailed cover the lifecycle of form field imports. +- exportStart/exportSuccess/exportFailed cover the lifecycle of form field exports. + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Import form fields](./import-formfields) +- [Import Export Events](./import-export-events) +- [Create form fields](../Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields) +- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-formfields.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-formfields.md new file mode 100644 index 000000000..0ca13a1d5 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/import-export-formfields/import-formfields.md @@ -0,0 +1,272 @@ +--- +layout: post +title: Import form data in the React PDF Viewer component | Syncfusion +description: Learn how to import PDF form field data (FDF, XFDF, JSON, and from an object) using the Syncfusion React PDF Viewer component. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Import form data into PDF in React + +The PDF Viewer provides APIs to import interactive form field values into the currently loaded PDF. You can import from the following formats: + +- FDF +- XFDF +- JSON + +Supported API: +- importFormFields(sourceOrObject, format) + +Note: When using the server-backed viewer, set serviceUrl before importing. + +## Import as FDF + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + Annotation, + LinkAnnotation, + ThumbnailView, + BookmarkView, + TextSelection, + FormFields, + FormDesigner, + Inject, + FormFieldDataFormat +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + + const importFdf = () => { + // The file for importing should be accessible at the given path or as a file stream depending on your integration + viewerRef.current?.importFormFields('File', FormFieldDataFormat.Fdf); + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Import as XFDF + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + Annotation, + LinkAnnotation, + ThumbnailView, + BookmarkView, + TextSelection, + FormFields, + FormDesigner, + Inject, + FormFieldDataFormat +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + + const importXfdf = () => { + // The file for importing should be accessible at the given path or as a file stream depending on your integration + viewerRef.current?.importFormFields('File', FormFieldDataFormat.Xfdf); + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Import as JSON + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef } from 'react'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + Annotation, + LinkAnnotation, + ThumbnailView, + BookmarkView, + TextSelection, + FormFields, + FormDesigner, + Inject, + FormFieldDataFormat +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + + const importJson = () => { + // The file for importing should be accessible at the given path or as a file stream depending on your integration + viewerRef.current?.importFormFields('File', FormFieldDataFormat.Json); + }; + + return ( +
+ + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Import as Object + +Import data previously exported with exportFormFieldsAsObject. Useful for client-side roundtrips without writing a file. + +{% tabs %} +{% highlight js tabtitle="index.js" %} +import * as ReactDOM from 'react-dom/client'; +import React, { useRef, useState } from 'react'; +import './index.css'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + Annotation, + LinkAnnotation, + ThumbnailView, + BookmarkView, + TextSelection, + FormFields, + FormDesigner, + Inject, + FormFieldDataFormat +} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + const viewerRef = useRef(null); + const [exportedData, setExportedData] = useState(null); + + const exportDataAsObject = async () => { + if (viewerRef.current) { + const data = await viewerRef.current.exportFormFieldsAsObject(FormFieldDataFormat.Fdf); + setExportedData(data); + } + }; + + const importData = () => { + if (viewerRef.current && exportedData) { + // Import the previously exported object data + viewerRef.current.importFormFields(exportedData, FormFieldDataFormat.Fdf); + // Alternatives: + // viewerRef.current.importFormFields(exportedData, FormFieldDataFormat.Xfdf); + // viewerRef.current.importFormFields(exportedData, FormFieldDataFormat.Json); + } + }; + + return ( +
+ + + + + +
+ ); +} + +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +## Common use cases + +- Pre-fill application forms from your database using JSON. +- Migrate data from other PDF tools using FDF/XFDF. +- Restore user progress stored locally or on the server using object import. +- Combine with validation to block print/download until required fields are filled. + +[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Export form fields](./export-formfields) +- [Import Export Events](./import-export-events) +- [Create form fields](../Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](../Create-edit-Style-del-formFields//edit-formfields) +- [Remove form fields](../Create-edit-Style-del-formFields//remove-formfields) +- [Group form fields](../group-formfields) +- [Form validation](../form-validation) +- [Add custom data to form fields](../custom-data) +- [Form fields API](../formfields-api) \ No newline at end of file diff --git a/Document-Processing/PDF/PDF-Viewer/react/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/react/form-designer/overview.md new file mode 100644 index 000000000..1b9bd5dd8 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/form-designer/overview.md @@ -0,0 +1,66 @@ +--- +layout: post +title: Overview of Forms in React PDF Viewer Control | Syncfusion +description: Learn what the Form Designer in Syncfusion React PDF Viewer offers, supported field types, and how the topics are organized. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Overview of Forms in React PDF Viewer + +Syncfusion React PDF Viewer provides a complete forms experience. Design new forms or enhance existing PDFs, fill and validate fields, import or export data, and capture signatures — all via an intuitive UI and rich APIs. + +Check the following video to learn how to work with form Designer in React PDF Viewer. +{% youtube "https://www.youtube.com/watch?v=MUWTCg1MoAE" %} + +## Form Designer + +Create and customize interactive fields directly on the PDF page. +- Add fields: textbox, checkbox, radio button, dropdown, list box, signature, and initials +- Edit quickly: move, resize, align, distribute, copy/paste, undo/redo +- Configure properties: name, value, font, color, border, alignment, required/read-only/visibility, tab order +- Manage fields: select, group/ungroup, reorder, or delete +- Save and print: persist designed fields in the PDF and print with appearances +- Tailor the UI: show/hide or customize the Form Designer toolbar, and handle events for add/edit/select/move/resize + +## Form Fields + +Work with the runtime form fields present in a PDF (AcroForm). +- Parse and render existing fields +- Fill fields and validate input (required, read-only, print visibility) +- Import/Export form data as JSON, XFDF, FDF, or as a plain object +- Control interaction: toggle read-only, show/hide, and manage printing behavior + +## Supported form field types + +- Textbox +- Password +- CheckBox +- RadioButton +- ListBox +- DropDown +- Signature field +- Initial field + +## Typical workflows + +- Design → Save → Fill: create or modify fields, save them into the PDF, then fill and validate +- Fill → Export/Import: complete forms and export data to JSON/XFDF/FDF, or import data to prefill +- Customize → Integrate: wire up events and business rules; tailor the designer toolbar for your app + +## See also + +- [Form filling](./form-filling) +- [Form Designer Toolbar](../toolbar-customization/form-designer-toolbar) +- [Create form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form fields](./Create-edit-Style-del-formFields/edit-formfields) +- [Style form fields](./Create-edit-Style-del-formFields/style-formfields) +- [Group form fields](./group-formfields) +- [Form constraints](./form-constrain) +- [Form validation](./form-validation) +- [Form Fields API](./formfields-api) +- [Custom data on form fields](./custom-data) +- [Import form data](./import-export-formfields/import-formfields) +- [Export form data](./import-export-formfields/export-formfields) +- [Import/Export events](./import-export-formfields/import-export-events) From b03be5df049dc0c042e3e795afb3b7866aeacfa5 Mon Sep 17 00:00:00 2001 From: MuralidharanGSF4527 Date: Mon, 12 Jan 2026 19:11:19 +0530 Subject: [PATCH 2/4] 1001841: revamped forms UG documentations --- Document-Processing-toc.html | 31 +- .../create-formfields.md | 64 +- .../edit-formfields.md | 48 +- .../remove-formfields.md | 6 +- .../style-formfields.md | 16 +- .../react/form-designer/form-constrain.md | 16 +- .../react/form-designer/form-designer.md | 140 +++ .../react/form-designer/form-field-events.md | 50 +- .../react/form-designer/form-filling.md | 56 +- .../react/form-designer/form-validation.md | 257 +++++ .../react/form-designer/formfields-api.md | 911 ++++++++++++++++++ .../react/form-designer/group-formfields.md | 10 +- .../export-formfields.md | 8 +- .../import-formfields.md | 8 +- .../react/form-designer/overview.md | 112 ++- 15 files changed, 1582 insertions(+), 151 deletions(-) create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/form-designer.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/form-validation.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/form-designer/formfields-api.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 9c0aa43dc..cd7f14e5c 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -901,16 +901,35 @@
  • Interaction Mode
    • -
  • Form Designer +
  • Forms
    • -
  • Form Filling
  • Organize Pages