Skip to content

Commit a6cd7af

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1004885: Resolved CI failures
1 parent 0f45af1 commit a6cd7af

6 files changed

Lines changed: 144 additions & 97 deletions

File tree

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

Lines changed: 139 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
layout: post
3-
title: Form Designer and Toolbar Customization in TypeScript | Syncfusion
4-
description: Learn here all about form designer and toolbar in Syncfusion TypeScript PDF Viewer of Syncfusion Essential JS 2 and more.
3+
title: Form Designer and Toolbar Customization in Vue | Syncfusion
4+
description: Learn here all about form designer and toolbar in the Syncfusion Vue PDF Viewer and how to customize the form designer UI and toolbar.
55
platform: document-processing
66
control: PDF Viewer
77
documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Form Designer in TypeScript PDF Viewer
11+
# Form Designer in Vue PDF Viewer
1212

1313
When **Form Designer mode** 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.
1414

@@ -45,48 +45,59 @@ Designed form fields can be saved into the PDF document and printed with their a
4545

4646
## Enable Form Designer
4747

48-
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.
49-
50-
```ts
48+
To enable form design features, inject the [FormDesigner](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) module into the PDF Viewer. After injecting the module, use the [enableFormDesigner](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#enableformdesigner) API to show or hide the Form Designer option in the main toolbar.
49+
50+
{% tabs %}
51+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
52+
<template>
53+
<div>
54+
<ejs-pdfviewer
55+
id="pdfViewer"
56+
ref="pdfviewer"
57+
:documentPath="documentPath"
58+
:resourceUrl="resourceUrl"
59+
:enableFormDesigner="false"
60+
style="height:640px"
61+
/>
62+
</div>
63+
</template>
64+
65+
<script>
5166
import {
52-
PdfViewer,
53-
FormFields,
54-
FormDesigner,
67+
PdfViewerComponent,
5568
Toolbar,
5669
Magnification,
5770
Navigation,
5871
Annotation,
5972
TextSelection,
6073
TextSearch,
61-
} from '@syncfusion/ej2-pdfviewer';
62-
PdfViewer.Inject(
6374
FormFields,
6475
FormDesigner,
65-
Toolbar,
66-
Magnification,
67-
Navigation,
68-
Annotation,
69-
TextSelection,
70-
TextSearch
71-
);
72-
let pdfviewer: PdfViewer = new PdfViewer();
73-
pdfviewer.documentPath =
74-
'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
75-
pdfviewer.resourceUrl =
76-
'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
77-
pdfviewer.enableFormDesigner = false;
78-
pdfviewer.appendTo('#PdfViewer');
79-
```
76+
} from '@syncfusion/ej2-vue-pdfviewer';
77+
78+
export default {
79+
components: { 'ejs-pdfviewer': PdfViewerComponent },
80+
provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner] },
81+
data() {
82+
return {
83+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
84+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
85+
};
86+
}
87+
};
88+
</script>
89+
{% endhighlight %}
90+
{% endtabs %}
8091

8192
## Form Designer UI
8293

83-
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.
94+
When [Form Designer mode](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/formdesigner) is enabled in the 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.
8495

85-
![FormDesigner](../images/FormDesigner.gif)
96+
![FormDesigner](../../javascript-es6/images/FormDesigner.gif)
8697

8798
{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %}
8899

89-
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 TypeScript PDF Viewer documentation.
100+
For more information about creating and editing form fields in the PDF Viewer, refer to [Create form fields](./manage-form-fields/create-form-fields).
90101

91102
## Form Designer Toolbar
92103

@@ -103,91 +114,127 @@ The **Form Designer toolbar** appears at the top of the PDF Viewer and provides
103114

104115
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.
105116

106-
![Adding Text Box](../images/AddTextBox.gif)
117+
![Adding Text Box](../../javascript-es6/images/AddTextBox.gif)
118+
119+
Use the Vue example above to enable the Form Designer (see the Composition API sample).
120+
121+
For more information about creating and editing form fields in the PDF Viewer, refer to [Create form fields](./manage-form-fields/create-form-fields).
107122

108-
Use the following Code-snippet to enable Form Designer by injecting **Form Designer mode** Module.
123+
## Show or Hide the Built-in Form Designer Toolbar
124+
125+
You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/vue/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.
126+
127+
**Use this method to:**
128+
- Show the Form Designer toolbar when form design is required
129+
- Hide the toolbar to provide cleaner viewing experience
109130

110-
```ts
131+
{% tabs %}
132+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
133+
<template>
134+
<div>
135+
<button @click="showDesigner">Show Form Designer Toolbar</button>
136+
<button @click="hideDesigner">Hide Form Designer Toolbar</button>
137+
<ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
138+
</div>
139+
</template>
140+
141+
<script>
111142
import {
112-
PdfViewer,
113-
FormFields,
114-
FormDesigner,
143+
PdfViewerComponent,
115144
Toolbar,
116145
Magnification,
117146
Navigation,
118147
Annotation,
119148
TextSelection,
120149
TextSearch,
121-
} from '@syncfusion/ej2-pdfviewer';
122-
PdfViewer.Inject(
123150
FormFields,
124151
FormDesigner,
125-
Toolbar,
126-
Magnification,
127-
Navigation,
128-
Annotation,
129-
TextSelection,
130-
TextSearch
131-
);
132-
let pdfviewer: PdfViewer = new PdfViewer();
133-
pdfviewer.documentPath =
134-
'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
135-
pdfviewer.resourceUrl =
136-
'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
137-
pdfviewer.enableFormDesigner = false;
138-
pdfviewer.appendTo('#PdfViewer');
139-
```
140-
141-
For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in TypeScript PDF Viewer documentation](./manage-form-fields/create-form-fields).
142-
143-
## Show or Hide the Built-in Form Designer Toolbar
144-
145-
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.
146-
147-
**Use this method to:**
148-
- Show the Form Designer toolbar when form design is required
149-
- Hide the toolbar to provide cleaner viewing experience
150-
151-
```html
152-
<!-- Buttons to toggle the Form Designer toolbar -->
153-
<button id="showDesignerBtn">Show Form Designer Toolbar</button>
154-
<button id="hideDesignerBtn">Hide Form Designer Toolbar</button>
155-
```
156-
```ts
157-
// Wire up buttons
158-
document.getElementById('showDesignerBtn')!.onclick = () => {
159-
pdfviewer.isFormDesignerToolbarVisible=true;
160-
};
161-
document.getElementById('hideDesignerBtn')!.onclick = () => {
162-
pdfviewer.isFormDesignerToolbarVisible=false;
152+
} from '@syncfusion/ej2-vue-pdfviewer';
153+
154+
export default {
155+
components: { 'ejs-pdfviewer': PdfViewerComponent },
156+
provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner] },
157+
data() {
158+
return {
159+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
160+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
161+
};
162+
},
163+
methods: {
164+
showDesigner() {
165+
const pdfviewer = this.$refs.pdfviewer.ej2Instances;
166+
pdfviewer.isFormDesignerToolbarVisible = true;
167+
},
168+
hideDesigner() {
169+
const pdfviewer = this.$refs.pdfviewer.ej2Instances;
170+
pdfviewer.isFormDesignerToolbarVisible = false;
171+
}
172+
}
163173
};
164-
```
174+
</script>
175+
{% endhighlight %}
176+
{% endtabs %}
165177

166178
## Customize the Built-in Form Designer Toolbar
167179

168-
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.
180+
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/vue/documentation/api/pdfviewer/formdesignertoolbaritem) property.
169181

170182
This customization helps you limit the available tools and simplify the user interface.
171183

172184
**Key Points**
173185
- Include only the toolbar items you need, in the exact order you specify.
174186
- Any toolbar items not listed remain hidden, resulting in a cleaner and more focused UI.
175187

176-
```ts
177-
//Customize the Built-in Form Designer Toolbar
178-
pdfviewer.toolbarSettings = {
179-
formDesignerToolbarItems: [
180-
"TextboxTool",
181-
"PasswordTool",
182-
"CheckBoxTool",
183-
"RadioButtonTool",
184-
"DropdownTool",
185-
"ListboxTool",
186-
"DrawSignatureTool",
187-
"DeleteTool"
188-
]
188+
{% tabs %}
189+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
190+
<template>
191+
<div>
192+
<ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl" style="height:640px" />
193+
</div>
194+
</template>
195+
196+
<script>
197+
import {
198+
PdfViewerComponent,
199+
Toolbar,
200+
Magnification,
201+
Navigation,
202+
Annotation,
203+
TextSelection,
204+
TextSearch,
205+
FormFields,
206+
FormDesigner,
207+
} from '@syncfusion/ej2-vue-pdfviewer';
208+
209+
export default {
210+
components: { 'ejs-pdfviewer': PdfViewerComponent },
211+
provide: { PdfViewer: [Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch, FormFields, FormDesigner] },
212+
data() {
213+
return {
214+
documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
215+
resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib',
216+
};
217+
},
218+
mounted() {
219+
const pdfviewer = this.$refs.pdfviewer.ej2Instances;
220+
// Customize the Built-in Form Designer Toolbar
221+
pdfviewer.toolbarSettings = {
222+
formDesignerToolbarItems: [
223+
'TextboxTool',
224+
'PasswordTool',
225+
'CheckBoxTool',
226+
'RadioButtonTool',
227+
'DropdownTool',
228+
'ListboxTool',
229+
'DrawSignatureTool',
230+
'DeleteTool'
231+
]
232+
};
233+
}
189234
};
190-
```
235+
</script>
236+
{% endhighlight %}
237+
{% endtabs %}
191238

192239
## Move, Resize, and Edit Form Fields
193240

@@ -197,7 +244,7 @@ You can move, resize, and edit an existing form field directly in the PDF Viewer
197244

198245
- Resize a field using the handles displayed on the field boundary.
199246

200-
![Moveing and Resizing a form field](../images/move-resize-forms.gif)
247+
![Moveing and Resizing a form field](../../javascript-es6/images/move-resize-forms.gif)
201248

202249
- 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.
203250
For more information, see Editing Form Fields

‎Document-Processing/PDF/PDF-Viewer/vue/forms/form-field-events.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Form Field Events in Vue PDF Viewer | Syncfusion
4-
description: Learn about form field events in the Syncfusion Vue PDF Viewer component and how to handle them.
4+
description: Learn here all about form field events in the Syncfusion Vue PDF Viewer component and how to handle them.
55
platform: document-processing
66
control: PDF Viewer
77
documentation: ug

‎Document-Processing/PDF/PDF-Viewer/vue/forms/import-export-form-fields/import-export-events.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Import/Export events in the Vue PDF Viewer | Syncfusion
4-
description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion Vue PDF Viewer.
4+
description: Learn how to handle Import/Export events for PDF form fields in the Syncfusion Vue PDF Viewer component.
55
platform: document-processing
66
control: PDF Viewer
77
documentation: ug

‎Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/modify-form-fields.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ control: PDF Viewer
77
documentation: ug
88
---
99

10-
# Modify PDF Form Field Properties
10+
# Modify PDF Form Field Properties in Vue
1111
You can modify form fields using the **UI** or **API**.
1212

1313
## Modify PDF Form Field Properties using the UI

‎Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/move-resize-form-fields.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ control: PDF Viewer
77
documentation: ug
88
---
99

10-
# Move and Resize PDF Form Fields
10+
# Move and Resize PDF Form Fields in Vue
1111
- **Move**: Drag the form field to reposition it.
1212
- **Resize**: Use the resize handles to change width and height.
1313

‎Document-Processing/PDF/PDF-Viewer/vue/forms/manage-form-fields/remove-form-fields.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ control: PDF Viewer
77
documentation: ug
88
---
99

10-
# Remove PDF Form Fields from a PDF
10+
# Remove PDF Form Fields from a PDF in Vue
1111

1212
## Remove Form Fields Using the UI
1313
**Steps:**

0 commit comments

Comments
 (0)