Color coded priority fields

Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/Color coded priority fields.js

@@ -0,0 +1,30 @@
+function onChange(control, oldValue, newValue, isLoading, isTemplate) {
+    if (isLoading || newValue == oldValue) return;
+
+    // Mapping backend choice values to background colors
+    var colorMap = {
+        '1': '#e74c3c',  // Critical - red
+        '2': '#e67e22',  // High - orange
+        '3': '#f1c40f',  // Moderate - yellow
+        '4': '#3498db',  // Low - blue
+        '5': '#27ae60'   // Planning - green
+    };
+
+    // Get control element of the field dynamically
+    var fieldName = 'priority'; 
+    var fieldControl = g_form.getControl(fieldName);
+
+    if (!fieldControl) return;
+
+    // Reset previous styles before applying a new one
+    fieldControl.style.backgroundColor = '';
+    fieldControl.style.transition = 'background-color 0.4s ease'; // smooth effect
+
+    // Apply color if matching value found
+    if (colorMap[newValue]) {
+        fieldControl.style.backgroundColor = colorMap[newValue];
+        fieldControl.style.color = '#fff'; // improves text readability
+    } else {
+        fieldControl.style.color = ''; // reset if default
+    }
+}

Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/ReadMe.md

@@ -0,0 +1,41 @@
+Dynamic Background Color for Choice Fields in ServiceNow
+Overview
+
+This script changes the background color of a choice field dynamically based on the selected backend value.
+For example, in the Incident form, when the Priority changes, the field’s background color updates to visually show urgency.
+
+How to Use
+
+Go to System Definition → Client Scripts → New
+
+Enter the following details:
+
+Name: Dynamic Background Color for Choice Field
+
+Table: Incident
+
+Type: onChange
+
+Field name: priority 
+
+UI Type: All
+
+Save and test by changing the Priority value.
+
+Key Points
+
+Works for any choice field 
+
+Uses backend values (1, 2, 3, etc.) for color mapping.
+
+Adds a smooth transition for better visual feedback.
+
+Automatically resets color when default or invalid value is selected.
+
+Example Color Map
+Backend Value	Meaning	Color
+1	Critical	Red
+2	High	    Orange
+3	Moderate	Yellow
+4	Low	      Blue
+5	Planning	Green