Skip to content

Commit f609e38

Browse files
debendu-dasdebendu-das
authored
Service portal widget stepper (#1774)
* Create README.md README.md file for Service Portal Widget Stepper * Create HTML.html * Create CSS.css * Create Server Script.js
1 parent e874012 commit f609e38

File tree

4 files changed

+142
-0
lines changed

4 files changed

+142
-0
lines changed

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/* Main container styling with padding and rounded corners */
2+
.stepper-container {
3+
padding: 16px;
4+
border-radius: 8px;
5+
}
6+
7+
/* Flex container for horizontal stepper layout */
8+
.stepper {
9+
display: flex;
10+
justify-content: space-between;
11+
align-items: center;
12+
}
13+
14+
/* Individual step container with flex properties */
15+
.stepper-step {
16+
display: flex;
17+
align-items: center;
18+
flex: 1;
19+
position: relative;
20+
}
21+
22+
/* Circular step indicator base styling */
23+
.stepper-circle {
24+
width: 40px;
25+
height: 40px;
26+
background: #e0e0e0;
27+
border-radius: 50%;
28+
display: flex;
29+
align-items: center;
30+
justify-content: center;
31+
font-weight: bold;
32+
font-size: 20px;
33+
color: #fff;
34+
}
35+
36+
/* Green background for completed steps */
37+
.stepper-circle.completed {
38+
background: #43A047;
39+
}
40+
41+
/* Blue background with border for active step */
42+
.stepper-circle.active {
43+
background: #4285f4;
44+
border: 3px solid #1976d2;
45+
}
46+
47+
/* Step label text styling */
48+
.stepper-label {
49+
margin-left: 12px;
50+
font-size: 20px;
51+
color: #333;
52+
opacity: 0.7;
53+
font-weight: normal;
54+
}
55+
56+
/* Enhanced styling for completed and active step labels */
57+
.stepper-label.completed,
58+
.stepper-label.active {
59+
color: #222;
60+
font-weight: bold;
61+
opacity: 1;
62+
}
63+
64+
/* Connecting line between steps */
65+
.stepper-line {
66+
height: 2px;
67+
background: #e0e0e0;
68+
flex: 1;
69+
margin: 0 16px;
70+
}
71+
72+
/* Hide line after the last step */
73+
.stepper-step:last-child .stepper-line {
74+
display: none;
75+
}

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!-- Main container for the stepper component -->
2+
<div class="stepper-container">
3+
<!-- Stepper wrapper with flex layout -->
4+
<div class="stepper">
5+
<!-- Loop through each step in the data.steps array -->
6+
<div ng-repeat="step in data.steps track by $index" class="stepper-step">
7+
<!-- Circle element showing step number or checkmark -->
8+
<div class="stepper-circle" ng-class="{
9+
'completed': $index < data.currentStep,
10+
'active': $index === data.currentStep
11+
}">
12+
<!-- Show checkmark icon for completed steps -->
13+
<i ng-if="$index < data.currentStep" class="fa fa-check"></i>
14+
<!-- Show step number for current and future steps -->
15+
<span ng-if="$index >= data.currentStep">{{$index + 1}}</span>
16+
</div>
17+
<!-- Label text for each step -->
18+
<span class="stepper-label" ng-class="{
19+
'completed': $index < data.currentStep,
20+
'active': $index === data.currentStep
21+
}">
22+
{{step}}
23+
</span>
24+
<!-- Connecting line between steps (hidden for last step) -->
25+
<div class="stepper-line" ng-if="!$last"></div>
26+
</div>
27+
</div>
28+
</div>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Stepper Widget
2+
3+
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.
4+
5+
## Features
6+
7+
- Shows steps with dynamic titles and highlights the current and completed steps.
8+
- Steps and current step are passed in as widget options.
9+
- Completed steps show a green icon.
10+
- Handles widget options for showing steps and the current step.
11+
12+
<img width="1314" height="257" alt="image" src="https://github.com/user-attachments/assets/abc005ea-3dc2-49c7-9108-5008dcf620f4" />
13+
14+
15+
## Widget Options
16+
17+
| Option | Type | Description | Example |
18+
|---------------|--------|-----------------------------------------------|------------------------------------------|
19+
| steps | String | Stringified array of step names (JSON array) | `["Step 1", "Step 2", "Step 3"]` |
20+
| currentStep | Number | The current active step (0-based index) | `1` |
21+
22+
## Usage
23+
24+
1. Add the widget to your Service Portal page.
25+
2. In the widget options, set:
26+
- **steps** as a JSON string array (e.g., `["Step 1", "Step 2", "Step 3"]`)
27+
- **currentStep** as the index of the current step (e.g., `1`)
28+
<img width="1119" height="358" alt="image" src="https://github.com/user-attachments/assets/a51d48e1-1881-4b8c-9b67-06e0a0165c4c" />
29+
30+

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
(function() {
2+
// Parse and set the steps array from widget options
3+
// If options.steps exists, parse the JSON string; otherwise, use empty array
4+
data.steps = options.steps ? JSON.parse(options.steps) : [];
5+
6+
// Parse and set the current step index from widget options
7+
// If options.current_step exists, convert to integer; otherwise, default to 0
8+
data.currentStep = options.current_step ? parseInt(options.current_step) : 0;
9+
})();

0 commit comments

Comments
 (0)