From 18cc607449141538b6cc95e2a2ebc4d894aa69e9 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Fri, 23 Jan 2026 12:31:20 +0530 Subject: [PATCH 1/8] 1004880: Updated API links and aligned code-snippet. --- .../form-designer/form-designer.md | 50 +++++++++++-------- .../form-designer/form-filling.md | 33 ++++++++---- .../javascript-es6/form-designer/overview.md | 14 ++++-- 3 files changed, 61 insertions(+), 36 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md index ba1685dca..07249f808 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-designer.md @@ -10,11 +10,11 @@ domainurl: ##DomainURL## # Form Designer in TypeScript PDF Viewer -When `Form Designer mode` is enabled in the Syncfusion `TypeScript PDF Viewer`, a default `Form Designer user interface (UI)` is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields. +When [Form Designer mode](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [TypeScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI includes a built in toolbar for adding form fields such as text boxes, password fields, check boxes, radio buttons, drop down lists, list boxes, and signature and initial fields. Using the Form Designer UI, users can place form fields on the PDF, move and resize them, configure field and widget properties, preview the designed form, and remove fields when required. The Form Designer toolbar can also be shown or hidden and customized to control the available tools based on application requirements, enabling flexible and interactive form design directly within the viewer. -**Key Features** +## Key Features **Add Form Fields** You can add the following form fields to the PDF: @@ -45,11 +45,14 @@ Designed form fields can be saved into the PDF document and printed with their a ## Enable Form Designer -To enable form design features, inject the `FormDesigner` module into the PDF Viewer. After injecting the module, use the `enableFormDesigner` API to show or hide the Form Designer option in the main toolbar. +To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar. ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, + ThumbnailView, BookmarkView, TextSelection, TextSearch, + FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; @@ -59,19 +62,17 @@ pdfviewer.appendTo('#PdfViewer'); ## Form Designer UI -When `Form Designer mode` is enabled in the Syncfusion `TypeScript PDF Viewer`, a default `Form Designer user interface (UI)` is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer. +When [Form Designer mode](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [TypeScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) is displayed. This UI provides a built in toolbar for adding common form fields such as text boxes, check boxes, radio buttons, drop down lists, and signature fields. Users can place fields on the PDF, select them, resize or move them, and configure their properties using the available editing options, enabling interactive form creation directly within the viewer. ![FormDesigner](../images/FormDesigner.gif) -**Preview of the designed PDF form** - -![Forms with Filled sample Data](../images/FormFilled.png) +{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in TypeScript PDF Viewer documentation](./Create-edit-Style-del-formFields/create-formfields). ## Form Designer Toolbar -The `Form Designer toolbar` appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as: +The [Form Designer toolbar](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesignertoolbarsettings) appears at the top of the PDF Viewer and provides quick access to form field creation tools. It includes frequently used field types such as: - [Text box](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-textbox) - [Password Field](../form-designer/Create-edit-Style-del-formFields/create-formfields#add-password) @@ -84,16 +85,17 @@ The `Form Designer toolbar` appears at the top of the PDF Viewer and provides qu Each toolbar item allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document. -**GIF – Adding a text box field using the Form Designer toolbar** - ![Adding Text Box](../images/AddTextBox.gif) -Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module. +Use the following Code-snippet to enable Form Designer by injecting [Form Designer mode](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesigner) Module. ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, TextSearch, +FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; @@ -105,7 +107,7 @@ For more information about creating and editing form fields in the PDF Viewer, r ## Show or Hide the Built-in Form Designer Toolbar -You can control the visibility of the Form Designer toolbar using the `isFormDesignerToolbarVisible()` method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. +You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This allows you to display or hide the Form Designer tools in the PDF Viewer based on your application requirements. **Use this method to:** - Show the Form Designer toolbar when form design is required @@ -119,8 +121,11 @@ You can control the visibility of the Form Designer toolbar using the `isFormDes ``` ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, + ThumbnailView, BookmarkView, TextSelection, TextSearch, + FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; @@ -137,7 +142,7 @@ document.getElementById('hideDesignerBtn')!.onclick = () => { ## Customize the Built-in Form Designer Toolbar -You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the `FormDesignerToolbarItems` property. +You can customize the Form Designer toolbar by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://ej2.syncfusion.com/documentation/api/pdfviewer/formdesignertoolbaritem) property. This customization helps you limit the available tools and simplify the user interface. @@ -146,8 +151,11 @@ This customization helps you limit the available tools and simplify the user int - Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI. ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, + ThumbnailView, BookmarkView, TextSelection, TextSearch, + FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md index 9ef60506d..92c3d60df 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/form-filling.md @@ -14,7 +14,7 @@ The Syncfusion PDF Viewer supports three types of form-filling: 1. [Filling Form Fields Programmatically](#fill-pdf-forms-programmatically) - You can fill or update PDF form fields programmatically using the updateFormFieldsValue APIs. This approach is useful when form data needs to be set dynamically based on application logic. + You can fill or update PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) APIs. This approach is useful when form data needs to be set dynamically based on application logic. 2. [Form Filling Through User Interface](#fill-pdf-forms-through-the-user-interface) @@ -26,7 +26,7 @@ The Syncfusion PDF Viewer supports three types of form-filling: ## Fill PDF forms programmatically -You can update the values of PDF form fields programmatically using the updateFormFieldsValue API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction. +You can update the values of PDF form fields programmatically using the [updateFormFieldsValue](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfieldsvalue) API. This method allows you to set or modify form field values dynamically based on application logic, without user interaction. The following example demonstrates how to update PDF form field values programmatically: @@ -34,9 +34,12 @@ The following example demonstrates how to update PDF form field values programma ``` ```ts -import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormFields} from '@syncfusion/ej2-pdfviewer'; +import {PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, +Annotation, FormFields} from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormFields); +PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, Annotation, FormFields); let pdfviewer: PdfViewer = new PdfViewer({ documentPath: @@ -77,7 +80,7 @@ The PDF Viewer supports common form fields such as text boxes, check boxes, radi ## Fill PDF forms through Import Data -The Syncfusion PDF Viewer allows you to import form field data into an existing PDF document using the `importFormFields` API. This feature enables you to pre-fill form fields using data from an external source without requiring manual user input. +The Syncfusion PDF Viewer allows you to import form field data into an existing PDF document using the [importFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#importformfields) API. This feature enables you to pre-fill form fields using data from an external source without requiring manual user input. Imported form field data is automatically mapped to the corresponding form fields in the PDF document based on the field names. Once the data is imported, the populated values are displayed in the PDF Viewer and can be edited through the user interface if required. @@ -86,9 +89,13 @@ Imported form field data is automatically mapped to the corresponding form field
``` ```ts -import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; +import { PdfViewer, FormFieldDataFormat, Toolbar, Magnification, Navigation, +Annotation, LinkAnnotation, ThumbnailView, BookmarkView, +TextSelection, FormFields, FormDesigner } from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, FormFields, FormDesigner); +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, +LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, +FormFields, FormDesigner); const viewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', @@ -113,15 +120,19 @@ For more details, see [Export Form Data](./import-export-formfields/export-formf ## How to Validate Form Fields using `validateFormFields` Event -The `validateFormFields` event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the `retrieveFormFields()` API to get all the form fields and check them one by one to see if any form fields values are empty. +The [validateFormFields](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#validateformfields) event in the Syncfusion PDF Viewer is triggered when a user tries to download or submit a form while validation is enabled. You can use the [retrieveFormFields()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#retrieveformfields) API to get all the form fields and check them one by one to see if any form fields values are empty. This validation applies to all form field types in the PDF Viewer. A textbox is empty if no text is entered, a list box or dropdown is empty if no item is selected, a signature or initial field is empty if the user has not signed, and radio buttons or checkboxes are empty if none are chosen. -By enabling `enableFormFieldsValidation` and wiring the event, you can go through each field and stop the action if required fields are not filled. +By enabling [enableFormFieldsValidation](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enableformfieldsvalidation) and wiring the event, you can go through each field and stop the action if required fields are not filled. ```ts -import {PdfViewer, Toolbar, Magnification, Navigation,LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation,FormDesigner, FormFields,TextFieldSettings} from '@syncfusion/ej2-pdfviewer'; +import {PdfViewer, Toolbar, Magnification, Navigation,LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, Annotation, +FormDesigner, FormFields,TextFieldSettings} from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation,LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation,FormDesigner, FormFields); +PdfViewer.Inject(Toolbar, Magnification, Navigation,LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, Annotation, +FormDesigner, FormFields); let pdfviewer: PdfViewer = new PdfViewer({ documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md index bdae620e7..4151dbef6 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview.md @@ -22,8 +22,11 @@ See the [Filling PDF Forms](./form-filling) page for full details. Use the following code-snippet to enable form-filling by injecting `FormFields` Module. ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields} from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields); +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, + ThumbnailView, BookmarkView, TextSelection, + TextSearch, FormFields} from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, +ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields); let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; @@ -45,8 +48,11 @@ See the [Form Designer](./form-designer) page for full details. Use the following Code-snippet to enable Form Designer by injecting `FormDesigner` Module. ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); +import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, + ThumbnailView, BookmarkView, TextSelection, TextSearch, + FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; +PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, + ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); let pdfviewer: PdfViewer = new PdfViewer(); pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; From 4b4766b4d118b25aa7144db3c30599f8e391dc3c Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 28 Jan 2026 13:40:34 +0530 Subject: [PATCH 2/8] 1004880: Updated Create Edit Style form fields in TS --- Document-Processing-toc.html | 7 +- .../create-formfields.md | 420 +++++++----------- .../customize-formfields.md | 87 ++++ .../edit-formfields.md | 419 ----------------- .../modify-formfields.md | 296 ++++++++++++ .../move-resize-formfields.md | 51 +++ .../remove-formfields.md | 68 +-- .../form-designer/overview-create-forms.md | 20 + 8 files changed, 625 insertions(+), 743 deletions(-) create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/customize-formfields.md delete mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/modify-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/move-resize-formfields.md create mode 100644 Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview-create-forms.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 7037aca58..8521b9a72 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1578,11 +1578,12 @@
  • Overview
  • Fill form fields
  • Form Designer and Toolbar
    • -
  • Create, Edit, Style and Remove Form Fields +
  • Create, Edit, Style and Remove Form Fields
    • diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md index 3884ad3e4..0548e804e 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md @@ -7,345 +7,239 @@ control: PDF Viewer documentation: ug --- -# Create form fields in TypeScript PDF Viewer +# Create PDF Form Fields in TypeScript -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. +You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or dynamically using APIs. -The PDF Viewer supports the following form field types: +## Create Form Fields Using the Form Designer UI +Use this approach when you want to design forms manually without writing code. -- [Textbox](#add-textbox) -- [Password](#add-password) -- [CheckBox](#add-checkbox) -- [RadioButton](#add-radiobutton) -- [ListBox](#add-listbox) -- [DropDown](#add-dropdown) -- [Signature field](#signature-field) -- [Initial field](#add-initial-field) +**Steps:** -## Add the form field dynamically +1. Enable [Form Designer](../form-designer) mode in the PDF Viewer. +2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar. +3. Click on the PDF page to place the form field. +4. Move or resize the field as required. +5. Configure field properties using the **Properties** panel. -Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference. +![Adding a form field using the Form Designer UI](../../images/FormDesigner.gif) -![Add a form field using the toolbar](../../images/addformfield.gif) +## Add Form Fields Programmatically (API) -## 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 - -- Open the Form Designer toolbar. -- Select Textbox, then click/tap on the page to place it. -- Resize/move as needed and set properties in the property panel. - -![Textbox added from UI](../../images/ui-textbox.png) - -### Add Textbox Programmatically - -To add a Textbox programmatically, call addFormField with type 'Textbox' and pass as `TextFieldSettings` object. The example below adds a textbox when the document loads. +Use this approach when you want to generate form fields dynamically based on data or application logic. ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = () => { - pdfviewer.formDesignerModule.addFormField('Textbox', { +//Add Text Box using addFormField Method +pdfviewer.formDesignerModule.addFormField('Textbox', { name: 'First Name', - bounds: { X: 146, Y: 229, Width: 150, Height: 24 } + bounds: { X: 146, Y: 229, Width: 150, Height: 24 }, + pageNumber: 1, + isRequired: true, + tooltip: 'Enter your first name' } as TextFieldSettings); -}; ``` -## Password - -### Add Password +**Use programmatic creation when:** -- Open the Form Designer toolbar. -- Select Password, then place it on the page. -- Configure tooltip, required, max length, etc. +- Building dynamic forms +- Prefilling forms from databases +- Automating form creation workflows -![Password added from UI](../../images/ui-password.png) +## PDF Form Field Types and How to Add Them +Each field can be added via the **Form Designer** or **programmatically**. -### Add Password Programmatically +### Textbox -To add a Password field programmatically, call addFormField with type 'Password' and pass as `PasswordFieldSettings` object. The example below adds the field when the document loads. +**Add via Toolbar (UI)** +- Open **Form Designer** → select **Textbox** → click on the page → configure in **Properties**. +![Textbox properties panel](../../images/ui-textbox-edit.png) +**Add Programmatically (API)** ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = () => { - pdfviewer.formDesignerModule.addFormField('Password', { - name: 'Account Password', - bounds: { X: 148, Y: 270, Width: 180, Height: 24 } - } as PasswordFieldSettings); -}; +//Add Text Box using addFormField Method +pdfviewer.formDesignerModule.addFormField('Textbox', { + name: 'FirstName', + pageNumber: 1, + bounds: { X: 100, Y: 150, Width: 200, Height: 24 }, + isRequired: true, + tooltip: 'Enter your first name', + maxLength: 40 +} as TextFieldSettings); ``` -## CheckBox - -### Add CheckBox - -- Choose CheckBox in the Form Designer toolbar. -- Click on the page to place, duplicate for multiple options if needed. -- Use property panel to set IsChecked, tooltip, and appearance. +### Password -![CheckBox added from UI](../../images/ui-checkbox.png) - -### Add CheckBox Programmatically - -To add a CheckBox programmatically, call `addFormField` with type 'CheckBox' and pass as `CheckBoxFieldSettings` object. Set isChecked and bounds as needed. The example below adds the field when the document loads. +**Add via Toolbar (UI)** +- Select **Password** → place it → configure tooltip, required, max length. +![Password Properties Panel](../../images/ui-password-edit.png) +**Add Programmatically (API)** ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; +//Add Password Field using addFormField Method +pdfviewer.formDesignerModule.addFormField('Password', { + name: 'AccountPassword', + pageNumber: 1, + bounds: { X: 100, Y: 190, Width: 200, Height: 24 }, + isRequired: true, + maxLength: 32, + tooltip: 'Enter a secure password', +} as PasswordFieldSettings); +``` -pdfviewer.appendTo('#PdfViewer'); +### CheckBox +**Add via Toolbar (UI)** +- Select **CheckBox** → click to place → duplicate for options → set isChecked, tooltip, appearance. +![CheckBox Properties Panel](../../images/ui-checkbox-edit.png) -pdfviewer.documentLoad = () => { +**Add Programmatically (API)** +```ts +//Add CheckBox Field using addFormField Method pdfviewer.formDesignerModule.addFormField('CheckBox', { - name: 'Subscribe', + name: 'AgreeTerms', + pageNumber: 1, + bounds: { X: 100, Y: 230, Width: 18, Height: 18 }, isChecked: false, - bounds: { X: 56, Y: 664, Width: 20, Height: 20 } + tooltip: 'I agree to the terms', } as CheckBoxFieldSettings); -}; ``` -## RadioButton - -### Add RadioButton - -- Select RadioButton in the Form Designer toolbar. -- Place buttons sharing the same Name to create a group (e.g., Gender). -- Use property panel to set selection, colors, and tooltip. - -![Radio buttons added from UI](../../images/ui-radiobutton.png) - -### Add RadioButton Programmatically - -To add radio buttons programmatically, call addFormField with type 'RadioButton' and pass as `RadioButtonFieldSettings` object. Use the same name to group buttons. The example below adds two radio buttons when the document loads. +### RadioButton +**Add via Toolbar (UI)** +- Select **RadioButton** → place buttons with the **same Name** to group → configure selection/colors. +![Radio Button Properties Panel](../../images/ui-radiobutton-edit.png) +**Add Programmatically (API)** ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = () => { - // Group by name: 'Gender' +//Add RadioButtons using addFormField Method pdfviewer.formDesignerModule.addFormField('RadioButton', { name: 'Gender', - isSelected: false, - bounds: { X: 148, Y: 289, Width: 18, Height: 18 } + value: 'Male', + pageNumber: 0, + bounds: { X: 100, Y: 270, Width: 16, Height: 16 } } as RadioButtonFieldSettings); - - pdfviewer.formDesignerModule.addFormField('RadioButton', { + pdfviewer.formDesignerModule.addFormField('RadioButton', { name: 'Gender', - isSelected: false, - bounds: { X: 292, Y: 289, Width: 18, Height: 18 } + value: 'Female', + pageNumber: 0, + bounds: { X: 160, Y: 270, Width: 16, Height: 16 } } as RadioButtonFieldSettings); -}; ``` -## ListBox - -### Add ListBox - -- Choose ListBox in the Form Designer toolbar. -- Place the field and add items in the property panel. -- Configure font, size, and selection behavior. - -![ListBox added from UI](../../images/ui-listbox.png) - -### Add ListBox Programmatically - -To add a ListBox programmatically, call `addFormField` with type 'ListBox' and pass as `ListBoxFieldSettings` object, including an options array for the items. The example below adds the field when the document loads. +### ListBox +**Add via Toolbar (UI)** +- Select **ListBox** → place → add items in **Properties**. +![ListBox Properties Panel](../../images/ui-listbox-edit.png) +**Add Programmatically (API)** ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, ListBoxFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = () => { - const options = [ - { itemName: 'Item 1', itemValue: 'item1' }, - { itemName: 'Item 2', itemValue: 'item2' }, - { itemName: 'Item 3', itemValue: 'item3' } - ]; - - pdfviewer.formDesignerModule.addFormField('ListBox', { +//Add ListBox using addFormField Method + const option = [ + { itemName: 'Item 1', itemValue: 'item1' }, + { itemName: 'Item 2', itemValue: 'item2' }, + { itemName: 'Item 3', itemValue: 'item3' } + ]; + pdfviewer.formDesignerModule.addFormField('ListBox', { name: 'States', - options, - bounds: { X: 380, Y: 320, Width: 150, Height: 60 } + pageNumber: 1, + bounds: { X: 100, Y: 310, Width: 220, Height: 70 }, + options: option, } as ListBoxFieldSettings); -}; ``` -## DropDown - -### Add DropDown - -- Select DropDown in the Form Designer toolbar. -- Place the field, then add items via the property panel. -- Adjust appearance and default value. - -![DropDown added from UI](../../images/ui-dropdown.png) - -### Add DropDown Programmatically - -To add a DropDown programmatically, call addFormField with type 'DropDown' and pass a `DropdownFieldSettings` object with an options array. The example below adds the field when the document loads. +### DropDown +**Add via Toolbar (UI)** +- Select **DropDown** → place → add items → set default value. +![DropDown Properties Panel](../../images/ui-dropdown-edit.png) +**Add Programmatically (API)** ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = () => { +//Add DropDown using addFormField Method const options = [ { itemName: 'Item 1', itemValue: 'item1' }, { itemName: 'Item 2', itemValue: 'item2' }, - { itemName: 'Item 3', itemValue: 'item3' } + { itemName: 'Item 3', itemValue: 'item3' }, ]; pdfviewer.formDesignerModule.addFormField('DropDown', { name: 'Country', options, - bounds: { X: 560, Y: 320, Width: 150, Height: 24 } + bounds: { X: 560, Y: 320, Width: 150, Height: 24 }, } as DropdownFieldSettings); -}; ``` -## Signature field - -### Add Signature field - -- Select Signature field in the Form Designer toolbar. -- Place the field where the signer should sign. -- Configure indicator text, thickness, tooltip, and required state. - -![Signature field added from UI](../../images/ui-signature.png) - -### Add Signature field Programmatically - -To add a Signature field programmatically, call addFormField with type 'SignatureField' and pass a `SignatureFieldSettings` object. The example below adds the field when the document loads. +### Signature Field +**Add via Toolbar (UI)** +- Select **Signature Field** → place where signing is required → configure indicator text, thickness, tooltip, required. +![Signature Field](../../images/ui-signature-edit.png) +**Add Programmatically (API)** ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = () => { +//Add Signature Field using addFormField Method pdfviewer.formDesignerModule.addFormField('SignatureField', { name: 'Sign', - bounds: { X: 57, Y: 923, Width: 200, Height: 43 } + bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, + tooltip: 'sign Here', + isRequired: true, } as SignatureFieldSettings); -}; ``` -## Initial field - -### Add Initial field - -- Select Initial field in the Form Designer toolbar. -- Place the field where initials are required. -- Configure indicator text, tooltip, and required state. - -![Initial field added from UI](../../images/ui-initial.png) - -### Add Initial field Programmatically - -To add an Initial field programmatically, call addFormField with type 'InitialField' and pass an `InitialFieldSettings` object. The example below adds the field when the document loads. +### Initial Field +**Add via Toolbar (UI)** +- Select **Initial Field** → place where initials are needed → configure text and required state. +![Initial field Properties Panel](../../images/ui-initial-edit.png) +**Add Programmatically (API)** ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; - -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.documentLoad = () => { +//Add Initial Field using addFormField Method pdfviewer.formDesignerModule.addFormField('InitialField', { - name: 'Initial', - bounds: { X: 148, Y: 466, Width: 200, Height: 43 } + name: 'Sign', + bounds: { X: 57, Y: 923, Width: 200, Height: 43 }, + tooltip: 'sign Here', + isRequired: true, } as InitialFieldSettings); -}; ``` -## setFormFieldMode programmatically +## Add Fields Dynamically with setFormFieldMode + +Use `setFormFieldMode()` to add fields on the fly based on user actions. -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. +### Edit Form Fields in TypeScript PDF Viewer +You can edit form fields using the UI or API. +#### Edit Using the UI +- Right click a field → **Properties** to update settings. (Image here) +- Drag to move; use handles to resize. +- Use the toolbar to toggle field mode or add new fields. + +#### Edit Programmatically ```html - + + ``` ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, - BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -let pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; -pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"; -pdfviewer.appendTo('#PdfViewer'); - +//Edit FormField on Button Click +(document.getElementById('editTextbox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name (Here field name is First Name) + const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly + if (field) { + // Update textbox field styling and value + pdfviewer.formDesignerModule.updateFormField(field, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + fontStyle: FontStyle.None, + color: 'black', + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + alignment: 'Left', + maxLength: 50 + } as TextFieldSettings); + } +}); +//Add Form Fields using setFormFieldmode document.getElementById('addPasswordField').addEventListener('click', function () { pdfviewer.formDesignerModule.setFormFieldMode("Password"); //In setFormFieldModule-You can pass the required field to be added like Textbox, Checkbox etc., @@ -358,7 +252,7 @@ document.getElementById('addPasswordField').addEventListener('click', function ( - [Form Designer overview](../overview) - [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) -- [Edit form fields](./edit-formfields) +- [Modify form fields](./modify-formfields) - [Style form fields](./style-formfields) - [Remove form fields](./remove-formfields) - [Group form fields](../group-formfields) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/customize-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/customize-formfields.md new file mode 100644 index 000000000..c960aef81 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/customize-formfields.md @@ -0,0 +1,87 @@ +--- +layout: post +title: Customize form fields in the TypeScript PDF Viewer | Syncfusion +description: Learn how to customize PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Customize the appearance of PDF Form Fields in TypeScript PDF Viewer + +**Styling** customizes appearance only (font, color, alignment, border, background, indicator text). + +## Customize Appearance of Form Fields Using the UI +Use the **Properties** panel to adjust: +- Font family/size, text color, alignment +- Border color/thickness +- Background color +![Textbox style from UI](../../images/ui-textbox-style.png) + +## Customize appearance Form Fields Programmatically +Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to apply styles: +```html + +``` +```ts +// Update textbox styling on button click +(document.getElementById('CustomizeTextboxStyle') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name + const tb = fields.find((f: any) => f.name === 'First Name') || fields[0]; + if (tb) { + // Update textbox field styling + pdfviewer.formDesignerModule.updateFormField(tb, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + fontStyle: FontStyle.None, + color: 'black', + borderColor: 'black', + backgroundColor: 'white', + alignment: 'Left', + thickness: 2 + } as TextFieldSettings); + } +}); +``` + +## Set Default Styles for New Form Fields +Define defaults so fields added from the toolbar inherit styles. +```ts +// Apply as defaults for Textbox added from toolbar +pdfviewer.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 +}; +``` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Create form fields](./create-formfields) +- [Modify form fields](./modify-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) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md deleted file mode 100644 index 79e5641c4..000000000 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/edit-formfields.md +++ /dev/null @@ -1,419 +0,0 @@ ---- -layout: post -title: Edit form fields in the TypeScript PDF Viewer | Syncfusion -description: Learn how to edit PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer. -platform: document-processing -control: PDF Viewer -documentation: ug ---- - -# Edit form fields in TypeScript 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](#textbox) -- [Password](#password) -- [CheckBox](#checkbox) -- [RadioButton](#radiobutton) -- [ListBox](#listbox) -- [DropDown](#dropdown) -- [Signature field](#signature-field) -- [Initial 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](../../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 - -- Right-click the textbox → Properties. -- Change value, font, size, colors, border thickness, alignment, max length, multiline. - -![Textbox edited from UI](../../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. - -```html - -``` - -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, FontStyle, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); - -(document.getElementById('editTextbox') as HTMLButtonElement)?.addEventListener('click', () => { - // Retrieve form fields collection - const fields = pdfviewer.retrieveFormFields(); - // Find the textbox field by name (Here field name is FIrst Name) - const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly - if (field) { - // Update textbox field styling and value - pdfviewer.formDesignerModule.updateFormField(field, { - value: 'John', - fontFamily: 'Courier', - fontSize: 12, - fontStyle: FontStyle.None, - color: 'black', - backgroundColor: 'white', - borderColor: 'black', - thickness: 2, - alignment: 'Left', - maxLength: 50 - } as TextFieldSettings); - } -}); -``` - -## Password - -### Edit Password - -- Right-click the password field → Properties. -- Change tooltip, required, max length, font, and appearance. - -![Password edited from UI](../../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. - -```html - -``` -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); - -(document.getElementById('editPasswordBox') as HTMLButtonElement)?.addEventListener('click', () => { - // Retrieve form fields collection - const fields = pdfviewer.retrieveFormFields(); - // Find the password field by name (Here field name is Password) - const field = fields.find((f: any) => f.name === 'Password'); - if (field) { - // Update password field properties - pdfviewer.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 - } as PasswordFieldSettings); - } -}); -``` - -## CheckBox - -### Edit CheckBox - -- Right-click the checkbox → Properties. -- Enable checked state. - -![CheckBox edited from UI](../../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. - -```html - -``` -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); - -(document.getElementById('editCheckbox') as HTMLButtonElement)?.addEventListener('click', () => { - // Retrieve form fields collection - const fields = pdfviewer.retrieveFormFields(); - // Find the checkbox field by name (Here field name is Subscribe) - const cb = fields.find((f: any) => f.name === 'Subscribe'); - if (cb) { - // Update checkbox field properties and state - pdfviewer.formDesignerModule.updateFormField(cb, { - isChecked: true, - backgroundColor: 'white', - borderColor: 'black', - thickness: 2, - tooltip: 'Subscribe to newsletter' - } as CheckBoxFieldSettings); - } -}); -``` - -## RadioButton - -### Edit RadioButton - -- Right-click a radio button → Properties. -- Set selected state. Buttons with the same Name form a group; only one can be selected. - -![RadioButton edited from UI](../../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. - -```html - -``` -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); - -(document.getElementById('editRadio') as HTMLButtonElement)?.addEventListener('click', () => { - // Retrieve form fields collection - const fields = pdfviewer.retrieveFormFields(); - // Filter the radio button group by name (Here group name is Gender) - const genderRadios = fields.filter((f: any) => f.name === 'Gender'); - if (genderRadios[1]) { - // Update radio button selection and appearance - pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false } as RadioButtonFieldSettings); - pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings); - } -}); -``` - -## ListBox - -### Edit ListBox - -- Right-click the list box → Properties. -- Add/remove items, set selection, and adjust fonts and colors. - -![ListBox edited from UI](../../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. - -```html - -``` -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); - -(document.getElementById('editListBox') as HTMLButtonElement)?.addEventListener('click', () => { - // Retrieve form fields collection - const fields = pdfviewer.retrieveFormFields(); - // Find the listbox field by name (Here field name is States) - const lb = fields.find((f: any) => f.name === 'States'); - if (lb) { - // Update listbox options, selection, and appearance - pdfviewer.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' - } as unknown as TextFieldSettings); - } -}); -``` - -## DropDown - -### Edit DropDown - -- Right-click the dropdown → Properties. -- Add/remove items, set default value, and adjust appearance. - -![DropDown edited from UI](../../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. - -```html - -``` -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); - -(document.getElementById('editDropDown') as HTMLButtonElement)?.addEventListener('click', () => { - // Retrieve form fields collection - const fields = pdfviewer.retrieveFormFields(); - // Find the dropdown field by name (Here field name is Country) - const dd = fields.find((f: any) => f.name === 'Country'); - if (dd) { - // Update dropdown items, value, and appearance - pdfviewer.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' - } as DropdownFieldSettings); - } -}); -``` - -## Signature field - -### Edit Signature field - -- Right-click the signature field → Properties. -- Change tooltip, thickness, indicator text, required/visibility states. - -![Signature field edited from UI](../../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. - -```html - -``` -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); - -(document.getElementById('editSignature') as HTMLButtonElement)?.addEventListener('click', () => { - // Retrieve form fields collection - const fields = pdfviewer.retrieveFormFields(); - // Find the signature field by name (Here field name is Sign) - const sig = fields.find((f: any) => f.name === 'Sign'); - if (sig) { - // Update signature field properties - pdfviewer.formDesignerModule.updateFormField(sig, { - tooltip: 'Please sign here', - thickness: 3, - isRequired: true, - isPrint: true, - backgroundColor: 'white', - borderColor: 'black' - } as SignatureFieldSettings); - } -}); -``` - -## Initial field - -### Edit Initial field - -- Right-click the initial field → Properties. -- Change tooltip, indicator text, thickness, and required/visibility states. - -![Initial field edited from UI](../../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. - -```html - -``` -```ts -import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner); - -const pdfviewer: PdfViewer = new PdfViewer(); -pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf'; -pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'; -pdfviewer.appendTo('#PdfViewer'); - -(document.getElementById('editInitial') as HTMLButtonElement)?.addEventListener('click', () => { - // Retrieve form fields collection - const fields = pdfviewer.retrieveFormFields(); - // Find the initial field by name (Here field name is Initial) - const init = fields.find((f: any) => f.name === 'Initial'); - if (init) { - // Update initial field properties - pdfviewer.formDesignerModule.updateFormField(init, { - tooltip: 'Add your initials', - thickness: 2, - isRequired: true, - isPrint: true, - backgroundColor: 'white', - borderColor: 'black' - } as InitialFieldSettings); - } -}); -``` - -[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-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/javascript-es6/form-designer/Create-edit-Style-del-formFields/modify-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/modify-formfields.md new file mode 100644 index 000000000..f97fe98cf --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/modify-formfields.md @@ -0,0 +1,296 @@ +--- +layout: post +title: Modify form fields in the TypeScript PDF Viewer | Syncfusion +description: Learn how to modify PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Modify PDF Form Field Properties +You can modify form fields using the **UI** or **API**. + +## Modify PDF Form Field Properties using the UI +- Right click a field → **Properties** to update settings. +![Textbox properties panel](../../images/ui-textbox-edit.png) +- Drag to move; use handles to resize. +- Use the toolbar to toggle field mode or add new fields. + +## Modify PDF Form Field Properties programatically +Use [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to change behavior/data (including position and size): + +```html + +``` +```ts +(document.getElementById('modifyTextbox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name (Here field name is First Name) + const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly + if (field) { + // Update textbox field styling and value + pdfviewer.formDesignerModule.updateFormField(field, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + fontStyle: FontStyle.None, + color: 'black', + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + alignment: 'Left', + maxLength: 50 + } as TextFieldSettings); + } +}); +``` + +## Modify PDF Form Field Properties by Field type + +### Textbox +- UI: Update value, font, size, colors, border thickness, alignment, max length, multiline. +![Textbox properties panel](../../images/ui-textbox-edit.png) +- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for value, typography, alignment, colors, borders. + +```html + +``` +```ts +(document.getElementById('modifyTextbox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name (Here field name is First Name) + const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly + if (field) { + // Update textbox field styling and value + pdfviewer.formDesignerModule.updateFormField(field, { + value: 'John', + fontFamily: 'Courier', + fontSize: 12, + fontStyle: FontStyle.None, + color: 'black', + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + alignment: 'Left', + maxLength: 50 + } as TextFieldSettings); + } +}); +``` + +### Password + +- UI: Tooltip, required, max length, font, appearance. +![Password edited from UI](../../images/ui-password-edit.png) +- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, validation flags, typography, colors, alignment, borders. +```html + +``` +```ts +(document.getElementById('modifyPasswordBox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the password field by name (Here field name is Password) + const field = fields.find((f: any) => f.name === 'Password'); + if (field) { + // Update password field properties + pdfviewer.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 + } as PasswordFieldSettings); + } +}); +``` + +### CheckBox +- UI: Toggle checked state. +![CheckBox edited from UI](../../images/ui-checkbox-edit.png) +- API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for isChecked, tooltip, colors, borders. +```html + +``` +```ts +(document.getElementById('modifyCheckbox') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the checkbox field by name (Here field name is Subscribe) + const cb = fields.find((f: any) => f.name === 'Subscribe'); + if (cb) { + // Update checkbox field properties and state + pdfviewer.formDesignerModule.updateFormField(cb, { + isChecked: true, + backgroundColor: 'white', + borderColor: 'black', + thickness: 2, + tooltip: 'Subscribe to newsletter' + } as CheckBoxFieldSettings); + } +}); +``` + +### RadioButton +• UI: Set selected item in a group (same Name). +![RadioButton edited from UI](../../images/ui-radiobutton-edit.png) +• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) to set selected value and border appearance. +```html + +``` +```ts +(document.getElementById('editRadio') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Filter the radio button group by name (Here group name is Gender) + const genderRadios = fields.filter((f: any) => f.name === 'Gender'); + if (genderRadios[1]) { + // Update radio button selection and appearance + pdfviewer.formDesignerModule.updateFormField(genderRadios[0], { isSelected: false } as RadioButtonFieldSettings); + pdfviewer.formDesignerModule.updateFormField(genderRadios[1], { isSelected: true, thickness: 2, borderColor: 'black' } as RadioButtonFieldSettings); + } +}); +``` + +### ListBox +• UI: Add/remove items, set selection, adjust fonts/colors. +![ListBox edited from UI](../../images/ui-listbox-edit.png) +• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, selection, borders. +```html + +``` +```ts +(document.getElementById('editListBox') as HTMLButtonElement)?.addEventListener( + 'click', + () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the listbox field by name (Here field name is States) + const lb = fields.find((f: any) => f.name === 'States'); + if (lb) { + // Update listbox options, selection, and appearance + let option = [ + { itemName: 'Alabama', itemValue: 'AL' }, + { itemName: 'Alaska', itemValue: 'AK' }, + { itemName: 'Arizona', itemValue: 'AZ' }, + ]; + pdfviewer.formDesignerModule.updateFormField(lb, { + fontFamily: 'Courier', + fontSize: 5, + color: 'black', + backgroundColor: 'white', + tooltip: 'listbox', + options: option, + } as ListBoxFieldSettings); + } + }); + +``` + +### DropDown +• UI: Add/remove items, default value, appearance. +![DropDown edited from UI](../../images/ui-dropdown-edit.png) +• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for items, value, borders. +```html + +``` +```ts +(document.getElementById('editDropDown') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the dropdown field by name (Here field name is Country) + const dd = fields.find((f: any) => f.name === 'Country'); + if (dd) { + // Update dropdown items, value, and appearance + pdfviewer.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' + } as DropdownFieldSettings); + } +}); +``` + +### Signature Field +• UI: Tooltip, thickness, indicator text, required/visibility. +![Signature field edited from UI](../../images/ui-signature-edit.png) +• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. +```html + +``` +```ts +(document.getElementById('editSignature') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the signature field by name (Here field name is Sign) + const sig = fields.find((f: any) => f.name === 'Sign'); + if (sig) { + // Update signature field properties + pdfviewer.formDesignerModule.updateFormField(sig, { + tooltip: 'Please sign here', + thickness: 3, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + } as SignatureFieldSettings); + } +}); +``` + +### Initial Field +• UI: Tooltip, indicator text, thickness, required/visibility. +![Initial field edited from UI](../../images/ui-initial-edit.png) +• API: [updateFormField()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#updateformfields) for tooltip, required, colors, borders. +```html + +``` +```ts +(document.getElementById('editInitial') as HTMLButtonElement)?.addEventListener('click', () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the initial field by name (Here field name is Initial) + const init = fields.find((f: any) => f.name === 'Initial'); + if (init) { + // Update initial field properties + pdfviewer.formDesignerModule.updateFormField(init, { + tooltip: 'Add your initials', + thickness: 2, + isRequired: true, + isPrint: true, + backgroundColor: 'white', + borderColor: 'black' + } as InitialFieldSettings); + } +}); +``` + +[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-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/javascript-es6/form-designer/Create-edit-Style-del-formFields/move-resize-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/move-resize-formfields.md new file mode 100644 index 000000000..26c26db06 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/move-resize-formfields.md @@ -0,0 +1,51 @@ +--- +layout: post +title: Move and Resize form fields in the TypeScript PDF Viewer | Syncfusion +description: Learn how to move and resize PDF form fields using the UI and programmatically with APIs in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Move and Resize PDF Form Fields +- **Move**: Drag the form field to reposition it. +- **Resize**: Use the resize handles to change width and height. + +![Moveing and Resizing a form field](../../images/move-resize-forms.gif) + +## Move and Resize Fields Programmatically (API) +You can set absolute bounds or move fields by a delta. + +**Set absolute bounds** +```html + +``` +```ts +// Move & resize by setting absolute bounds +(document.getElementById('resizeMove') as HTMLButtonElement)?.addEventListener( + 'click', + () => { + // Retrieve form fields collection + const fields = pdfviewer.retrieveFormFields(); + // Find the textbox field by name (Here field name is First Name) + const field = fields.find((f: any) => f.name === 'First Name') || fields[0]; //Update Name accordingly + if (field) { + // Update bounds to move or rezie formfields + pdfviewer.formDesignerModule.updateFormField(field, { + bounds: { X: 140, Y: 210, Width: 220, Height: 24 }, // new absolute position & size + } as TextFieldSettings); + } + } +); +``` + +## See also + +- [Form Designer overview](../overview) +- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar) +- [Create form fields](./create-formfields) +- [Remove form Fields](./remove-formfields) +- [Customize form fields](./customize-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/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md index 667789153..750cb4614 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/remove-formfields.md @@ -7,68 +7,23 @@ control: PDF Viewer documentation: ug --- -# Remove form fields in TypeScript 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: - -- Select the target form field on the page. -- Click the Delete Form Field icon on the Form Designer toolbar. -- Alternatively, press the `Delete key` after selecting one or more fields. +# Remove PDF Form Fields from a PDF +## Remove Form Fields Using the UI +**Steps:** +1. Enable **Form Designer mode**. +2. Select the form field. +3. Click **Delete** in the toolbar or press the **Delete** key. ![Form Designer toolbar with Delete icon](../../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. +## Remove Form Fields Programmatically +Use **deleteFormField()** with a field reference or ID. ```html -
    ``` ```ts -import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, -TextSelection, Annotation, FormDesigner, FormFields, TextFieldSettings, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer'; - -PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, -TextSelection, Annotation, FormDesigner, FormFields); - -const pdfviewer: PdfViewer = new PdfViewer({ - documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', - resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib' -}); - -// Optional server-backed -// pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'; - -pdfviewer.appendTo('#PdfViewer'); - -// Add form fields on document load -pdfviewer.documentLoad = () => { - pdfviewer.formDesignerModule.addFormField('Textbox', { - name: 'First Name', - bounds: { X: 146, Y: 229, Width: 150, Height: 24 } - } as TextFieldSettings); - - pdfviewer.formDesignerModule.addFormField('Password', { - name: 'Password', - bounds: { X: 338, Y: 229, Width: 150, Height: 24 } - } as TextFieldSettings); - - pdfviewer.formDesignerModule.addFormField('SignatureField', { - name: 'Sign Here', - bounds: { X: 146, Y: 280, Width: 200, Height: 43 } - } as SignatureFieldSettings); -}; - // Delete all added form fields on button click (document.getElementById('deleteAllFields') as HTMLButtonElement).addEventListener('click', () => { const fields = [...pdfviewer.formFieldCollections]; // clone to avoid mutation issues @@ -86,9 +41,6 @@ pdfviewer.documentLoad = () => { }); ``` -N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file: -`pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';` - [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples) ## See also @@ -96,8 +48,8 @@ N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in - [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) +- [Modify form fields](./modify-formfields) +- [Customize form fields](./customize-formfields) - [Group form fields](../group-formfields) - [Form validation](../form-validation) - [Add custom data to form fields](../custom-data) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview-create-forms.md b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview-create-forms.md new file mode 100644 index 000000000..399992c67 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/overview-create-forms.md @@ -0,0 +1,20 @@ +--- +layout: post +title: Overview for Create edit form fields in the TypeScript PDF Viewer | Syncfusion +description: Learn how to create edit each form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion TypeScript PDF Viewer. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Create, Edit, Style, and Remove PDF Form Fields in TypeScript PDF Viewer + +The [TypeScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/overview) allows you to create interactive PDF form fields, update their behavior and appearance, and remove them when they are no longer needed. +All form field operations can be performed using either the [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/javascript/#/tailwind3/pdfviewer/formdesigner.html) or [TypeScript APIs.](https://ej2.syncfusion.com/documentation/api/pdfviewer/overview) + +This section explains how to: + +- [Create PDF form fields](./Create-edit-Style-del-formFields/create-formfields) +- [Edit form field behavior and values](./Create-edit-Style-del-formFields/edit-formfields) +- [Style the appearance of form fields](./Create-edit-Style-del-formFields/style-formfields) +- [Remove form fields from a PDF document](./Create-edit-Style-del-formFields/remove-formfields) From 656921873c89e30351e5d2a0887a18688fa83221 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 28 Jan 2026 13:53:44 +0530 Subject: [PATCH 3/8] 1004880: Resolved CI Failures --- Document-Processing-toc.html | 2 +- .../Create-edit-Style-del-formFields/create-formfields.md | 2 +- .../Create-edit-Style-del-formFields/modify-formfields.md | 2 +- .../javascript-es6/form-designer/overview-create-forms.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 8521b9a72..f42a2f88a 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -1578,7 +1578,7 @@
  • Overview
  • Fill form fields
  • Form Designer and Toolbar
    • -
  • Create, Edit, Style and Remove Form Fields +
  • Create, Edit, Style and Remove Form Fields