Skip to content

Commit b03be5d

Browse files
MuralidharanGSF4527SF4524LogeshKumar
MuralidharanGSF4527
authored and
SF4524LogeshKumar
committed
1001841: revamped forms UG documentations
1 parent 9bdb50b commit b03be5d

15 files changed

Lines changed: 1582 additions & 151 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -901,16 +901,35 @@
901901
</ul>
902902
</li>
903903
<li><a href="/document-processing/pdf/pdf-viewer/react/interaction-mode">Interaction Mode</a></li>
904-
<li>Form Designer
904+
<li>Forms
905905
<ul>
906-
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/create-programmatically">Create form fields programmatically</a></li>
907-
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/create-with-user-interface-interaction">Create form fields with UI interaction</a></li>
908-
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar-customization/form-designer-toolbar">Form Designer Toolbar</a></li>
909-
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/form-field-events">Form Field events</a></li>
906+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/overview">Overview</a></li>
907+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/form-filling">Fill form fields</a></li>
908+
<li><a href="/document-processing/pdf/pdf-viewer/react/toolbar-customization/form-designer">Form Designer Toolbar</a></li>
909+
<li>Create, Edit, Style and Remove Form Fields
910+
<ul>
911+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/Create-edit-Style-del-formFields/create-formfields">Create form fields</a></li>
912+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/Create-edit-Style-del-formFields/edit-formfields">Edit form fields</a></li>
913+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields">Style form fields</a></li>
914+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields">Remove form fields</a></li>
915+
</ul>
916+
</li>
917+
<li>Import/Export form data
918+
<ul>
919+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/import-export-formfields/export-formfields">Export form data</a></li>
920+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/import-export-formfields/import-export-events">Import form data</a></li>
921+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/form-designer/import-export-formfields/import-export-events">Import/Export events</a></li>
922+
</ul>
923+
</li>
924+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/custom-data">Add custom data in form fields</a></li>
925+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/group-formfields">Grouping form fields</a></li>
926+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/form-constrain">Form constrains</a></li>
927+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/form-validation">Form Validation</a></li>
910928
<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/custom-fonts">Custom fonts</a></li>
929+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/form-field-events">Form Field events</a></li>
930+
<li><a href="/document-processing/pdf/pdf-viewer/react/form-designer/formfields-api">APIs</a></li>
911931
</ul>
912932
</li>
913-
<li><a href="/document-processing/pdf/pdf-viewer/react/form-filling">Form Filling</a></li>
914933
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pdf">Organize Pages</a>
915934
<ul>
916935
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/overview">Overview</a></li>

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

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ The PDF Viewer component supports interactive form field design, including drawi
1313

1414
The PDF Viewer supports the following form field types:
1515

16-
- Textbox
17-
- Password
18-
- CheckBox
19-
- RadioButton
20-
- ListBox
21-
- DropDown
22-
- Signature field
23-
- Initial field
16+
- [Textbox](#add-textbox)
17+
- [Password](#add-password)
18+
- [CheckBox](#add-checkbox)
19+
- [RadioButton](#add-radiobutton)
20+
- [ListBox](#add-listbox)
21+
- [DropDown](#add-dropdown)
22+
- [Signature field](#signature-field)
23+
- [Initial field](#add-initial-field)
2424

2525
## Add the form field dynamically
2626

@@ -44,9 +44,9 @@ Resize the selected form field using the resize handles on the field boundary. S
4444

4545
### Add Textbox
4646

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.
47+
- Open the Form Designer toolbar.
48+
- Select Textbox, then click/tap on the page to place it.
49+
- Resize/move as needed and set properties in the property panel.
5050

5151
![Textbox added from UI](../../../javascript-es6/images/ui-textbox.png)
5252

@@ -96,9 +96,9 @@ root.render(<App />);
9696

9797
### Add Password
9898

99-
1) Open the Form Designer toolbar.
100-
2) Select Password, then place it on the page.
101-
3) Configure tooltip, required, max length, etc.
99+
- Open the Form Designer toolbar.
100+
- Select Password, then place it on the page.
101+
- Configure tooltip, required, max length, etc.
102102

103103
![Password added from UI](../../../javascript-es6/images/ui-password.png)
104104

@@ -148,9 +148,9 @@ root.render(<App />);
148148

149149
### Add CheckBox
150150

151-
1) Choose CheckBox in the Form Designer toolbar.
152-
2) Click on the page to place, duplicate for multiple options if needed.
153-
3) Use property panel to set IsChecked, tooltip, and appearance.
151+
- Choose CheckBox in the Form Designer toolbar.
152+
- Click on the page to place, duplicate for multiple options if needed.
153+
- Use property panel to set IsChecked, tooltip, and appearance.
154154

155155
![CheckBox added from UI](../../../javascript-es6/images/ui-checkbox.png)
156156

@@ -201,9 +201,9 @@ root.render(<App />);
201201

202202
### Add RadioButton
203203

204-
1) Select RadioButton in the Form Designer toolbar.
205-
2) Place buttons sharing the same Name to create a group (e.g., Gender).
206-
3) Use property panel to set selection, colors, and tooltip.
204+
- Select RadioButton in the Form Designer toolbar.
205+
- Place buttons sharing the same Name to create a group (e.g., Gender).
206+
- Use property panel to set selection, colors, and tooltip.
207207

208208
![Radio buttons added from UI](../../../javascript-es6/images/ui-radiobutton.png)
209209

@@ -261,9 +261,9 @@ root.render(<App />);
261261

262262
### Add ListBox
263263

264-
1) Choose ListBox in the Form Designer toolbar.
265-
2) Place the field and add items in the property panel.
266-
3) Configure font, size, and selection behavior.
264+
- Choose ListBox in the Form Designer toolbar.
265+
- Place the field and add items in the property panel.
266+
- Configure font, size, and selection behavior.
267267

268268
![ListBox added from UI](../../../javascript-es6/images/ui-listbox.png)
269269

@@ -320,9 +320,9 @@ root.render(<App />);
320320

321321
### Add DropDown
322322

323-
1) Select DropDown in the Form Designer toolbar.
324-
2) Place the field, then add items via the property panel.
325-
3) Adjust appearance and default value.
323+
- Select DropDown in the Form Designer toolbar.
324+
- Place the field, then add items via the property panel.
325+
- Adjust appearance and default value.
326326

327327
![DropDown added from UI](../../../javascript-es6/images/ui-dropdown.png)
328328

@@ -379,9 +379,9 @@ root.render(<App />);
379379

380380
### Add Signature field
381381

382-
1) Select Signature field in the Form Designer toolbar.
383-
2) Place the field where the signer should sign.
384-
3) Configure indicator text, thickness, tooltip, and required state.
382+
- Select Signature field in the Form Designer toolbar.
383+
- Place the field where the signer should sign.
384+
- Configure indicator text, thickness, tooltip, and required state.
385385

386386
![Signature field added from UI](../../../javascript-es6/images/ui-signature.png)
387387

@@ -431,9 +431,9 @@ root.render(<App />);
431431

432432
### Add Initial field
433433

434-
1) Select Initial field in the Form Designer toolbar.
435-
2) Place the field where initials are required.
436-
3) Configure indicator text, tooltip, and required state.
434+
- Select Initial field in the Form Designer toolbar.
435+
- Place the field where initials are required.
436+
- Configure indicator text, tooltip, and required state.
437437

438438
![Initial field added from UI](../../../javascript-es6/images/ui-initial.png)
439439

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ The PDF Viewer component allows user to edit PDF form fields using the Form Desi
1313

1414
The PDF Viewer supports editing these field types:
1515

16-
- Textbox
17-
- Password
18-
- CheckBox
19-
- RadioButton
20-
- ListBox
21-
- DropDown
22-
- Signature field
23-
- Initial field
16+
- [Textbox](#textbox)
17+
- [Password](#password)
18+
- [CheckBox](#checkbox)
19+
- [RadioButton](#radiobutton)
20+
- [ListBox](#listbox)
21+
- [DropDown](#dropdown)
22+
- [Signature field](#signature-field)
23+
- [Initial field](#initial-field)
2424

2525
## Edit with the UI
2626

@@ -35,8 +35,8 @@ The PDF Viewer supports editing these field types:
3535

3636
### Edit Textbox
3737

38-
1) Right-click the textbox → Properties.
39-
2) Change value, font, size, colors, border thickness, alignment, max length, multiline.
38+
- Right-click the textbox → Properties.
39+
- Change value, font, size, colors, border thickness, alignment, max length, multiline.
4040

4141
![Textbox edited from UI](../../../javascript-es6/images/ui-textbox-edit.png)
4242

@@ -99,8 +99,8 @@ root.render(<App />);
9999

100100
### Edit Password
101101

102-
1) Right-click the password field → Properties.
103-
2) Change tooltip, required, max length, font, and appearance.
102+
- Right-click the password field → Properties.
103+
- Change tooltip, required, max length, font, and appearance.
104104

105105
![Password edited from UI](../../../javascript-es6/images/ui-password-edit.png)
106106

@@ -166,8 +166,8 @@ root.render(<App />);
166166

167167
### Edit CheckBox
168168

169-
1) Right-click the checkbox → Properties.
170-
2) Toggle checked state, change border/background colors and thickness.
169+
- Right-click the checkbox → Properties.
170+
- Toggle checked state, change border/background colors and thickness.
171171

172172
![CheckBox edited from UI](../../../javascript-es6/images/ui-checkbox-edit.png)
173173

@@ -226,8 +226,8 @@ root.render(<App />);
226226

227227
### Edit RadioButton
228228

229-
1) Right-click a radio button → Properties.
230-
2) Set selected state, colors, and thickness. Buttons with the same Name form a group; only one can be selected.
229+
- Right-click a radio button → Properties.
230+
- Set selected state, colors, and thickness. Buttons with the same Name form a group; only one can be selected.
231231

232232
![RadioButton edited from UI](../../../javascript-es6/images/ui-radiobutton-edit.png)
233233

@@ -281,8 +281,8 @@ root.render(<App />);
281281

282282
### Edit ListBox
283283

284-
1) Right-click the list box → Properties.
285-
2) Add/remove items, set selection, and adjust fonts and colors.
284+
- Right-click the list box → Properties.
285+
- Add/remove items, set selection, and adjust fonts and colors.
286286

287287
![ListBox edited from UI](../../../javascript-es6/images/ui-listbox-edit.png)
288288

@@ -347,8 +347,8 @@ root.render(<App />);
347347

348348
### Edit DropDown
349349

350-
1) Right-click the dropdown → Properties.
351-
2) Add/remove items, set default value, and adjust appearance.
350+
- Right-click the dropdown → Properties.
351+
- Add/remove items, set default value, and adjust appearance.
352352

353353
![DropDown edited from UI](../../../javascript-es6/images/ui-dropdown-edit.png)
354354

@@ -413,8 +413,8 @@ root.render(<App />);
413413

414414
### Edit Signature field
415415

416-
1) Right-click the signature field → Properties.
417-
2) Change tooltip, thickness, indicator text, required/visibility states.
416+
- Right-click the signature field → Properties.
417+
- Change tooltip, thickness, indicator text, required/visibility states.
418418

419419
![Signature field edited from UI](../../../javascript-es6/images/ui-signature-edit.png)
420420

@@ -474,8 +474,8 @@ root.render(<App />);
474474

475475
### Edit Initial field
476476

477-
1) Right-click the initial field → Properties.
478-
2) Change tooltip, indicator text, thickness, and required/visibility states.
477+
- Right-click the initial field → Properties.
478+
- Change tooltip, indicator text, thickness, and required/visibility states.
479479

480480
![Initial field edited from UI](../../../javascript-es6/images/ui-initial-edit.png)
481481

‎Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/remove-formfields.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ You can remove designed form fields directly from the Form Designer toolbar.
1717

1818
Steps:
1919

20-
1) Select the target form field on the page.
21-
2) Click the Delete Form Field icon on the Form Designer toolbar.
22-
3) Alternatively, press the `Delete key` after selecting one or more fields.
20+
- Select the target form field on the page.
21+
- Click the Delete Form Field icon on the Form Designer toolbar.
22+
- Alternatively, press the `Delete key` after selecting one or more fields.
2323

2424
![Form Designer toolbar with Delete icon](../../../javascript-es6/images/ui-del-formfields.png)
2525

‎Document-Processing/PDF/PDF-Viewer/react/form-designer/Create-edit-Style-del-formFields/style-formfields.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ The PDF Viewer component allows users to style and customize the appearance of P
1313

1414
Supported field types:
1515

16-
- Textbox
17-
- Password
18-
- CheckBox
19-
- RadioButton
20-
- ListBox
21-
- DropDown
22-
- Signature field
23-
- Initial field
16+
- [Textbox](#textbox)
17+
- [Password](#password)
18+
- [CheckBox](#checkbox)
19+
- [RadioButton](#radiobutton)
20+
- [ListBox](#listbox)
21+
- [DropDown](#dropdown)
22+
- [Signature field](#signature-field)
23+
- [Initial field](#initial-field)
2424

2525
## Textbox
2626

‎Document-Processing/PDF/PDF-Viewer/react/form-designer/form-constrain.md‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,17 @@ documentation: ug
1111

1212
The PDF Viewer components provides support to control user interaction and output behavior of form fields using the following constraints:
1313

14-
- isReadOnly: Prevents users from editing a field.
15-
- isRequired: Marks a field as mandatory and participates in validation.
16-
- isPrint: Includes the field appearance when printing or exporting with print.
14+
- [isReadOnly](#make-form-fields-readonly): Prevents users from editing a field.
15+
- [isRequired](#mark-fields-as-required): Marks a field as mandatory and participates in validation.
16+
- [isPrint](#control-field-print-behavior): Includes the field appearance when printing or exporting with print.
1717

1818
You can set these properties when you create fields, update them later programmatically, or configure default settings so fields created from the Form Designer toolbar inherit the values.
1919

20+
![Form Constraint](../images/ui-form-constraint.png)
21+
2022
## isReadOnly
2123

22-
Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code.
24+
Use `isReadOnly` to make a field non-editable in the UI while keeping it modifiable via code. Use the following code-snippets to make form fields read-only.
2325

2426
- Creation
2527
{% tabs %}
@@ -569,9 +571,9 @@ root.render(<App />);
569571

570572
## Behavior notes
571573

572-
- isReadOnly only blocks user edits in the UI. You can still update the field programmatically.
573-
- isRequired participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details.
574-
- isPrint controls field appearance in the print output. It does not affect download/export unless printing is triggered.
574+
- Use `isReadOnly` API to only blocks user edits in the UI. You can still update the field programmatically.
575+
- Use `isRequired` API to participates in the built-in validation flow. Enable validation to enforce before print/download. See Validate form fields for details.
576+
- Use `isPrint` API controls field appearance in the print output. It does not affect download/export unless printing is triggered.
575577

576578
[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
577579

0 commit comments

Comments
 (0)