Skip to content

Commit 5f6e8ba

Browse files
tab22tab22
authored
Create README.md
1 parent 3d87fd6 commit 5f6e8ba

File tree

1 file changed

+148
-0
lines changed
  • Modern Development/Service Portal Widgets/Change Calendar Report

1 file changed

+148
-0
lines changed

‎Modern Development/Service Portal Widgets/Change Calendar Report/README.md‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
# Report ITS Change Request: Change Calendar Widget
2+
3+
A **Service Portal widget** for displaying interactive **Change Request Calendar Reports** in ServiceNow.
4+
This widget embeds a ServiceNow report, allows visual exploration of change data, and enhances user experience through color-coded legends and a modal view for detailed record insights.
5+
6+
---
7+
8+
## Features
9+
10+
* **Report Embedding:** Displays a selected ServiceNow report dynamically in the portal.
11+
* **Interactive Legend:** Color legend automatically updates based on selected highlight field (`risk`, `type`, `state`).
12+
* **Change Request Details Modal:** Clicking a change number opens a modal showing detailed record information (number, description, risk, state, start and end dates).
13+
* **Dynamic Color Mapping:** Fetches `sys_ui_style` and `sys_choice` data to visualize change request status colors.
14+
* **Accessible & Responsive UI:** Fully keyboard-accessible with clear color indicators and responsive design.
15+
16+
---
17+
18+
## Configuration
19+
20+
### **Widget Options**
21+
22+
| Option | Type | Description |
23+
| ------------ | ------------------------ | ------------------------------------- |
24+
| `report_id` | Reference (`sys_report`) | Select the ServiceNow report to embed |
25+
| `show_title` | Boolean | Toggle visibility of report title |
26+
27+
### **Installation Steps**
28+
29+
1. Import the widget XML into your ServiceNow instance via **Studio** or **Update Set**.
30+
2. Add the widget to a Service Portal page (e.g., Change Dashboard).
31+
3. In widget options:
32+
33+
* Select your desired **report** (`sys_report`).
34+
* Enable “Show Title” if required.
35+
4. Save and reload the page — the report will render dynamically.
36+
37+
---
38+
39+
## Color Legend
40+
41+
* Automatically generated from `sys_ui_style` table for elements `type`, `state`, and `risk`.
42+
* Displays color-coded labels for visual clarity.
43+
* Updates automatically when the highlight field dropdown changes.
44+
45+
**Example:**
46+
47+
| Element | Color | Meaning |
48+
| ------- | ------------ | ------------------ |
49+
| State | 🔵 Implement | Change in progress |
50+
| Risk | 🟡 High | Requires review |
51+
| Type | 🟢 Normal | Standard change |
52+
53+
---
54+
55+
## Modal Preview of Change Details
56+
57+
Clicking a change number in the calendar opens a modal window with:
58+
59+
| Field | Description |
60+
| ------------------- | ---------------------------- |
61+
| Change Number | Linked record reference |
62+
| Short Description | Summary of change |
63+
| Description | Detailed explanation |
64+
| Type / Risk / State | Key metadata fields |
65+
| Planned Start & End | Change implementation window |
66+
67+
---
68+
69+
## Technical Overview
70+
71+
| Component | Technology | Purpose |
72+
| ----------------- | --------------------------------------- | -------------------------------------------------- |
73+
| **Client Script** | AngularJS + jQuery + `$uibModal` | Event handling, modal logic, legend updates |
74+
| **Server Script** | GlideRecord API | Fetch report and change details securely |
75+
| **CSS** | Custom SCSS / SP Variables | Responsive layout, color blocks, and accessibility |
76+
| **Template** | Angular bindings (`ng-if`, `ng-repeat`) | Dynamic rendering of legend and report |
77+
78+
---
79+
80+
## Security & Performance
81+
82+
* Uses `spUtil.get()` for secure data retrieval via the widget server script.
83+
* Enforces ACL-based record access (`change_request` table).
84+
* Sanitizes HTML using `$sce.trustAsHtml` for safe modal rendering.
85+
* Optimized DOM operations and `$timeout` to reduce UI latency.
86+
87+
---
88+
89+
## Dependencies
90+
91+
* **ServiceNow Studio or App Engine Studio**
92+
* **Service Portal Enabled**
93+
* **Change Management Application** (`change_request` table)
94+
* **Performance Analytics & Reporting Plugin** (`com.snc.pa.sp.widget`)
95+
96+
Optional:
97+
98+
* **Color Mapping in `sys_ui_style`**
99+
* **Active `sys_report` record**
100+
101+
---
102+
103+
## Example Use Case
104+
105+
> The Change Manager wants a visual, color-coded view of all scheduled changes for the month.
106+
> Using the **Report ITS Change Request** widget, they embed their “Change Calendar by Risk” report into the Service Portal.
107+
> They can quickly filter changes, view color-coded statuses, and open detailed records—all from one place.
108+
109+
---
110+
111+
## Testing Scenarios
112+
113+
| Test | Expected Result |
114+
| -------------------------- | ----------------------------------------------------- |
115+
| Load widget without report | Displays “Select a report in widget options!” message |
116+
| Click on change link | Modal opens with record details |
117+
| Change highlight dropdown | Legend updates to reflect new color group |
118+
| No matching record | Displays “Record not found” in modal |
119+
120+
---
121+
122+
## Future Enhancements
123+
124+
* Filter changes by assignment group or service.
125+
* Add “Export as PDF” or “Add to Calendar” options.
126+
* Integrate with CAB meeting module for review visualization.
127+
* Replace jQuery with native AngularJS `$element` bindings for performance.
128+
129+
---
130+
131+
## Contributors
132+
133+
* **Developer:** Admin / ServiceNow Platform Engineer
134+
* **Maintainers:** Performance Analytics & Reporting Widget Team
135+
* **Scope:** Global (`x_snc_pa.sp.widget`)
136+
137+
---
138+
Please find the screenshot below
139+
140+
![WhatsApp Image 2025-10-26 at 09 59 27 (1)](https://github.com/user-attachments/assets/a2e024cf-87be-4f29-9c5a-aee3e2dffbfd)
141+
142+
![WhatsApp Image 2025-10-26 at 09 59 27 (2)](https://github.com/user-attachments/assets/bd610e94-08ac-47be-842d-e8c59dadce70)
143+
144+
![WhatsApp Image 2025-10-26 at 09 59 27](https://github.com/user-attachments/assets/1333e974-6b56-48b8-b1c2-340e0a35e0af)
145+
146+
<img width="637" height="454" alt="image" src="https://github.com/user-attachments/assets/07d34c8b-429d-4522-b68d-71603f0206eb" />
147+
148+

0 commit comments

Comments
 (0)