From ac96dd4c22895e6ced65a01b26b5ba50280ee1a9 Mon Sep 17 00:00:00 2001
From: Alka Chaudhary <alka161999@gmail.com>
Date: Fri, 24 Oct 2025 19:11:15 -0400
Subject: [PATCH 1/3] Create README.md

Explains the features of the widget.
---
 .../Signature Pad Widget/README.md                    | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 Modern Development/Service Portal Widgets/Signature Pad Widget/README.md

diff --git a/Modern Development/Service Portal Widgets/Signature Pad Widget/README.md b/Modern Development/Service Portal Widgets/Signature Pad Widget/README.md
new file mode 100644
index 0000000000..44630829e9
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Signature Pad Widget/README.md	
@@ -0,0 +1,11 @@
+A lightweight ServiceNow Service Portal widget that allows users to draw, clear, and attach signatures using a <canvas> element, compatible with both desktop and mobile devices.
+
+Features
+
+Draw signature using mouse or touch input.
+
+Clear the signature pad with one click.
+
+Convert the signature to a Base64 PNG string for storage or submission.
+
+No external dependencies (pure JavaScript & HTML5 Canvas).

From 41c9a74fc5c085ea8d0ddcb304a0ac6026bd1f6c Mon Sep 17 00:00:00 2001
From: Alka Chaudhary <alka161999@gmail.com>
Date: Fri, 24 Oct 2025 19:11:51 -0400
Subject: [PATCH 2/3] Create HTML File.html

Defines the visual structure of the signature pad. It includes a <canvas> for drawing and two buttons for clearing or attaching the signature.
---
 .../Signature Pad Widget/HTML File.html              | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 Modern Development/Service Portal Widgets/Signature Pad Widget/HTML File.html

diff --git a/Modern Development/Service Portal Widgets/Signature Pad Widget/HTML File.html b/Modern Development/Service Portal Widgets/Signature Pad Widget/HTML File.html
new file mode 100644
index 0000000000..9cdfdb1192
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Signature Pad Widget/HTML File.html	
@@ -0,0 +1,12 @@
+<div class="text-center">
+  <!-- Canvas area for drawing signature -->
+  <canvas id="signature-pad" width="400" height="200"
+          style="border:1px solid #ccc; border-radius:8px; cursor:crosshair; touch-action:none;">
+  </canvas>
+
+  <!-- Action buttons -->
+  <div class="mt-3">
+    <button class="btn btn-primary" ng-click="c.clearSignature()">Clear</button>
+    <button class="btn btn-success" ng-click="c.attachSignature()">Attach Signature</button>
+  </div>
+</div>

From e0b10c3412b2ea238488390a73d77467b9683892 Mon Sep 17 00:00:00 2001
From: Alka Chaudhary <alka161999@gmail.com>
Date: Fri, 24 Oct 2025 19:12:32 -0400
Subject: [PATCH 3/3] Create Client Controller.js

Handles the logic for drawing on the canvas, capturing mouse/touch input, clearing the signature, and converting it into a Base64-encoded image for further processing.
---
 .../Signature Pad Widget/Client Controller.js | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 Modern Development/Service Portal Widgets/Signature Pad Widget/Client Controller.js

diff --git a/Modern Development/Service Portal Widgets/Signature Pad Widget/Client Controller.js b/Modern Development/Service Portal Widgets/Signature Pad Widget/Client Controller.js
new file mode 100644
index 0000000000..8a80963f93
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Signature Pad Widget/Client Controller.js	
@@ -0,0 +1,80 @@
+api.controller = function($scope) {
+    var c = this;
+    var canvas, ctx;
+    var drawing = false;
+    var lastPos = { x: 0, y: 0 };
+
+    // Initialize after DOM is ready
+    c.$onInit = function() {
+        setTimeout(function() {
+            canvas = document.getElementById('signature-pad');
+            if (!canvas) return;
+
+            // Get 2D drawing context
+            ctx = canvas.getContext('2d');
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = '#000';
+
+            // Mouse event listeners
+            canvas.addEventListener('mousedown', startDraw);
+            canvas.addEventListener('mousemove', draw);
+            canvas.addEventListener('mouseup', endDraw);
+
+            // Touch event listeners (for mobile/tablet)
+            canvas.addEventListener('touchstart', startDraw);
+            canvas.addEventListener('touchmove', draw);
+            canvas.addEventListener('touchend', endDraw);
+        }, 200);
+    };
+
+    // Get drawing position based on mouse or touch input
+    function getPosition(event) {
+        var rect = canvas.getBoundingClientRect();
+        if (event.touches && event.touches[0]) {
+            return {
+                x: event.touches[0].clientX - rect.left,
+                y: event.touches[0].clientY - rect.top
+            };
+        }
+        return {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top
+        };
+    }
+
+    // Start drawing when mouse/touch pressed
+    function startDraw(e) {
+        drawing = true;
+        lastPos = getPosition(e);
+    }
+
+    // Draw line on canvas while dragging
+    function draw(e) {
+        if (!drawing) return;
+        e.preventDefault(); // Prevent page scrolling on touch
+        var pos = getPosition(e);
+        ctx.beginPath();
+        ctx.moveTo(lastPos.x, lastPos.y);
+        ctx.lineTo(pos.x, pos.y);
+        ctx.stroke();
+        lastPos = pos;
+    }
+
+    // Stop drawing when mouse/touch released
+    function endDraw() {
+        drawing = false;
+    }
+
+    // Clear the canvas
+    c.clearSignature = function() {
+        if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
+        drawing = false;
+    };
+
+    // Convert signature to base64 image and attach
+    c.attachSignature = function() {
+        if (!ctx) return alert("Canvas not initialized.");
+        var data = canvas.toDataURL('image/png'); // Get base64 encoded image
+        alert("Signature captured successfully. It will be attached after submission.\n\n" + data);
+    };
+};