diff --git a/Form Designer/Access Form Fields Collections/index.html b/Form Designer/Access Form Fields Collections/index.html
new file mode 100644
index 0000000..2af9f6e
--- /dev/null
+++ b/Form Designer/Access Form Fields Collections/index.html
@@ -0,0 +1,38 @@
+
+ EJ2 PDF Viewer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Form Designer/Remove form fields/index.js b/Form Designer/Remove form fields/index.js
new file mode 100644
index 0000000..43cd679
--- /dev/null
+++ b/Form Designer/Remove form fields/index.js
@@ -0,0 +1,58 @@
+// Inject required modules
+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 pdfviewer = new ej.pdfviewer.PdfViewer({
+ documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
+ resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'
+});
+
+// Optional server-backed
+// pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+
+pdfviewer.appendTo('#PdfViewer');
+
+// Add form fields on document load
+pdfviewer.documentLoad = function () {
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'First Name',
+ bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
+ });
+
+ pdfviewer.formDesignerModule.addFormField('Password', {
+ name: 'Password',
+ bounds: { X: 338, Y: 229, Width: 150, Height: 24 }
+ });
+
+ pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'Sign Here',
+ bounds: { X: 146, Y: 280, Width: 200, Height: 43 }
+ });
+};
+
+// Delete all added form fields on button click (passing field objects)
+document.getElementById('deleteAllFields') && document.getElementById('deleteAllFields').addEventListener('click', function () {
+ // Clone to avoid mutation while deleting
+ var fields = pdfviewer.retrieveFormFields().slice();
+ fields.forEach(function (field) {
+ pdfviewer.formDesignerModule.deleteFormField(field);
+ });
+});
+
+// Delete by ID on button click (example uses the first field's ID)
+document.getElementById('deleteById') && document.getElementById('deleteById').addEventListener('click', function () {
+ var list = pdfviewer.retrieveFormFields();
+ if (list.length > 0 && list[0].id) {
+ pdfviewer.formDesignerModule.deleteFormField(list[0].id);
+ }
+});
\ No newline at end of file
diff --git a/Form Designer/Style form fields/index.html b/Form Designer/Style form fields/index.html
new file mode 100644
index 0000000..1c3b6a9
--- /dev/null
+++ b/Form Designer/Style form fields/index.html
@@ -0,0 +1,46 @@
+
+ EJ2 PDF Viewer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Form Designer/Style form fields/index.js b/Form Designer/Style form fields/index.js
new file mode 100644
index 0000000..bd43e98
--- /dev/null
+++ b/Form Designer/Style form fields/index.js
@@ -0,0 +1,321 @@
+// Inject required modules
+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
+);
+
+// Create and configure the viewer
+var pdfviewer = 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'
+});
+
+// Apply default settings for all fields (used when adding from Form Designer toolbar)
+pdfviewer.textFieldSettings = {
+ name: 'Textbox',
+ isReadOnly: false,
+ visibility: 'visible',
+ isRequired: false,
+ isPrint: true,
+ tooltip: 'Textbox',
+ thickness: 4,
+ value: 'Textbox',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ fontStyle: 'None',
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'White',
+ alignment: 'Left',
+ maxLength: 0,
+ isMultiline: false
+};
+
+pdfviewer.passwordFieldSettings = {
+ name: 'Password',
+ isReadOnly: false,
+ visibility: 'visible',
+ isRequired: false,
+ isPrint: true,
+ tooltip: 'Password',
+ thickness: 4,
+ value: 'Password',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ fontStyle: 'None',
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white',
+ alignment: 'Left',
+ maxLength: 0
+};
+
+pdfviewer.checkBoxFieldSettings = {
+ name: 'CheckBox',
+ isReadOnly: false,
+ visibility: 'visible',
+ isRequired: false,
+ isPrint: true,
+ tooltip: 'CheckBox',
+ thickness: 4,
+ isChecked: true,
+ backgroundColor: 'white',
+ borderColor: 'black'
+};
+
+pdfviewer.radioButtonFieldSettings = {
+ name: 'RadioButton',
+ isReadOnly: false,
+ visibility: 'visible',
+ isRequired: false,
+ isPrint: true,
+ tooltip: 'RadioButton',
+ thickness: 4,
+ isSelected: true,
+ backgroundColor: 'white',
+ borderColor: 'black',
+ value: 'RadioButton'
+};
+
+var customListOptions = [
+ { itemName: 'item1', itemValue: 'item1' },
+ { itemName: 'item2', itemValue: 'item2' },
+ { itemName: 'item3', itemValue: 'item3' }
+];
+
+pdfviewer.listBoxFieldSettings = {
+ name: 'ListBox',
+ isReadOnly: false,
+ visibility: 'visible',
+ isRequired: false,
+ isPrint: true,
+ tooltip: 'ListBox',
+ thickness: 4,
+ value: 'ListBox',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ fontStyle: 'None',
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'White',
+ alignment: 'Left',
+ options: customListOptions
+};
+
+var dropDownOptions = [
+ { itemName: 'item1', itemValue: 'item1' },
+ { itemName: 'item2', itemValue: 'item2' },
+ { itemName: 'item3', itemValue: 'item3' }
+];
+
+pdfviewer.dropDownFieldSettings = {
+ name: 'DropDown',
+ isReadOnly: false,
+ visibility: 'visible',
+ isRequired: false,
+ isPrint: true,
+ tooltip: 'DropDown',
+ thickness: 4,
+ value: 'DropDown',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ fontStyle: 'None',
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'White',
+ alignment: 'Left',
+ options: dropDownOptions
+};
+
+pdfviewer.signatureFieldSettings = {
+ name: 'Signature',
+ isReadOnly: false,
+ visibility: 'visible',
+ isRequired: false,
+ isPrint: true,
+ tooltip: 'Signature',
+ thickness: 4,
+ signatureIndicatorSettings: {
+ opacity: 1,
+ backgroundColor: '#237ba2',
+ height: 50,
+ fontSize: 15,
+ text: 'Signature Field',
+ color: 'white'
+ }
+};
+
+pdfviewer.initialFieldSettings = {
+ name: 'Initial',
+ isReadOnly: false,
+ visibility: 'visible',
+ isRequired: false,
+ isPrint: true,
+ tooltip: 'Initial',
+ thickness: 4,
+ initialIndicatorSettings: {
+ opacity: 1,
+ backgroundColor: '#237ba2',
+ height: 50,
+ fontSize: 15,
+ text: 'Initial Field',
+ color: 'white'
+ }
+};
+
+// Mount viewer
+pdfviewer.appendTo('#PdfViewer');
+
+// Utility to safely get fields (waits until document is loaded if needed)
+function getFields() {
+ // prefer live collection when available
+ if (pdfviewer.formFieldCollections && pdfviewer.formFieldCollections.length) {
+ return pdfviewer.formFieldCollections;
+ }
+ // fallback to retrieve API
+ try {
+ return pdfviewer.retrieveFormFields ? pdfviewer.retrieveFormFields() : [];
+ } catch {
+ return [];
+ }
+}
+
+// Wire up buttons
+
+document.getElementById('updateTextboxStyle')?.addEventListener('click', function () {
+ var fields = getFields();
+ var tb = fields.find(function (f) { return f.name === 'First Name'; }) || fields[0];
+ if (tb) {
+ pdfviewer.formDesignerModule.updateFormField(tb, {
+ value: 'John',
+ fontFamily: 'Courier',
+ fontSize: 12,
+ fontStyle: ej.pdfviewer.FontStyle.None,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white',
+ alignment: 'Left',
+ thickness: 2
+ });
+ }
+});
+
+document.getElementById('updatePasswordStyle')?.addEventListener('click', function () {
+ var fields = getFields();
+ var pw = fields.find(function (f) { return f.name === 'Password'; });
+ if (pw) {
+ pdfviewer.formDesignerModule.updateFormField(pw, {
+ tooltip: 'Enter password',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white',
+ alignment: 'Left',
+ maxLength: 20,
+ thickness: 1
+ });
+ }
+});
+
+document.getElementById('updateCheckBoxStyle')?.addEventListener('click', function () {
+ var fields = getFields();
+ var cb = fields.find(function (f) { return f.name === 'Subscribe'; });
+ if (cb) {
+ pdfviewer.formDesignerModule.updateFormField(cb, {
+ isChecked: true,
+ backgroundColor: 'white',
+ borderColor: 'black',
+ thickness: 2,
+ tooltip: 'Subscribe'
+ });
+ }
+});
+
+document.getElementById('updateRadioButtonStyle')?.addEventListener('click', function () {
+ var fields = getFields();
+ var radios = fields.filter(function (f) { return f.name === 'Gender'; });
+ if (radios.length > 1) {
+ pdfviewer.formDesignerModule.updateFormField(radios[0], { isSelected: false });
+ pdfviewer.formDesignerModule.updateFormField(radios[1], { isSelected: true, thickness: 2, borderColor: 'black' });
+ }
+});
+
+document.getElementById('updateListBoxStyle')?.addEventListener('click', function () {
+ var fields = getFields();
+ var lb = fields.find(function (f) { return f.name === 'States'; });
+ if (lb) {
+ pdfviewer.formDesignerModule.updateFormField(lb, {
+ options: [
+ { itemName: 'Item 1', itemValue: 'item1' },
+ { itemName: 'Item 2', itemValue: 'item2' },
+ { itemName: 'Item 3', itemValue: 'item3' }
+ ],
+ value: 'item2',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white'
+ });
+ }
+});
+
+document.getElementById('updateDropDownStyle')?.addEventListener('click', function () {
+ var fields = getFields();
+ var dd = fields.find(function (f) { return f.name === 'Country'; });
+ if (dd) {
+ pdfviewer.formDesignerModule.updateFormField(dd, {
+ options: [
+ { itemName: 'USA', itemValue: 'US' },
+ { itemName: 'Canada', itemValue: 'CA' },
+ { itemName: 'Mexico', itemValue: 'MX' }
+ ],
+ value: 'US',
+ fontFamily: 'Courier',
+ fontSize: 10,
+ color: 'black',
+ borderColor: 'black',
+ backgroundColor: 'white'
+ });
+ }
+});
+
+document.getElementById('updateSignatureStyle')?.addEventListener('click', function () {
+ var fields = getFields();
+ var sig = fields.find(function (f) { return f.name === 'Sign'; });
+ if (sig) {
+ pdfviewer.formDesignerModule.updateFormField(sig, {
+ tooltip: 'Please sign here',
+ thickness: 3,
+ isRequired: true,
+ isPrint: true,
+ backgroundColor: 'white',
+ borderColor: 'black'
+ });
+ }
+});
+
+document.getElementById('updateInitialStyle')?.addEventListener('click', function () {
+ var fields = getFields();
+ var init = fields.find(function (f) { return f.name === 'Initial'; });
+ if (init) {
+ pdfviewer.formDesignerModule.updateFormField(init, {
+ tooltip: 'Add your initials',
+ thickness: 2,
+ isRequired: true,
+ isPrint: true,
+ backgroundColor: 'white',
+ borderColor: 'black'
+ });
+ }
+});
\ No newline at end of file
diff --git a/Form Designer/Validate form fields/index.html b/Form Designer/Validate form fields/index.html
new file mode 100644
index 0000000..3a9e9ca
--- /dev/null
+++ b/Form Designer/Validate form fields/index.html
@@ -0,0 +1,34 @@
+
+ EJ2 PDF Viewer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Form Designer/Validate form fields/index.js b/Form Designer/Validate form fields/index.js
new file mode 100644
index 0000000..4ffe7bc
--- /dev/null
+++ b/Form Designer/Validate form fields/index.js
@@ -0,0 +1,51 @@
+// Inject required modules
+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.FormDesigner,
+ ej.pdfviewer.FormFields,
+ ej.pdfviewer.Print
+);
+
+window.addEventListener('DOMContentLoaded', function () {
+ var pdfviewer = 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'
+ // If your setup requires a backend service, uncomment and set the service URL:
+ // serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
+ });
+
+ // Enable built-in validation BEFORE user actions
+ pdfviewer.enableFormFieldsValidation = true;
+
+ // Mount viewer
+ pdfviewer.appendTo('#pdfViewer');
+
+ // Add a required textbox so validation has something to catch
+ pdfviewer.documentLoad = function () {
+ try {
+ pdfviewer.formDesignerModule.addFormField('Textbox', {
+ name: 'Email',
+ bounds: { X: 146, Y: 260, Width: 220, Height: 24 },
+ isRequired: true,
+ tooltip: 'Email is required'
+ });
+ } catch (e) {
+ // Ignore if designer not available
+ }
+ };
+
+ // Fires on Print/Download; alert if required fields are empty
+ pdfviewer.validateFormFields = function (args) {
+ // args.formField contains the collection of improperly filled fields
+ if (args && args.formField && args.formField.length) {
+ alert('Please fill all required fields. Missing: ' + args.formField[0].name);
+ }
+ };
+});
\ No newline at end of file