SyncfusionExamples · AnanthaGokulaRaman · Dec 31, 2025 · Dec 29, 2025 · Dec 30, 2025
diff --git a/Form Designer/Access Form Fields Collections/index.html b/Form Designer/Access Form Fields Collections/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="https://cdn.syncfusion.com/ej2/31.2.2/ej2-base/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-pdfviewer/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-inputs/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-notifications/styles/material.css" rel="stylesheet">
+
+    <!-- Essential JS 2 PDF Viewer's script --> 
+    <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+
+<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+</head>
+<body>
+    <div id="container">
+        <button id="formFieldCollection">Fetch Form Fields Collection</button>
+        <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>
diff --git a/Form Designer/Access Form Fields Collections/index.js b/Form Designer/Access Form Fields Collections/index.js
@@ -0,0 +1,14 @@
+var pdfviewer = new ej.pdfviewer.PdfViewer({
+  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+  resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib",
+  enableFormDesigner: true, //Set 'false' to disable form designer
+});
+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');
+
+  //Click event to get formfields collection
+document.getElementById('formFieldCollection').addEventListener('click', function() {
+    var fields = pdfviewer.formFieldCollection; // Gets all form fields
+    console.log(fields); // Log the formField Collection
+});
diff --git a/Form Designer/Create form fields/index.html b/Form Designer/Create form fields/index.html
@@ -0,0 +1,49 @@
+<!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="https://cdn.syncfusion.com/ej2/31.2.2/ej2-base/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-pdfviewer/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-inputs/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-notifications/styles/material.css" rel="stylesheet">
+
+    <!-- Essential JS 2 PDF Viewer's script --> 
+    <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+
+<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+</head>
+<body>
+    <div id="container">
+        <div class="toolbar">
+    <button id="btnAddTextbox">Add Textbox</button>
+    <button id="btnAddPassword">Add Password</button>
+    <button id="btnAddCheckbox">Add CheckBox</button>
+    <button id="btnAddRadioGroup">Add Radio Group (Gender)</button>
+    <button id="btnAddListBox">Add ListBox</button>
+    <button id="btnAddDropDown">Add DropDown</button>
+    <button id="btnAddSignature">Add Signature</button>
+    <button id="btnAddInitial">Add Initial</button>
+    <button id="btnDrawPassword">Draw Next As Password (setFormFieldMode)</button>
+  </div>
+
+        <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>
diff --git a/Form Designer/Create form fields/index.js b/Form Designer/Create form fields/index.js
@@ -0,0 +1,119 @@
+(function () {
+  // Initialize the PDF Viewer
+  var pdfviewer = new ej.pdfviewer.PdfViewer({
+    documentPath: 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf',
+    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
+  });
+
+  ej.pdfviewer.PdfViewer.Inject(
+    ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
+    ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView,
+    ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner
+  );
+
+  pdfviewer.appendTo('#PdfViewer');
+
+  // Optional: add an initial example after document load (can be removed)
+  pdfviewer.documentLoad = function () {
+    // Example: place a default textbox when loaded
+    try {
+      pdfviewer.formDesignerModule.addFormField('Textbox', {
+        name: 'First Name',
+        bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+      });
+    } catch (e) { console.warn(e); }
+  };
+
+  // Button handlers
+  function addTextbox() {
+    pdfviewer.formDesignerModule.addFormField('Textbox', {
+      name: 'First Name',
+      bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+    });
+  }
+
+  function addPassword() {
+    pdfviewer.formDesignerModule.addFormField('Password', {
+      name: 'Account Password',
+      bounds: { X: 148, Y: 270, Width: 180, Height: 24 }
+    });
+  }
+
+  function addCheckbox() {
+    pdfviewer.formDesignerModule.addFormField('CheckBox', {
+      name: 'Subscribe',
+      isChecked: false,
+      bounds: { X: 56, Y: 664, Width: 20, Height: 20 }
+    });
+  }
+
+  function addRadioGroup() {
+    // Group by same name: 'Gender'
+    pdfviewer.formDesignerModule.addFormField('RadioButton', {
+      name: 'Gender',
+      isSelected: false,
+      bounds: { X: 148, Y: 289, Width: 18, Height: 18 }
+    });
+    pdfviewer.formDesignerModule.addFormField('RadioButton', {
+      name: 'Gender',
+      isSelected: false,
+      bounds: { X: 292, Y: 289, Width: 18, Height: 18 }
+    });
+  }
+
+  function addListBox() {
+    var options = [
+      { itemName: 'Item 1', itemValue: 'item1' },
+      { itemName: 'Item 2', itemValue: 'item2' },
+      { itemName: 'Item 3', itemValue: 'item3' }
+    ];
+    pdfviewer.formDesignerModule.addFormField('ListBox', {
+      name: 'States',
+      options: options,
+      bounds: { X: 380, Y: 320, Width: 150, Height: 60 }
+    });
+  }
+
+  function addDropDown() {
+    var options = [
+      { itemName: 'Item 1', itemValue: 'item1' },
+      { itemName: 'Item 2', itemValue: 'item2' },
+      { itemName: 'Item 3', itemValue: 'item3' }
+    ];
+    pdfviewer.formDesignerModule.addFormField('DropDown', {
+      name: 'Country',
+      options: options,
+      bounds: { X: 560, Y: 320, Width: 150, Height: 24 }
+    });
+  }
+
+  function addSignature() {
+    pdfviewer.formDesignerModule.addFormField('SignatureField', {
+      name: 'Sign',
+      bounds: { X: 57, Y: 923, Width: 200, Height: 43 }
+    });
+  }
+
+  function addInitial() {
+    pdfviewer.formDesignerModule.addFormField('InitialField', {
+      name: 'Initial',
+      bounds: { X: 148, Y: 466, Width: 200, Height: 43 }
+    });
+  }
+
+  function drawNextAsPassword() {
+    // Switch to interactive draw mode; click on the PDF to place the field
+    pdfviewer.formDesignerModule.setFormFieldMode('Password');
+  }
+
+  // Wire up buttons
+  document.getElementById('btnAddTextbox').addEventListener('click', addTextbox);
+  document.getElementById('btnAddPassword').addEventListener('click', addPassword);
+  document.getElementById('btnAddCheckbox').addEventListener('click', addCheckbox);
+  document.getElementById('btnAddRadioGroup').addEventListener('click', addRadioGroup);
+  document.getElementById('btnAddListBox').addEventListener('click', addListBox);
+  document.getElementById('btnAddDropDown').addEventListener('click', addDropDown);
+  document.getElementById('btnAddSignature').addEventListener('click', addSignature);
+  document.getElementById('btnAddInitial').addEventListener('click', addInitial);
+  document.getElementById('btnDrawPassword').addEventListener('click', drawNextAsPassword);
+})();
diff --git a/Form Designer/Custom Data in form fields/index.html b/Form Designer/Custom Data in form fields/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="https://cdn.syncfusion.com/ej2/31.2.2/ej2-base/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-pdfviewer/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-inputs/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-notifications/styles/material.css" rel="stylesheet">
+
+    <!-- Essential JS 2 PDF Viewer's script --> 
+    <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+
+<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+</head>
+<body>
+    <button id="updateCustomData">Update first field customData</button>
+    <button id="logCustomData">Log all fields customData</button>
+        <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>
diff --git a/Form Designer/Custom Data in form fields/index.js b/Form Designer/Custom Data in form fields/index.js
@@ -0,0 +1,69 @@
+// Inject required modules (ES5)
+ej.pdfviewer.PdfViewer.Inject(
+  ej.pdfviewer.Toolbar,
+  ej.pdfviewer.Magnification,
+  ej.pdfviewer.Navigation,
+  ej.pdfviewer.LinkAnnotation,
+  ej.pdfviewer.ThumbnailView,
+  ej.pdfviewer.BookmarkView,
+  ej.pdfviewer.TextSelection,
+  ej.pdfviewer.Annotation,
+  ej.pdfviewer.FormDesigner,
+  ej.pdfviewer.FormFields
+);
+
+var viewer = new ej.pdfviewer.PdfViewer({
+  documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
+  // For server-backed:
+  // serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/'
+});
+viewer.appendTo('#pdfViewer');
+
+// Default customData for fields added via Form Designer toolbar
+viewer.textFieldSettings = {
+  name: 'Textbox',
+  customData: { group: 'contact', createdBy: 'designer', requiredRole: 'user' }
+};
+
+// Add a field programmatically with customData after document loads
+viewer.documentLoad = function () {
+  var meta = { businessId: 'C-1024', tags: ['profile', 'kiosk'], requiredRole: 'admin' };
+  viewer.formDesignerModule.addFormField('Textbox', {
+    name: 'Email',
+    bounds: { X: 146, Y: 229, Width: 200, Height: 24 },
+    customData: meta
+  });
+};
+
+// Helper to get first field
+function getFirstField() {
+  var fields = (viewer.retrieveFormFields && viewer.retrieveFormFields()) || viewer.formFieldCollections || [];
+  return fields && fields.length ? fields[0] : null;
+}
+
+// Update/replace customData on an existing field
+var btnUpdate = document.getElementById('updateCustomData');
+if (btnUpdate) {
+  btnUpdate.addEventListener('click', function () {
+    var target = getFirstField();
+    if (!target) { alert('No form fields found'); return; }
+    viewer.formDesignerModule.updateFormField(target, {
+      customData: { group: 'profile', flags: ['pii', 'masked'], updatedAt: Date.now() }
+    });
+    alert('customData updated on first field');
+  });
+}
+
+// Read customData from all fields
+var btnLog = document.getElementById('logCustomData');
+if (btnLog) {
+  btnLog.addEventListener('click', function () {
+    var fields = (viewer.retrieveFormFields && viewer.retrieveFormFields()) || viewer.formFieldCollections || [];
+    if (!fields.length) { console.log('No fields'); return; }
+    fields.forEach(function (f, i) {
+      console.log('#' + i + ' ' + f.name, f.customData);
+    });
+    alert('Check console for customData logs');
+  });
+}
diff --git a/Form Designer/Edit form fields/index.html b/Form Designer/Edit form fields/index.html
@@ -0,0 +1,47 @@
+<!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="https://cdn.syncfusion.com/ej2/31.2.2/ej2-base/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-pdfviewer/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-popups/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-navigations/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-lists/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-inputs/styles/material.css" rel="stylesheet">    
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet">
+    <link href="https://cdn.syncfusion.com/ej2/31.2.2/ej2-notifications/styles/material.css" rel="stylesheet">
+
+    <!-- Essential JS 2 PDF Viewer's script --> 
+    <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
+    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+
+<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
+</head>
+<body>
+    <div id="container">
+        <div class="toolbar">
+            <button id="editTextbox">Apply Textbox Changes</button>
+            <button id="editPasswordBox">Edit PasswordBox</button>
+            <button id="editCheckbox">Edit CheckBox</button>
+            <button id="editRadio">Edit RadioButton</button>
+            <button id="editListBox">Edit ListBox</button>
+            <button id="editDropDown">Edit DropDown</button>
+            <button id="editSignature">Edit Signature</button>
+            <button id="editInitial">Edit Initial</button>
+        </div>
+        <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>