diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md index e9d62f88f8..863ee8573d 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-designer.md @@ -77,7 +77,7 @@ When [Form Designer mode](https://ej2.syncfusion.com/javascript/documentation/ap ![FormDesigner](../../javascript-es6/images/FormDesigner.gif) -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} +{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1" %} 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 JavaScript PDF Viewer documentation. diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md index 59b895ee2d..fb94ce9707 100644 --- a/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/forms/form-filling.md @@ -22,7 +22,7 @@ The Syncfusion PDF Viewer supports filling form fields programmatically, via the 3. [Importing form field data](#fill-pdf-forms-through-import-data) - Import form data to prefill fields from a JSON/FDF/XFDF source so forms are ready for review or signing. + Import form data to pre-fill fields from a JSON/FDF/XFDF source so forms are ready for review or signing. ## Fill PDF forms programmatically @@ -60,7 +60,7 @@ The Syncfusion PDF Viewer lets users fill form fields directly in the viewer. Cl The PDF Viewer supports text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Filled values remain editable during the viewing session. -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} +{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1" %} ## Fill PDF forms through Import Data diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md index 72139f7f8c..1ae006a591 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md @@ -49,6 +49,8 @@ When [Form Designer mode](https://ej2.syncfusion.com/react/documentation/api/pdf ![FormDesigner](../../javascript-es6/images/FormDesigner.gif) +{% previewsample "/document-processing/code-snippet/pdfviewer/react/prefilledforms-cs1" %} + 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. ### Enable Form Designer diff --git a/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md index e33900cb35..937d0040fc 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md @@ -95,7 +95,7 @@ Users can click form controls and enter/select values. Supported field types inc ![Form Filling](../../javascript-es6/images/FormFields.gif) -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} +{% previewsample "/document-processing/code-snippet/pdfviewer/react/prefilledforms-cs1" %} ### 3. Fill form fields through imported data diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md index 81a4a5184f..7708e8bfcb 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md @@ -95,7 +95,7 @@ When [Form Designer mode](https://ej2.syncfusion.com/vue/documentation/api/pdfvi ![FormDesigner](../../javascript-es6/images/FormDesigner.gif) -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} +{% previewsample "/document-processing/code-snippet/pdfviewer/vue/prefilledforms-cs1" %} For more information about creating and editing form fields in the PDF Viewer, refer to [Create form fields](./manage-form-fields/create-form-fields). diff --git a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md index fa5f5d0d88..a01e4111eb 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md @@ -22,7 +22,7 @@ The Syncfusion PDF Viewer supports three form-filling approaches: 3. [Importing Form Field Data](#fill-pdf-forms-through-import-data) - The PDF Viewer can import form field data into an existing PDF document to prefill fields from external data sources. + The PDF Viewer can import form field data into an existing PDF document to pre-fill fields from external data sources. ## Fill PDF forms programmatically @@ -92,11 +92,11 @@ The PDF Viewer enables end users to complete form fields directly in the interfa The PDF Viewer supports common form fields such as text boxes, check boxes, radio buttons, drop-down lists, list boxes, and signature fields. Entered values remain editable during the viewing session. -{% previewsample "/document-processing/code-snippet/pdfviewer/javascript-es6/prefilledforms-cs1" %} +{% previewsample "/document-processing/code-snippet/pdfviewer/vue/prefilledforms-cs1" %} ## Fill PDF forms through Import Data -The PDF Viewer can import form field data into an existing PDF document using the [importFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importformfields) API. This enables prefilling fields from external data sources without manual entry. +The PDF Viewer can import form field data into an existing PDF document using the [importFormFields](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/index-default#importformfields) API. This enables pre-filling fields from external data sources without manual entry. Imported data is mapped to PDF form fields by field name. The imported values appear in the viewer and remain editable if the document permits modification. Refer to Import Form Data for details about expected data formats and mapping rules. diff --git a/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.css b/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.css new file mode 100644 index 0000000000..3e3720eea5 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.css @@ -0,0 +1,14 @@ +#container { + visibility: hidden; +} + +#loader { + color: #008cff; + font-family: 'Helvetica Neue','calibiri'; + font-size: 14px; + height: 40px; + left: 45%; + position: absolute; + top: 45%; + width: 30%; +} diff --git a/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.html b/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.html new file mode 100644 index 0000000000..7cbe3e558c --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.html @@ -0,0 +1,38 @@ + + EJ2 PDF Viewer + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.js b/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.js new file mode 100644 index 0000000000..1ef96ffb36 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.js @@ -0,0 +1,87 @@ +var pdfviewer = new ej.pdfviewer.PdfViewer({ + documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf', + resourceUrl:'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib' +}); +ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, + ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer); +pdfviewer.appendTo('#PdfViewer'); +pdfviewer.documentLoad = function (args) { +pdfviewer.formDesignerModule.addFormField("Textbox", { name: "First Name", bounds: { X: 146, Y: 229, Width: 150, Height: 24 } }); +pdfviewer.formDesignerModule.addFormField("Textbox", { name: "Middle Name", bounds: { X: 338, Y: 229, Width: 150, Height: 24 }}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'Last Name',bounds: { X: 530, Y: 229, Width: 150, Height: 24 },}); +pdfviewer.formDesignerModule.addFormField('RadioButton', {bounds: { X: 148, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,}); +pdfviewer.formDesignerModule.addFormField('RadioButton', {bounds: { X: 292, Y: 289, Width: 18, Height: 18 },name: 'Gender',isSelected: false,}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Month',bounds: { X: 146, Y: 320, Width: 35, Height: 24 },}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Date',bounds: { X: 193, Y: 320, Width: 35, Height: 24 },}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOB Year',bounds: { X: 242, Y: 320, Width: 35, Height: 24 },}); +pdfviewer.formDesignerModule.addFormField('InitialField', {name: 'Agree',bounds: { X: 148, Y: 408, Width: 200, Height: 43 },}); +pdfviewer.formDesignerModule.addFormField('InitialField', {name: 'Do Not Agree',bounds: { X: 148, Y: 466, Width: 200, Height: 43 },}); +pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Text Message',bounds: { X: 56, Y: 664, Width: 20, Height: 20 },isChecked: false,}); +pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Email',bounds: { X: 242, Y: 664, Width: 20, Height: 20 },isChecked: false,}); +pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Appointment Reminder',bounds: { X: 56, Y: 740, Width: 20, Height: 20 },isChecked: false,}); +pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Request for Customerservice',bounds: { X: 56, Y: 778, Width: 20, Height: 20 },isChecked: false,}); +pdfviewer.formDesignerModule.addFormField('CheckBox', {name: 'Information Billing',bounds: { X: 290, Y: 740, Width: 20, Height: 20 },isChecked: false,}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'My Email',bounds: { X: 146, Y: 850, Width: 200, Height: 24 },}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'My Phone',bounds: { X: 482, Y: 850, Width: 200, Height: 24 },}); +pdfviewer.formDesignerModule.addFormField('SignatureField', {name: 'Sign',bounds: { X: 57, Y: 923, Width: 200, Height: 43 },}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Month',bounds: { X: 386, Y: 923, Width: 35, Height: 24 },}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Date',bounds: { X: 434, Y: 923, Width: 35, Height: 24 },}); +pdfviewer.formDesignerModule.addFormField('Textbox', {name: 'DOS Year',bounds: { X: 482, Y: 923, Width: 35, Height: 24 },}); +// Fill all fields programmatically +const fields = pdfviewer.formFieldCollections || []; + +const setVal = (f, props) => { + if (!f) return; + + Object.assign(f, props); + + // Prefer updateFormFieldsValue if available + if (typeof pdfviewer.updateFormFieldsValue === 'function') { + pdfviewer.updateFormFieldsValue(f); + } else if ( + pdfviewer.formDesignerModule && + typeof pdfviewer.formDesignerModule.updateFormField === 'function' + ) { + pdfviewer.formDesignerModule.updateFormField(f, props); + } +}; + +// Text fields +setVal(fields.find(x => x.name === 'First Name'), { value: 'John' }); +setVal(fields.find(x => x.name === 'Middle Name'), { value: 'Mitchel' }); +setVal(fields.find(x => x.name === 'Last Name'), { value: 'Clarke' }); + +// Radio button (Gender – select first option, e.g., Male) +const genders = fields.filter(x => x.name === 'Gender'); +if (genders.length > 0) { + setVal(genders[0], { isSelected: true }); +} + +// Date of Birth +setVal(fields.find(x => x.name === 'DOB Month'), { value: '01' }); +setVal(fields.find(x => x.name === 'DOB Date'), { value: '15' }); +setVal(fields.find(x => x.name === 'DOB Year'), { value: '1980' }); + +// Agree / Confirmation field +setVal(fields.find(x => x.name === 'Agree'), { + value: 'John Mitchel Clarke' +}); + +// Contact details +setVal(fields.find(x => x.name === 'My Email'), { + value: 'john.mitchel@example.com' +}); +setVal(fields.find(x => x.name === 'My Phone'), { + value: '555-123-4567' +}); + +// Signature field (text placeholder – image needed for actual signature) +setVal(fields.find(x => x.name === 'Sign'), { + value: 'John Mitchel Clarke' +}); + +// Date of Signature +setVal(fields.find(x => x.name === 'DOS Month'), { value: '01' }); +setVal(fields.find(x => x.name === 'DOS Date'), { value: '21' }); +setVal(fields.find(x => x.name === 'DOS Year'), { value: '2026' }); +} \ No newline at end of file diff --git a/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/systemjs.config.js b/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/systemjs.config.js new file mode 100644 index 0000000000..2f968ccae3 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/systemjs.config.js @@ -0,0 +1,51 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.2.3/" + }, + map: { + main: "index.ts", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js', + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-inplace-editor": "syncfusion:ej2-inplace-editor/dist/ej2-inplace-editor.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-pdfviewer": "syncfusion:ej2-pdfviewer/dist/ej2-pdfviewer.umd.min.js", + "@syncfusion/ej2-drawings": "syncfusion:ej2-drawings/dist/ej2-drawings.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-pdf": "syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js" + }, + meta: { + '*.json': { loader: 'plugin-json' } + } +}); + +System.import('index.ts').catch(console.error.bind(console)).then(function () { + document.getElementById('loader').style.display = "none"; + document.getElementById('container').style.visibility = "visible"; +}); diff --git a/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/app/index.jsx b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/app/index.jsx new file mode 100644 index 0000000000..37b694e472 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/app/index.jsx @@ -0,0 +1,87 @@ +import * as ReactDOM from 'react-dom'; +import * as React from 'react'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, + Print, TextSelection, Annotation, TextSearch, Inject, FormDesigner, FormFields, PageOrganizer} from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + function documentLoaded(){ + var viewer = document.getElementById('container').ej2_instances[0]; + 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 },}); + // Fill all fields programmatically + const fields = viewer.formFieldCollections || []; + + const setVal = (f, props) => { + if (!f) return; + Object.assign(f, props); + // prefer updateFormFieldsValue if available + if (typeof viewer.updateFormFieldsValue === 'function') { + viewer.updateFormFieldsValue(f); + } else if (viewer.formDesignerModule && typeof viewer.formDesignerModule.updateFormField === 'function') { + viewer.formDesignerModule.updateFormField(f, props); + } + }; + + setVal(fields.find((x) => x.name === 'First Name'), { value: 'John' }); + setVal(fields.find((x) => x.name === 'Middle Name'), { value: 'Mitchel' }); + setVal(fields.find((x) => x.name === 'Last Name'), { value: 'Clarke' }); + + // Select first Gender radio button (assuming first added is Male) + const genders = fields.filter((x) => x.name === 'Gender'); + if (genders.length) { + setVal(genders[0], { isSelected: true }); + } + + setVal(fields.find((x) => x.name === 'DOB Month'), { value: '01' }); + setVal(fields.find((x) => x.name === 'DOB Date'), { value: '15' }); + setVal(fields.find((x) => x.name === 'DOB Year'), { value: '1980' }); + + setVal(fields.find((x) => x.name === 'Agree'), { value: 'John Mitchel Clarke' }); + + setVal(fields.find((x) => x.name === 'My Email'), { value: 'john.mitchel@example.com' }); + setVal(fields.find((x) => x.name === 'My Phone'), { value: '555-123-4567' }); + + // Signature field: set a simple value placeholder (rendering a drawn signature programmatically requires a signature image) + setVal(fields.find((x) => x.name === 'Sign'), { value: 'John Mitchel Clarke' }); + + setVal(fields.find((x) => x.name === 'DOS Month'), { value: '01' }); + setVal(fields.find((x) => x.name === 'DOS Date'), { value: '21' }); + setVal(fields.find((x) => x.name === 'DOS Year'), { value: '2026' }); + } + return (
+
+ {/* Render the PDF Viewer */} + + + + +
+
); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/app/index.tsx b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/app/index.tsx new file mode 100644 index 0000000000..563f3b51b2 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/app/index.tsx @@ -0,0 +1,87 @@ +import * as ReactDOM from 'react-dom'; +import * as React from 'react'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, + Print, TextSelection, Annotation, TextSearch, Inject, FormDesigner, FormFields, PageOrganizer} from '@syncfusion/ej2-react-pdfviewer'; + +export function App() { + function documentLoaded(){ + var viewer = document.getElementById('container').ej2_instances[0]; + 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: true }); + viewer.formDesignerModule.addFormField('CheckBox', { name: 'Email', bounds: { X: 242, Y: 664, Width: 20, Height: 20 }, isChecked: true }); + viewer.formDesignerModule.addFormField('CheckBox', { name: 'Appointment Reminder', bounds: { X: 56, Y: 740, Width: 20, Height: 20 }, isChecked: true }); + 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 } }); + // Fill all fields programmatically + const fields = viewer.formFieldCollections || []; + + const setVal = (f: any, props: any) => { + if (!f) return; + Object.assign(f, props); + // prefer updateFormFieldsValue if available + if (typeof viewer.updateFormFieldsValue === 'function') { + viewer.updateFormFieldsValue(f); + } else if (viewer.formDesignerModule && typeof viewer.formDesignerModule.updateFormField === 'function') { + viewer.formDesignerModule.updateFormField(f, props); + } + }; + + setVal(fields.find((x: any) => x.name === 'First Name'), { value: 'John' }); + setVal(fields.find((x: any) => x.name === 'Middle Name'), { value: 'Mitchel' }); + setVal(fields.find((x: any) => x.name === 'Last Name'), { value: 'Clarke' }); + + // Select first Gender radio button (assuming first added is Male) + const genders = fields.filter((x: any) => x.name === 'Gender'); + if (genders.length) { + setVal(genders[0], { isSelected: true }); + } + + setVal(fields.find((x: any) => x.name === 'DOB Month'), { value: '01' }); + setVal(fields.find((x: any) => x.name === 'DOB Date'), { value: '15' }); + setVal(fields.find((x: any) => x.name === 'DOB Year'), { value: '1980' }); + + setVal(fields.find((x: any) => x.name === 'Agree'), { value: 'John Mitchel Clarke' }); + + setVal(fields.find((x: any) => x.name === 'My Email'), { value: 'john.mitchel@example.com' }); + setVal(fields.find((x: any) => x.name === 'My Phone'), { value: '555-123-4567' }); + + // Signature field: set a simple value placeholder (rendering a drawn signature programmatically requires a signature image) + setVal(fields.find((x: any) => x.name === 'Sign'), { value: 'John Mitchel Clarke' }); + + setVal(fields.find((x: any) => x.name === 'DOS Month'), { value: '01' }); + setVal(fields.find((x: any) => x.name === 'DOS Date'), { value: '21' }); + setVal(fields.find((x: any) => x.name === 'DOS Year'), { value: '2026' }); + } + return (
+
+ {/* Render the PDF Viewer */} + + + + +
+
); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/index.css b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/index.css new file mode 100644 index 0000000000..4421f12cc6 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/index.css @@ -0,0 +1,8 @@ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css"; \ No newline at end of file diff --git a/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/index.html b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/index.html new file mode 100644 index 0000000000..5e380356e8 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/index.html @@ -0,0 +1,31 @@ + + + + + Syncfusion React Button + + + + + + + + + + + + + + + + + + + + +
+
Loading....
+
+ + + diff --git a/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/systemjs.config.js b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/systemjs.config.js new file mode 100644 index 0000000000..c7df41bcde --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/systemjs.config.js @@ -0,0 +1,61 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.2.3/" + }, + map: { + app: "app", + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "plugin-json": "https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-drawings": "syncfusion:ej2-drawings/dist/ej2-drawings.umd.min.js", + "@syncfusion/ej2-inplace-editor": "syncfusion:ej2-inplace-editor/dist/ej2-inplace-editor.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-pdfviewer": "syncfusion:ej2-pdfviewer/dist/ej2-pdfviewer.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-pdfviewer": "syncfusion:ej2-react-pdfviewer/dist/ej2-react-pdfviewer.umd.min.js", + "@syncfusion/ej2-react-buttons": "syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js", + "@syncfusion/ej2-pdf": "syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js", + "@syncfusion/ej2-markdown-converter":"syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-interactive-chat":"syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js", + "@syncfusion/ej2-pdf-data-extract": "syncfusion:ej2-pdf-data-extract/dist/ej2-pdf-data-extract.umd.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + }, + packages: { + 'app': { main: 'index', defaultExtension: 'tsx' }, + } +}); + +System.import('app'); diff --git a/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/app-composition.vue b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/app-composition.vue new file mode 100644 index 0000000000..2521606bd4 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/app-composition.vue @@ -0,0 +1,103 @@ + + + + diff --git a/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/app.vue b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/app.vue new file mode 100644 index 0000000000..d0e35ecc48 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/app.vue @@ -0,0 +1,116 @@ + + + + diff --git a/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.css b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.css new file mode 100644 index 0000000000..f2f2fa6a50 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.css @@ -0,0 +1,13 @@ + + + + + + + + + + +#pdfViewer { + height: 640px; +} diff --git a/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.html b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.html new file mode 100644 index 0000000000..1ae5118ea0 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.html @@ -0,0 +1,23 @@ + + + + + + + EJ2 Vue Sample + + + + + + + + + + + +
Loading....
+ + + + diff --git a/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.js b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.js new file mode 100644 index 0000000000..56dd646492 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.js @@ -0,0 +1,98 @@ + +import Vue from 'vue'; +import { PdfViewerPlugin, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, + ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-vue-pdfviewer'; +Vue.use(PdfViewerPlugin); +var viewer; + +new Vue({ + el: '#app', + template: ` +
+ + +
+`, + + name: 'app', + data () { + return { + documentPath:"https://cdn.syncfusion.com/content/pdf/form-designer.pdf", + resourceUrl:"https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib", + }; + }, + provide: { + PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, + ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, PageOrganizer]}, + +methods: { + documentLoad: function (args) { + 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 },}); + // Fill all fields programmatically + const fields = viewer.formFieldCollections || []; + + const setVal = (f, props) => { + if (!f) return; + Object.assign(f, props); + // prefer updateFormFieldsValue if available + if (typeof viewer.updateFormFieldsValue === 'function') { + viewer.updateFormFieldsValue(f); + } else if (viewer.formDesignerModule && typeof viewer.formDesignerModule.updateFormField === 'function') { + viewer.formDesignerModule.updateFormField(f, props); + } + }; + + setVal(fields.find((x) => x.name === 'First Name'), { value: 'John' }); + setVal(fields.find((x) => x.name === 'Middle Name'), { value: 'Mitchel' }); + setVal(fields.find((x) => x.name === 'Last Name'), { value: 'Clarke' }); + + // Select first Gender radio button (assuming first added is Male) + const genders = fields.filter((x) => x.name === 'Gender'); + if (genders.length) { + setVal(genders[0], { isSelected: true }); + } + + setVal(fields.find((x) => x.name === 'DOB Month'), { value: '01' }); + setVal(fields.find((x) => x.name === 'DOB Date'), { value: '15' }); + setVal(fields.find((x) => x.name === 'DOB Year'), { value: '1980' }); + + setVal(fields.find((x) => x.name === 'Agree'), { value: 'John Mitchel Clarke' }); + + setVal(fields.find((x) => x.name === 'My Email'), { value: 'john.mitchel@example.com' }); + setVal(fields.find((x) => x.name === 'My Phone'), { value: '555-123-4567' }); + + // Signature field: set a simple value placeholder (rendering a drawn signature programmatically requires a signature image) + setVal(fields.find((x) => x.name === 'Sign'), { value: 'John Mitchel Clarke' }); + + setVal(fields.find((x) => x.name === 'DOS Month'), { value: '01' }); + setVal(fields.find((x) => x.name === 'DOS Date'), { value: '21' }); + setVal(fields.find((x) => x.name === 'DOS Year'), { value: '2026' }); + } + } +}); \ No newline at end of file diff --git a/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/systemjs.config.js b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/systemjs.config.js new file mode 100644 index 0000000000..038815db12 --- /dev/null +++ b/Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/systemjs.config.js @@ -0,0 +1,50 @@ +System.config({ + transpiler: "typescript", + typescriptOptions: { + compilerOptions: { + target: "umd", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/32.2.3/" + }, + map: { + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + vue: "https://unpkg.com/vue@2.6.14/dist/vue.min.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-drawings": "syncfusion:ej2-drawings/dist/ej2-drawings.umd.min.js", + "@syncfusion/ej2-inplace-editor": "syncfusion:ej2-inplace-editor/dist/ej2-inplace-editor.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-richtexteditor": "syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js", + "@syncfusion/ej2-filemanager": "syncfusion:ej2-filemanager/dist/ej2-filemanager.umd.min.js", + "@syncfusion/ej2-layouts": "syncfusion:ej2-layouts/dist/ej2-layouts.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-pdfviewer": "syncfusion:ej2-pdfviewer/dist/ej2-pdfviewer.umd.min.js", + "@syncfusion/ej2-vue-base": "syncfusion:ej2-vue-base/dist/ej2-vue-base.umd.min.js", + "@syncfusion/ej2-vue-pdfviewer": "syncfusion:ej2-vue-pdfviewer/dist/ej2-vue-pdfviewer.umd.min.js", + "@syncfusion/ej2-notifications":"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-pdf": "syncfusion:ej2-pdf/dist/ej2-pdf.umd.min.js", + "@syncfusion/ej2-pdf-data-extract": "syncfusion:ej2-pdf-data-extract/dist/ej2-pdf-data-extract.umd.min.js", + "@syncfusion/ej2-markdown-converter":"syncfusion:ej2-markdown-converter/dist/ej2-markdown-converter.umd.min.js", + "@syncfusion/ej2-interactive-chat":"syncfusion:ej2-interactive-chat/dist/ej2-interactive-chat.umd.min.js" + } +}); + +System.import('index.js');