1023076: Stack Blitz issue in fill forms.

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.
 

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 
 

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

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
 

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).
 

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.
 

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%;
+}

Document-Processing/code-snippet/pdfviewer/javascript-es5/prefilledforms-cs1/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html><html lang="en"><head>
+    <title>EJ2 PDF Viewer</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Typescript PDF Viewer Control">
+    <meta name="author" content="Syncfusion">
+    <link href="index.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-pdfviewer/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-inputs/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-notifications/styles/material.css" rel="stylesheet">
+
+    <!-- Essential JS 2 PDF Viewer's script --> 
+    <script src="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2.min.js" type="text/javascript"></script>
+
+
+</head>
+<body>
+
+    <div id="container">
+        <div id="PdfViewer" style="height:500px;width:100%;"></div>        
+    </div>
+
+
+<script>
+var ele = document.getElementById('container');
+if(ele) {
+  ele.style.visibility = "visible";
+}   
+</script>
+<script src="index.js" type="text/javascript"></script>
+</body></html>

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' });
+}

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";
+});