Skip to content

Commit dd38a47

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
994681: Form Designer Revamp create edit style form fields
1 parent 6d4b005 commit dd38a47

File tree

14 files changed

+1334
-0
lines changed

14 files changed

+1334
-0
lines changed

‎Document-Processing-toc.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1360,6 +1360,19 @@
13601360
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/custom-fonts-ts">Custom fonts</a></li>
13611361
</ul>
13621362
</li>
1363+
<li>Form Fields
1364+
<ul>
1365+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/overview">Overview</a></li>
1366+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-filling">Fill form fields</a></li>
1367+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/toolbar-customization/form-designer-toolbar">Form Designer Toolbar</a></li>
1368+
<ul>Create, Edit, Style and Remove Form Fields
1369+
<li></li>
1370+
<li></li>
1371+
</ul>
1372+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-designer/form-field-events">Form Field events</a></li>
1373+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/custom-fonts-ts">Custom fonts</a></li>
1374+
</ul>
1375+
</li>
13631376
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/form-filling">Form Filling</a></li>
13641377
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/organize-pdf">Organize Pages</a>
13651378
<ul>

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/form-designer/Create-edit-Style-del-formFields/create-formfields.md‎

Lines changed: 353 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,353 @@
1+
---
2+
layout: post
3+
title: Create form fields in the TypeScript PDF Viewer | Syncfusion
4+
description: Learn how to add each PDF form field using the PDF Viewer UI and how to create them programmatically in the Syncfusion TypeScript PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# Create form fields in TypeScript PDF Viewer
11+
12+
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.
13+
14+
The PDF Viewer supports the following form field types:
15+
16+
- Textbox
17+
- Password
18+
- CheckBox
19+
- RadioButton
20+
- ListBox
21+
- DropDown
22+
- Signature field
23+
- Initial field
24+
25+
## Add the form field dynamically
26+
27+
Click the Form Field icon on the toolbar, then click on the PDF to draw a form field. See the following GIF for reference.
28+
29+
![Add a form field using the toolbar](../../images/addformfield.gif)
30+
31+
## Drag the form field
32+
33+
Drag the selected form field to reposition it within the PDF document. See the following GIF for reference.
34+
35+
![Drag a selected form field in the PDF Viewer](../../images/dragformfield.gif)
36+
37+
## Resize the form field
38+
39+
Resize the selected form field using the resize handles on the field boundary. See the following GIF for reference.
40+
41+
![Resize a selected form field in the PDF Viewer](../../images/resizeformfield.gif)
42+
43+
## Textbox
44+
45+
### Add Textbox
46+
47+
1) Open the Form Designer toolbar.
48+
2) Select Textbox, then click/tap on the page to place it.
49+
3) Resize/move as needed and set properties in the property panel.
50+
51+
![Textbox added from UI](../../images/ui-textbox.png)
52+
53+
### Add Textbox Programmatically
54+
55+
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.
56+
57+
```ts
58+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, TextFieldSettings } from '@syncfusion/ej2-pdfviewer';
59+
60+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
61+
62+
let pdfviewer: PdfViewer = new PdfViewer();
63+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
64+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
65+
66+
pdfviewer.appendTo('#PdfViewer');
67+
68+
pdfviewer.documentLoad = () => {
69+
pdfviewer.formDesignerModule.addFormField('Textbox', {
70+
name: 'First Name',
71+
bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
72+
} as TextFieldSettings);
73+
};
74+
```
75+
76+
## Password
77+
78+
### Add Password
79+
80+
1) Open the Form Designer toolbar.
81+
2) Select Password, then place it on the page.
82+
3) Configure tooltip, required, max length, etc.
83+
84+
![Password added from UI](../../images/ui-password.png)
85+
86+
### Add Password Programmatically
87+
88+
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.
89+
90+
```ts
91+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PasswordFieldSettings } from '@syncfusion/ej2-pdfviewer';
92+
93+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
94+
95+
let pdfviewer: PdfViewer = new PdfViewer();
96+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
97+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
98+
99+
pdfviewer.appendTo('#PdfViewer');
100+
101+
pdfviewer.documentLoad = () => {
102+
pdfviewer.formDesignerModule.addFormField('Password', {
103+
name: 'Account Password',
104+
bounds: { X: 148, Y: 270, Width: 180, Height: 24 }
105+
} as PasswordFieldSettings);
106+
};
107+
```
108+
109+
## CheckBox
110+
111+
### Add CheckBox
112+
113+
1) Choose CheckBox in the Form Designer toolbar.
114+
2) Click on the page to place, duplicate for multiple options if needed.
115+
3) Use property panel to set IsChecked, tooltip, and appearance.
116+
117+
![CheckBox added from UI](../../images/ui-checkbox.png)
118+
119+
### Add CheckBox Programmatically
120+
121+
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.
122+
123+
```ts
124+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, CheckBoxFieldSettings } from '@syncfusion/ej2-pdfviewer';
125+
126+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
127+
128+
let pdfviewer: PdfViewer = new PdfViewer();
129+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
130+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
131+
132+
pdfviewer.appendTo('#PdfViewer');
133+
134+
pdfviewer.documentLoad = () => {
135+
pdfviewer.formDesignerModule.addFormField('CheckBox', {
136+
name: 'Subscribe',
137+
isChecked: false,
138+
bounds: { X: 56, Y: 664, Width: 20, Height: 20 }
139+
} as CheckBoxFieldSettings);
140+
};
141+
```
142+
143+
## RadioButton
144+
145+
### Add RadioButton
146+
147+
1) Select RadioButton in the Form Designer toolbar.
148+
2) Place buttons sharing the same Name to create a group (e.g., Gender).
149+
3) Use property panel to set selection, colors, and tooltip.
150+
151+
![Radio buttons added from UI](../../images/ui-radiobutton.png)
152+
153+
### Add RadioButton Programmatically
154+
155+
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.
156+
157+
```ts
158+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, RadioButtonFieldSettings } from '@syncfusion/ej2-pdfviewer';
159+
160+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
161+
162+
let pdfviewer: PdfViewer = new PdfViewer();
163+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
164+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
165+
166+
pdfviewer.appendTo('#PdfViewer');
167+
168+
pdfviewer.documentLoad = () => {
169+
// Group by name: 'Gender'
170+
pdfviewer.formDesignerModule.addFormField('RadioButton', {
171+
name: 'Gender',
172+
isSelected: false,
173+
bounds: { X: 148, Y: 289, Width: 18, Height: 18 }
174+
} as RadioButtonFieldSettings);
175+
176+
pdfviewer.formDesignerModule.addFormField('RadioButton', {
177+
name: 'Gender',
178+
isSelected: false,
179+
bounds: { X: 292, Y: 289, Width: 18, Height: 18 }
180+
} as RadioButtonFieldSettings);
181+
};
182+
```
183+
184+
## ListBox
185+
186+
### Add ListBox
187+
188+
1) Choose ListBox in the Form Designer toolbar.
189+
2) Place the field and add items in the property panel.
190+
3) Configure font, size, and selection behavior.
191+
192+
![ListBox added from UI](../../images/ui-listbox.png)
193+
194+
### Add ListBox Programmatically
195+
196+
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.
197+
198+
```ts
199+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, ListBoxFieldSettings } from '@syncfusion/ej2-pdfviewer';
200+
201+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
202+
203+
let pdfviewer: PdfViewer = new PdfViewer();
204+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
205+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
206+
207+
pdfviewer.appendTo('#PdfViewer');
208+
209+
pdfviewer.documentLoad = () => {
210+
const options = [
211+
{ itemName: 'Item 1', itemValue: 'item1' },
212+
{ itemName: 'Item 2', itemValue: 'item2' },
213+
{ itemName: 'Item 3', itemValue: 'item3' }
214+
];
215+
216+
pdfviewer.formDesignerModule.addFormField('ListBox', {
217+
name: 'States',
218+
options,
219+
bounds: { X: 380, Y: 320, Width: 150, Height: 60 }
220+
} as ListBoxFieldSettings);
221+
};
222+
```
223+
224+
## DropDown
225+
226+
### Add DropDown
227+
228+
1) Select DropDown in the Form Designer toolbar.
229+
2) Place the field, then add items via the property panel.
230+
3) Adjust appearance and default value.
231+
232+
![DropDown added from UI](../../images/ui-dropdown.png)
233+
234+
### Add DropDown Programmatically
235+
236+
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.
237+
238+
```ts
239+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, DropdownFieldSettings } from '@syncfusion/ej2-pdfviewer';
240+
241+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
242+
243+
let pdfviewer: PdfViewer = new PdfViewer();
244+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
245+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
246+
247+
pdfviewer.appendTo('#PdfViewer');
248+
249+
pdfviewer.documentLoad = () => {
250+
const options = [
251+
{ itemName: 'Item 1', itemValue: 'item1' },
252+
{ itemName: 'Item 2', itemValue: 'item2' },
253+
{ itemName: 'Item 3', itemValue: 'item3' }
254+
];
255+
256+
pdfviewer.formDesignerModule.addFormField('DropDown', {
257+
name: 'Country',
258+
options,
259+
bounds: { X: 560, Y: 320, Width: 150, Height: 24 }
260+
} as DropdownFieldSettings);
261+
};
262+
```
263+
264+
## Signature field
265+
266+
### Add Signature field
267+
268+
1) Select Signature field in the Form Designer toolbar.
269+
2) Place the field where the signer should sign.
270+
3) Configure indicator text, thickness, tooltip, and required state.
271+
272+
![Signature field added from UI](../../images/ui-signature.png)
273+
274+
### Add Signature field Programmatically
275+
276+
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.
277+
278+
```ts
279+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SignatureFieldSettings } from '@syncfusion/ej2-pdfviewer';
280+
281+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
282+
283+
let pdfviewer: PdfViewer = new PdfViewer();
284+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
285+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
286+
287+
pdfviewer.appendTo('#PdfViewer');
288+
289+
pdfviewer.documentLoad = () => {
290+
pdfviewer.formDesignerModule.addFormField('SignatureField', {
291+
name: 'Sign',
292+
bounds: { X: 57, Y: 923, Width: 200, Height: 43 }
293+
} as SignatureFieldSettings);
294+
};
295+
```
296+
297+
## Initial field
298+
299+
### Add Initial field
300+
301+
1) Select Initial field in the Form Designer toolbar.
302+
2) Place the field where initials are required.
303+
3) Configure indicator text, tooltip, and required state.
304+
305+
![Initial field added from UI](../../images/ui-initial.png)
306+
307+
### Add Initial field Programmatically
308+
309+
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.
310+
311+
```ts
312+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, InitialFieldSettings } from '@syncfusion/ej2-pdfviewer';
313+
314+
PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
315+
316+
let pdfviewer: PdfViewer = new PdfViewer();
317+
pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf";
318+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
319+
320+
pdfviewer.appendTo('#PdfViewer');
321+
322+
pdfviewer.documentLoad = () => {
323+
pdfviewer.formDesignerModule.addFormField('InitialField', {
324+
name: 'Initial',
325+
bounds: { X: 148, Y: 466, Width: 200, Height: 43 }
326+
} as InitialFieldSettings);
327+
};
328+
```
329+
330+
## setFormFieldMode programmatically
331+
332+
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.
333+
334+
```html
335+
<button id="addPasswordField">Add Password Field</button>
336+
```
337+
```ts
338+
import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
339+
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
340+
341+
PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
342+
BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
343+
344+
let pdfviewer: PdfViewer = new PdfViewer();
345+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
346+
pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
347+
pdfviewer.appendTo('#PdfViewer');
348+
349+
document.getElementById('addPasswordField').addEventListener('click', function () {
350+
pdfviewer.formDesignerModule.setFormFieldMode("Password");
351+
//In setFormFieldModule-You can pass the required field to be added like Textbox, Checkbox etc.,
352+
});
353+
```

0 commit comments

Comments
 (0)