From c12e78a2e8a569fdbe6f4122ff24ad0ccf878277 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Tue, 21 Apr 2026 14:02:55 +0530 Subject: [PATCH 1/3] 1023076: Updated preview samples for form filling in React, Vue and JavaScript --- .../prefilledforms-cs1/index.css | 14 +++ .../prefilledforms-cs1/index.html | 38 ++++++ .../prefilledforms-cs1/index.js | 87 +++++++++++++ .../prefilledforms-cs1/systemjs.config.js | 51 ++++++++ .../react/prefilledforms-cs1/app/index.jsx | 87 +++++++++++++ .../react/prefilledforms-cs1/app/index.tsx | 87 +++++++++++++ .../react/prefilledforms-cs1/index.css | 8 ++ .../react/prefilledforms-cs1/index.html | 31 +++++ .../prefilledforms-cs1/systemjs.config.js | 61 +++++++++ .../prefilledforms-cs1/app-composition.vue | 103 ++++++++++++++++ .../pdfviewer/vue/prefilledforms-cs1/app.vue | 116 ++++++++++++++++++ .../vue/prefilledforms-cs1/index.css | 13 ++ .../vue/prefilledforms-cs1/index.html | 23 ++++ .../pdfviewer/vue/prefilledforms-cs1/index.js | 98 +++++++++++++++ .../vue/prefilledforms-cs1/systemjs.config.js | 50 ++++++++ 15 files changed, 867 insertions(+) create mode 100644 Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.css create mode 100644 Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.html create mode 100644 Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.js create mode 100644 Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/app/index.jsx create mode 100644 Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/app/index.tsx create mode 100644 Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/index.css create mode 100644 Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/index.html create mode 100644 Document-Processing/code-snippet/pdfviewer/react/prefilledforms-cs1/systemjs.config.js create mode 100644 Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/app-composition.vue create mode 100644 Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/app.vue create mode 100644 Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.css create mode 100644 Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.html create mode 100644 Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/index.js create mode 100644 Document-Processing/code-snippet/pdfviewer/vue/prefilledforms-cs1/systemjs.config.js 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'); From df3edc5cc97d0e7dfdd54abc9b04519c06b1cbcf Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Tue, 21 Apr 2026 14:16:12 +0530 Subject: [PATCH 2/3] 1023076: Updated preview Sample Navigation in UG Documentation --- .../PDF/PDF-Viewer/javascript-es5/forms/form-designer.md | 2 +- .../PDF/PDF-Viewer/javascript-es5/forms/form-filling.md | 2 +- Document-Processing/PDF/PDF-Viewer/react/forms/form-designer.md | 2 ++ Document-Processing/PDF/PDF-Viewer/react/forms/form-filling.md | 2 +- Document-Processing/PDF/PDF-Viewer/vue/forms/form-designer.md | 2 +- Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md | 2 +- 6 files changed, 7 insertions(+), 5 deletions(-) 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..ce70734783 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 @@ -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..5f1c80daf2 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md @@ -92,7 +92,7 @@ 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 From 55789eb987d9f8359d1ced89990a5b69abc51f28 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Tue, 21 Apr 2026 14:51:27 +0530 Subject: [PATCH 3/3] 1023076: Resolved CI failures --- .../PDF/PDF-Viewer/javascript-es5/forms/form-filling.md | 2 +- Document-Processing/PDF/PDF-Viewer/vue/forms/form-filling.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) 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 ce70734783..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 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 5f1c80daf2..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 @@ -96,7 +96,7 @@ The PDF Viewer supports common form fields such as text boxes, check boxes, radi ## 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.