Signature pad widget (#2472)

* Create README.md

Explains the features of the widget.

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

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

Author: alkaChaudhary73

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

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>

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