Skip to content

Commit ba937d1

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
1013392: Revamped form designer file in react
1 parent 796f4d1 commit ba937d1

1 file changed

Lines changed: 49 additions & 202 deletions

File tree

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

Lines changed: 49 additions & 202 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ Using the Form Designer UI, users can place form fields on the PDF, move and res
1616

1717
## Key Features
1818

19-
**Add Form Fields**
20-
You can add the following form fields to the PDF:
19+
**Add Form Fields:**
20+
The following form fields can be added to the PDF:
2121

2222
- [Text box](../forms/manage-form-fields/create-form-fields#add-textbox)
2323
- [Password Field](../forms/manage-form-fields/create-form-fields#add-password)
@@ -28,24 +28,32 @@ You can add the following form fields to the PDF:
2828
- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
2929
- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
3030

31-
**Edit Form Fields**
32-
You can move, resize, align, distribute, copy, paste, and undo or redo changes to form fields.
31+
**Edit Form Fields:**
32+
Form fields can be moved, resized, aligned, distributed, copied, pasted, and have changes undone or redone.
3333

34-
**Set Field Properties**
35-
You can configure field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read only state.
34+
**Set Field Properties:**
35+
Field properties such as name, value, font, color, border, alignment, visibility, tab order, and required or read-only state can be configured.
3636

37-
**Control Field Behavior**
38-
You can enable or disable read only mode, show or hide fields, and control whether fields appear when printing the document.
37+
**Control Field Behavior:**
38+
Field behavior can be controlled, including enabling or disabling read-only mode, showing or hiding fields, and determining whether fields appear when printing the document.
3939

40-
**Manage Form Fields**
41-
You can select, group or ungroup, reorder, and delete form fields as needed.
40+
**Manage Form Fields:**
41+
Form fields can be selected, grouped or ungrouped, reordered, and deleted as needed.
4242

43-
**Save and Print Forms**
43+
**Save and Print Forms:**
4444
Designed form fields can be saved into the PDF document and printed with their appearances.
4545

46-
## Enable Form Designer
46+
## Design Forms with UI interaction
4747

48-
To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar.
48+
When [Form Designer mode](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) 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.
49+
50+
![FormDesigner](../../javascript-es6/images/FormDesigner.gif)
51+
52+
For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in React PDF Viewer documentation.
53+
54+
### Enable Form Designer
55+
56+
Form design features are enabled by injecting the [FormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. The [enableFormDesigner](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enableformdesigner) API controls whether the Form Designer option appears in the main toolbar.
4957

5058
{% tabs %}
5159
{% highlight js tabtitle="index.js" %}
@@ -64,7 +72,7 @@ export function App() {
6472
style={{ 'height': '680px' }}
6573
>
6674
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
67-
Print, TextSelection, TextSearch, FormFields]} />
75+
Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
6876
</PdfViewerComponent>
6977
</div>
7078
</div>);
@@ -74,17 +82,7 @@ root.render(<App />);
7482
{% endhighlight %}
7583
{% endtabs %}
7684

77-
## Form Designer UI
78-
79-
When [Form Designer mode](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesigner) is enabled in the Syncfusion [React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/overview), a default [Form Designer user interface (UI)](https://document.syncfusion.com/demos/pdf-viewer/react/#/tailwind3/pdfviewer/form-designer) 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.
80-
81-
![FormDesigner](../../javascript-es6/images/FormDesigner.gif)
82-
83-
{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
84-
85-
For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation](./manage-form-fields/create-form-fields) in React PDF Viewer documentation.
86-
87-
## Form Designer Toolbar
85+
### Form Designer Toolbar
8886

8987
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:
9088

@@ -97,205 +95,54 @@ The **Form Designer toolbar** appears at the top of the PDF Viewer and provides
9795
- [Signature field](../forms/manage-form-fields/create-form-fields#add-signature-field)
9896
- [Initial field](../forms/manage-form-fields/create-form-fields#add-initial-field)
9997

100-
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.
101-
102-
![Adding a text box using the Form Designer toolbar](../../javascript-es6/images/AddTextBox.gif)
103-
104-
Use the following code snippet to enable Form Designer by injecting the `FormDesigner` module.
105-
106-
{% tabs %}
107-
{% highlight js tabtitle="index.js" %}
108-
import * as ReactDOM from 'react-dom/client';
109-
import * as React from 'react';
110-
import './index.css';
111-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
112-
export function App() {
113-
return (<div>
114-
<div className='control-section'>
115-
<PdfViewerComponent
116-
id="container"
117-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
118-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
119-
style={{ 'height': '680px' }}
120-
>
121-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
122-
Print, TextSelection, TextSearch, FormFields]} />
123-
</PdfViewerComponent>
124-
</div>
125-
</div>);
126-
}
127-
const root = ReactDOM.createRoot(document.getElementById('sample'));
128-
root.render(<App />);
129-
{% endhighlight %}
130-
{% endtabs %}
131-
132-
For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in React PDF Viewer documentation](./manage-form-fields/create-form-fields).
98+
#### Show or Hide the Built-in Form Designer Toolbar
13399

134-
## Show or Hide the Built-in Form Designer Toolbar
100+
The visibility of the Form Designer toolbar is controlled by the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) method. This method enables the application to display or hide the Form Designer tools based on requirements. Refer to the code example [here](../toolbar-customization/form-designer-toolbar#2-show-or-hide-form-designer-toolbar-at-runtime).
135101

136-
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.
137-
138-
**Use this method to:**
139-
- Show the Form Designer toolbar when form design is required
140-
- Hide the toolbar to provide cleaner viewing experience
141-
142-
{% tabs %}
143-
{% highlight js tabtitle="index.js" %}
144-
import * as ReactDOM from 'react-dom/client';
145-
import * as React from 'react';
146-
import './index.css';
102+
- The Form Designer toolbar is shown when form design is required.
103+
- The toolbar can be hidden to provide a cleaner viewing experience.
147104

148-
import {
149-
PdfViewerComponent,
150-
Toolbar,
151-
Magnification,
152-
Navigation,
153-
Annotation,
154-
LinkAnnotation,
155-
ThumbnailView,
156-
BookmarkView,
157-
TextSelection,
158-
TextSearch,
159-
FormFields,
160-
FormDesigner,
161-
Inject
162-
} from '@syncfusion/ej2-react-pdfviewer';
163-
164-
function App() {
165-
const viewerRef = React.useRef(null);
166-
167-
// Show Form Designer Toolbar
168-
const handleShowDesigner = () => {
169-
const viewer = viewerRef.current;
170-
if (viewer) viewer.isFormDesignerToolbarVisible = true;
171-
};
172-
173-
// Hide Form Designer Toolbar
174-
const handleHideDesigner = () => {
175-
const viewer = viewerRef.current;
176-
if (viewer) viewer.isFormDesignerToolbarVisible = false;
177-
};
178-
179-
return (
180-
<div>
181-
<div style={{ marginBottom: '12px' }}>
182-
<button onClick={handleShowDesigner}>Show Form Designer Toolbar</button>
183-
<button onClick={handleHideDesigner} style={{ marginLeft: '8px' }}>
184-
Hide Form Designer Toolbar
185-
</button>
186-
</div>
187-
188-
<PdfViewerComponent
189-
ref={viewerRef}
190-
id="PdfViewer"
191-
documentPath="https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf"
192-
resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
193-
style={{ height: '600px', width: '100%' }}
194-
>
195-
<Inject
196-
services={[
197-
Toolbar,
198-
Magnification,
199-
Navigation,
200-
Annotation,
201-
LinkAnnotation,
202-
ThumbnailView,
203-
BookmarkView,
204-
TextSelection,
205-
TextSearch,
206-
FormFields,
207-
FormDesigner
208-
]}
209-
/>
210-
</PdfViewerComponent>
211-
</div>
212-
);
213-
}
105+
#### Customize the Built-in Form Designer Toolbar
214106

215-
const root = ReactDOM.createRoot(document.getElementById('sample'));
216-
root.render(<App />);
217-
{% endhighlight %}
218-
{% endtabs %}
107+
The Form Designer toolbar can be customized by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/formdesignertoolbaritem) property.
219108

220-
## Customize the Built-in Form Designer Toolbar
221-
222-
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/react/documentation/api/pdfviewer/formdesignertoolbaritem) property.
223-
224-
This customization helps you limit the available tools and simplify the user interface.
109+
This customization helps limit the available tools and simplify the user interface. A code example is available [here](../toolbar-customization/form-designer-toolbar#3-show-or-hide-form-designer-toolbar-items).
225110

226111
**Key Points**
227-
- Include only the toolbar items you need, in the exact order you specify.
112+
- Only the toolbar items listed are included, in the exact order specified.
228113
- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
229114

230-
{% tabs %}
231-
{% highlight js tabtitle="index.js" %}
232-
import * as ReactDOM from 'react-dom/client';
233-
import * as React from 'react';
234-
import './index.css';
235-
import {
236-
PdfViewerComponent,
237-
Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
238-
Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject
239-
} from '@syncfusion/ej2-react-pdfviewer';
115+
### Adding Form Fields
240116

241-
export function App() {
242-
return (
243-
<div>
244-
<div className="control-section">
245-
<PdfViewerComponent
246-
id="container"
247-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
248-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
249-
style={{ height: '680px' }}
250-
// Configure Form Designer toolbar with specific tools
251-
toolbarSettings={{
252-
formDesignerToolbarItems: [
253-
'TextboxTool',
254-
'PasswordTool',
255-
'CheckBoxTool',
256-
'RadioButtonTool',
257-
'DropdownTool',
258-
'ListboxTool',
259-
'DrawSignatureTool',
260-
'DeleteTool'
261-
]
262-
}}
263-
>
264-
<Inject services={[
265-
Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
266-
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner
267-
]} />
268-
</PdfViewerComponent>
269-
</div>
270-
</div>
271-
);
272-
}
117+
Each toolbar item in form designer toolbar allows users to place the corresponding form field by selecting the tool and clicking on the desired location in the PDF document.
273118

274-
const root = ReactDOM.createRoot(document.getElementById('sample'));
275-
root.render(<App />);
276-
{% endhighlight %}
277-
{% endtabs %}
119+
![Adding a text box using the Form Designer toolbar](../../javascript-es6/images/AddTextBox.gif)
278120

279-
## Move, Resize, and Edit Form Fields
121+
For more information about creating form fields in the PDF Viewer, refer to the [Form Creation in React PDF Viewer documentation](./manage-form-fields/create-form-fields#create-form-fields-using-the-form-designer-ui).
280122

281-
You can move, resize, and edit an existing form field directly in the PDF Viewer using the Form Designer.
123+
### Move, Resize, and Edit Form Fields
282124

283-
- Move a field by selecting it and dragging it to the required position.
125+
Fields can be moved, resized, and edited directly in the PDF Viewer using the Form Designer.
284126

285-
- Resize a field using the handles displayed on the field boundary.
127+
- A field is moved by selecting it and dragging it to the required position.
128+
129+
- Fields are resized using the handles displayed on the field boundary.
286130

287131
![Moveing and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif)
288132

289-
- Edit a field by selecting it to open the Form Field Properties popover. The popover allows you to modify the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed.
133+
- Selecting a field opens the Form Field Properties popover, which allows modification of the form field and widget annotation properties. Changes are reflected immediately in the viewer and are saved when the properties popover is closed.
290134
For more information, see Editing Form Fields
291135

292-
## Deleting Form Fields
136+
### Edit Form Field properties
137+
138+
The **Properties** panel lets you customize the styles of form fields. Open the panel by selecting the **Properties** option in a field's context menu.
139+
140+
![Textbox style from UI showing font, color, and border settings](../../javascript-es6/images/ui-textbox-style.png)
141+
142+
### Deleting Form Fields
293143

294-
You can remove a form field from the PDF document by selecting the field and using one of the following methods:
295-
- Click the `Delete option` in the Form Designer UI.
296-
- Press the `Delete key` on the keyboard after selecting the form field.
144+
A form field is removed by selecting it and either clicking the `Delete` option in the Form Designer UI or pressing the `Delete` key on the keyboard. The selected form field and its associated widget annotation are permanently removed from the page.
297145

298-
The selected form field and its associated widget annotation are permanently removed from the page.
299146
For more information, see [Deleting Form Fields](./manage-form-fields/remove-form-fields)
300147

301148
## See Also

0 commit comments

Comments
 (0)