Service portal widget stepper

Modern Development/Service Portal Widgets/Stepper/CSS.css

@@ -0,0 +1,75 @@
+/* Main container styling with padding and rounded corners */
+.stepper-container {
+  padding: 16px;
+  border-radius: 8px;
+}
+
+/* Flex container for horizontal stepper layout */
+.stepper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Individual step container with flex properties */
+.stepper-step {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+/* Circular step indicator base styling */
+.stepper-circle {
+  width: 40px;
+  height: 40px;
+  background: #e0e0e0;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 20px;
+  color: #fff;
+}
+
+/* Green background for completed steps */
+.stepper-circle.completed {
+  background: #43A047;
+}
+
+/* Blue background with border for active step */
+.stepper-circle.active {
+  background: #4285f4;
+  border: 3px solid #1976d2;
+}
+
+/* Step label text styling */
+.stepper-label {
+  margin-left: 12px;
+  font-size: 20px;
+  color: #333;
+  opacity: 0.7;
+  font-weight: normal;
+}
+
+/* Enhanced styling for completed and active step labels */
+.stepper-label.completed,
+.stepper-label.active {
+  color: #222;
+  font-weight: bold;
+  opacity: 1;
+}
+
+/* Connecting line between steps */
+.stepper-line {
+  height: 2px;
+  background: #e0e0e0;
+  flex: 1;
+  margin: 0 16px;
+}
+
+/* Hide line after the last step */
+.stepper-step:last-child .stepper-line {
+  display: none;
+}

Modern Development/Service Portal Widgets/Stepper/HTML.html

@@ -0,0 +1,28 @@
+<!-- Main container for the stepper component -->
+<div class="stepper-container">
+  <!-- Stepper wrapper with flex layout -->
+  <div class="stepper">
+    <!-- Loop through each step in the data.steps array -->
+    <div ng-repeat="step in data.steps track by $index" class="stepper-step">
+      <!-- Circle element showing step number or checkmark -->
+      <div class="stepper-circle" ng-class="{
+        'completed': $index < data.currentStep,
+        'active': $index === data.currentStep
+      }">
+        <!-- Show checkmark icon for completed steps -->
+        <i ng-if="$index < data.currentStep" class="fa fa-check"></i>
+        <!-- Show step number for current and future steps -->
+        <span ng-if="$index >= data.currentStep">{{$index + 1}}</span>
+      </div>
+      <!-- Label text for each step -->
+      <span class="stepper-label" ng-class="{
+        'completed': $index < data.currentStep,
+        'active': $index === data.currentStep
+      }">
+        {{step}}
+      </span>
+      <!-- Connecting line between steps (hidden for last step) -->
+      <div class="stepper-line" ng-if="!$last"></div>
+    </div>
+  </div>
+</div>

Modern Development/Service Portal Widgets/Stepper/README.md

@@ -0,0 +1,30 @@
+# Stepper Widget
+
+This custom widget provides a visually appealing **stepper** (multi-step progress indicator) for ServiceNow Service Portal, allowing you to display progress through steps such as campaign creation or onboarding.
+
+## Features
+
+- Shows steps with dynamic titles and highlights the current and completed steps.
+- Steps and current step are passed in as widget options.
+- Completed steps show a green icon.
+- Handles widget options for showing steps and the current step.
+
+<img width="1314" height="257" alt="image" src="https://github.com/user-attachments/assets/abc005ea-3dc2-49c7-9108-5008dcf620f4" />
+
+
+## Widget Options
+
+| Option        | Type   | Description                                   | Example                                  |
+|---------------|--------|-----------------------------------------------|------------------------------------------|
+| steps         | String | Stringified array of step names (JSON array)  | `["Step 1", "Step 2", "Step 3"]`         |
+| currentStep   | Number | The current active step (0-based index)       | `1`                                      |
+
+## Usage
+
+1. Add the widget to your Service Portal page.
+2. In the widget options, set:
+   - **steps** as a JSON string array (e.g., `["Step 1", "Step 2", "Step 3"]`)
+   - **currentStep** as the index of the current step (e.g., `1`)
+<img width="1119" height="358" alt="image" src="https://github.com/user-attachments/assets/a51d48e1-1881-4b8c-9b67-06e0a0165c4c" />
+
+

Modern Development/Service Portal Widgets/Stepper/Server Script.js

@@ -0,0 +1,9 @@
+(function() {
+  // Parse and set the steps array from widget options
+  // If options.steps exists, parse the JSON string; otherwise, use empty array
+  data.steps = options.steps ? JSON.parse(options.steps) : [];
+
+  // Parse and set the current step index from widget options
+  // If options.current_step exists, convert to integer; otherwise, default to 0
+  data.currentStep = options.current_step ? parseInt(options.current_step) : 0;
+})();