forked from syncfusion/ej2-vue-samples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform-designer.vue
114 lines (111 loc) · 6.77 KB
/
form-designer.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<div>
<div class="control-section">
<ejs-pdfviewer id="pdfviewer" ref="pdfviewer" :serviceUrl="serviceUrl" :documentPath="documentPath" :documentLoad="documentLoad" :enableFormFieldsValidation="true" :showNotificationDialog="false" :validateFormFields="validateFormFields"></ejs-pdfviewer>
</div>
<div id="action-description">
<p>This sample demonstrates the creation of the supported Form fields in the PDF Viewer such as Textbox, Password, Checkbox, Radio Button, Drop Down, List box, Signature, and Initial. We can also customize these fields and can include new fields through the user interaction by switching to the designer mode.</p>
</div>
<div id="description">
<p>
More information on form designer support can be found in this
<a target="_blank"
href="https://ej2.syncfusion.com/vue/documentation/pdfviewer/getting-started">
documentation section</a>.
</p>
</div>
</div>
</template>
<style scoped>
#pdfviewer {
height: 640px;
}
</style>
<script>
import Vue from "vue";
import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner } from "@syncfusion/ej2-vue-pdfviewer";
Vue.use(PdfViewerPlugin);
var viewer;
export default Vue.extend({
data: function() {
return {
serviceUrl:"https://ej2services.syncfusion.com/production/web-services/api/pdfviewer",
documentPath:"FormDesigner.pdf"
}
},
provide: {
PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormFields, FormDesigner]
},
methods: {
documentLoad: function (args) {
if(args.documentName === 'FormDesigner.pdf')
{
viewer = this.$refs.pdfviewer.ej2Instances;
viewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "Last Name", bounds: { X: 530, Y: 229, Width: 150, Height: 24 } });
viewer.formDesignerModule.addFormField("RadioButton", { bounds: { X: 148, Y: 289, Width: 18, Height: 18 }, name: "Gender", isSelected: false });
viewer.formDesignerModule.addFormField("RadioButton", { bounds: { X: 292, Y: 289, Width: 18, Height: 18 }, name: "Gender", isSelected: false });
viewer.formDesignerModule.addFormField("Textbox", { name: "DOB Month", bounds: { X: 146, Y: 320, Width: 35, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "DOB Date", bounds: { X: 193, Y: 320, Width: 35, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "DOB Year", bounds: { X: 242, Y: 320, Width: 35, Height: 24 } });
viewer.formDesignerModule.addFormField("InitialField", { name: "Agree", bounds: { X: 148, Y: 408, Width: 200, Height: 43 } });
viewer.formDesignerModule.addFormField("InitialField", { name: "Do Not Agree", bounds: { X: 148, Y: 466, Width: 200, Height: 43 } });
viewer.formDesignerModule.addFormField("CheckBox", { name: "Text Message", bounds: { X: 56, Y: 664, Width: 20, Height: 20 }, isChecked: false });
viewer.formDesignerModule.addFormField("CheckBox", { name: "Email", bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: false });
viewer.formDesignerModule.addFormField("CheckBox", { name: "Appointment Reminder", bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: false });
viewer.formDesignerModule.addFormField("CheckBox", { name: "Request for Customerservice", bounds: { X: 56, Y: 778, Width: 20, Height: 20 }, isChecked: false });
viewer.formDesignerModule.addFormField("CheckBox", { name: "Information Billing", bounds: { X: 290, Y: 740, Width: 20, Height: 20 }, isChecked: false });
viewer.formDesignerModule.addFormField("Textbox", { name: "My Email", bounds: { X: 146, Y: 850, Width: 200, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "My Phone", bounds: { X: 482, Y: 850, Width: 200, Height: 24 } });
viewer.formDesignerModule.addFormField("SignatureField", { name: "Sign", bounds: { X: 57, Y: 923, Width: 200, Height: 43 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "DOS Month", bounds: { X: 386, Y: 923, Width: 35, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "DOS Date", bounds: { X: 434, Y: 923, Width: 35, Height: 24 } });
viewer.formDesignerModule.addFormField("Textbox", { name: "DOS Year", bounds: { X: 482, Y: 923, Width: 35, Height: 24 } });
}
},
validateFormFields: function (args) {
var errorMessage = "Required Field(s): ";
var forms = viewer.formFieldCollections;
var flag = false;
var radioGroupName = "";
for (var i = 0; i < forms.length; i++) {
var text = "";
if (forms[i].isRequired == true)
{
if (forms[i].type.toString() == "Checkbox" && forms[i].isChecked == false) {
text = forms[i].name;
}
else if (forms[i].type == "RadioButton" && flag == false) {
radioGroupName = forms[i].name;
if(forms[i].isSelected == true)
flag = true;
}
else if (forms[i].type.toString() != "Checkbox" && forms[i].type != "RadioButton" && forms[i].value == ""){
text = forms[i].name;
}
if(text != "")
{
if (errorMessage == "Required Field(s): ") {
errorMessage += text;
}
else {
errorMessage += ", " + text;
}
}
}
}
if(!flag && radioGroupName != "")
{
if(errorMessage == "Required Field(s): ")
errorMessage += radioGroupName;
else
errorMessage += ", " + radioGroupName;
}
if (errorMessage != "Required Field(s): ") {
viewer.showNotificationPopup(errorMessage);
}
}
}
});
</script>