Skip to content

Commit 98feba9

Browse files
author
SWETHA R
authored
Updated README.md
1 parent eaaf13f commit 98feba9

File tree

1 file changed

+108
-13
lines changed
  • Client-Side Components/Client Scripts/Color-coded Priority field for improved UX

1 file changed

+108
-13
lines changed
Lines changed: 108 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,114 @@
1-
# Field Color-Coding Based on Choice Values
1+
# 🎨 Dynamic Field Background Color Based on Choice Value
22

3-
## Purpose
4-
Dynamically change the background color of any choice field on a form based on the selected backend value.
3+
## 📁 Location
4+
**Category:** `Client-Side Components`
5+
**Subcategory:** `Client Scripts`
6+
**Snippet Folder:** `Field Background Color OnChange`
57

6-
## How to Use
7-
1. Create an OnChange client script on the desired choice field.
8-
2. Replace `'your_field_name'` in the script with your actual field name.
9-
3. Update the `colorMap` with relevant backend choice values and colors.
10-
4. Save and test on the form.
8+
---
119

12-
## Key Points
13-
- Works with any choice field
14-
- Uses backend values of choices for mapping colors.
10+
## 📌 Description
1511

16-
## Demo
12+
This client-side `onChange` script dynamically updates the **background color** of a **choice field** based on the selected **backend value**.
1713

18-
<img width="1710" height="557" alt="image" src="https://github.com/user-attachments/assets/9fb9e68a-1ade-4eb5-81cc-c947c970bd6f" />
14+
This visual enhancement improves form usability by making key field states (like priority or status) more immediately recognizable, reducing user error and boosting efficiency.
1915

16+
---
17+
18+
## 🚀 Features
19+
20+
- ✅ Uses `g_form.getControl()` to access the field’s DOM element
21+
- ✅ Color-codes based on backend values, not display labels
22+
- ✅ Easy to customize — works with any choice field
23+
- ✅ Executes only on field value change (not on form load)
24+
- ✅ Improves UX with real-time visual feedback
25+
26+
---
27+
28+
## 📄 Script: `setColor.js`
29+
30+
```javascript
31+
function onChange(control, oldValue, newValue, isLoading) {
32+
if (isLoading) return;
33+
34+
// Map backend choice values to colors
35+
var colorMap = {
36+
'1': '#e74c3c', // Critical - Red
37+
'2': '#e67e22', // High - Orange
38+
'3': '#f1c40f', // Moderate - Yellow
39+
'4': '#3498db', // Low - Blue
40+
'5': '#27ae60' // Planning - Green
41+
};
42+
43+
// Replace 'priority' with your actual field name
44+
var fieldControl = g_form.getControl('priority');
45+
if (!fieldControl) return;
46+
47+
fieldControl.style.backgroundColor = colorMap[newValue] || '';
48+
}
49+
50+
🛠️ How to Use
51+
52+
1) Create a Client Script in ServiceNow:
53+
54+
Type: onChange
55+
Field: e.g., priority
56+
Table: Your target table (e.g., incident or task)
57+
Script: Use the code provided in setColor.js
58+
59+
2) Customize if needed:
60+
61+
Change 'priority' to the name of your field
62+
Modify the colorMap values to match your field’s backend values and desired colors.
63+
64+
65+
📸 Example Use Case
66+
67+
You're building a form where priority is a required field. You want high-priority issues to stand out visually:
68+
69+
1) Critical (value: 1) turns the field red
70+
2) High (value: 2) turns it orange
71+
3) Low or Planning priorities show in blue or green
72+
73+
This helps agents recognize and prioritize tasks more quickly.
74+
75+
📂 File Structure
76+
77+
Client-Side Components/
78+
└── Client Scripts/
79+
└── Field Background Color OnChange/
80+
├── README.md
81+
└── setColor.js
82+
83+
✅ Requirements Checklist
84+
85+
✔️ Script is in a properly named snippet folder
86+
✔️ Code is relevant and useful to ServiceNow developers
87+
✔️ No XML exports or platform-specific data
88+
✔️ README.md included with:
89+
90+
Description
91+
Usage instructions
92+
Example code
93+
Folder structure
94+
95+
✔️ No use of sensitive data or global variables
96+
✔️ Works with standard choice fields in the platform
97+
98+
99+
👨‍💻 Author
100+
101+
Contributor: @Shweyy123
102+
Pull Request: #1845
103+
Script Name: setColor.js
104+
Compatibility: Works with most ServiceNow instances (Orlando and later)
105+
106+
📘 License
107+
108+
This code is provided under the MIT License. Use at your own discretion in production environments. Always test in a sub-production instance first.
109+
110+
🧩 Additional Ideas (Optional Enhancements)
111+
112+
1) Show display values alongside color mapping
113+
2) Add a tooltip with the priority name
114+
3) Extend support for multiple fields (e.g., priority + state)

0 commit comments

Comments
 (0)