From 5681118cc09da2c5429045a082d0c74b253bc137 Mon Sep 17 00:00:00 2001
From: Sachin Narayanasamy
 <132642563+SachinNarayanasamy@users.noreply.github.com>
Date: Sun, 19 Oct 2025 18:13:42 +0530
Subject: [PATCH 1/2] Create Color coded priority fields.js

---
 .../Color coded priority fields.js            | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/Color coded priority fields.js

diff --git a/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/Color coded priority fields.js b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/Color coded priority fields.js
new file mode 100644
index 0000000000..40c72642d8
--- /dev/null
+++ b/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
+    }
+}

From 2225bb9ce864314242a1c7ee18a047fc0aafbf41 Mon Sep 17 00:00:00 2001
From: Sachin Narayanasamy
 <132642563+SachinNarayanasamy@users.noreply.github.com>
Date: Sun, 19 Oct 2025 18:15:30 +0530
Subject: [PATCH 2/2] Create ReadMe.md

---
 .../ReadMe.md                                 | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/ReadMe.md

diff --git a/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/ReadMe.md b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/ReadMe.md
new file mode 100644
index 0000000000..9ba56ac06a
--- /dev/null
+++ b/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