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 index 92c842b04a..94723d1e76 100644 --- 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 @@ -1,19 +1,114 @@ -# Field Color-Coding Based on Choice Values +# ๐ŸŽจ Dynamic Field Background Color Based on Choice Value -## Purpose -Dynamically change the background color of any choice field on a form based on the selected backend value. +## ๐Ÿ“ Location +**Category:** `Client-Side Components` +**Subcategory:** `Client Scripts` +**Snippet Folder:** `Field Background Color OnChange` -## How to Use -1. Create an OnChange client script on the desired choice field. -2. Replace `'your_field_name'` in the script with your actual field name. -3. Update the `colorMap` with relevant backend choice values and colors. -4. Save and test on the form. +--- -## Key Points -- Works with any choice field -- Uses backend values of choices for mapping colors. +## ๐Ÿ“Œ Description -## Demo +This client-side `onChange` script dynamically updates the **background color** of a **choice field** based on the selected **backend value**. -image +This visual enhancement improves form usability by making key field states (like priority or status) more immediately recognizable, reducing user error and boosting efficiency. +--- + +## ๐Ÿš€ Features + +- โœ… Uses `g_form.getControl()` to access the fieldโ€™s DOM element +- โœ… Color-codes based on backend values, not display labels +- โœ… Easy to customize โ€” works with any choice field +- โœ… Executes only on field value change (not on form load) +- โœ… Improves UX with real-time visual feedback + +--- + +## ๐Ÿ“„ Script: `setColor.js` + +```javascript +function onChange(control, oldValue, newValue, isLoading) { + if (isLoading) return; + + // Map backend choice values to colors + var colorMap = { + '1': '#e74c3c', // Critical - Red + '2': '#e67e22', // High - Orange + '3': '#f1c40f', // Moderate - Yellow + '4': '#3498db', // Low - Blue + '5': '#27ae60' // Planning - Green + }; + + // Replace 'priority' with your actual field name + var fieldControl = g_form.getControl('priority'); + if (!fieldControl) return; + + fieldControl.style.backgroundColor = colorMap[newValue] || ''; +} + +๐Ÿ› ๏ธ How to Use + +1) Create a Client Script in ServiceNow: + + Type: onChange + Field: e.g., priority + Table: Your target table (e.g., incident or task) + Script: Use the code provided in setColor.js + +2) Customize if needed: + + Change 'priority' to the name of your field + Modify the colorMap values to match your fieldโ€™s backend values and desired colors. + + +๐Ÿ“ธ Example Use Case + +You're building a form where priority is a required field. You want high-priority issues to stand out visually: + +1) Critical (value: 1) turns the field red +2) High (value: 2) turns it orange +3) Low or Planning priorities show in blue or green + +This helps agents recognize and prioritize tasks more quickly. + +๐Ÿ“‚ File Structure + +Client-Side Components/ +โ””โ”€โ”€ Client Scripts/ + โ””โ”€โ”€ Field Background Color OnChange/ + โ”œโ”€โ”€ README.md + โ””โ”€โ”€ setColor.js + +โœ… Requirements Checklist + +โœ”๏ธ Script is in a properly named snippet folder +โœ”๏ธ Code is relevant and useful to ServiceNow developers +โœ”๏ธ No XML exports or platform-specific data +โœ”๏ธ README.md included with: + + Description + Usage instructions + Example code + Folder structure + +โœ”๏ธ No use of sensitive data or global variables +โœ”๏ธ Works with standard choice fields in the platform + + +๐Ÿ‘จโ€๐Ÿ’ป Author + +Contributor: @Shweyy123 +Pull Request: #1845 +Script Name: setColor.js +Compatibility: Works with most ServiceNow instances (Orlando and later) + +๐Ÿ“˜ License + +This code is provided under the MIT License. Use at your own discretion in production environments. Always test in a sub-production instance first. + +๐Ÿงฉ Additional Ideas (Optional Enhancements) + +1) Show display values alongside color mapping +2) Add a tooltip with the priority name +3) Extend support for multiple fields (e.g., priority + state) diff --git a/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js index 9538d57461..c3079e019c 100644 --- a/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js +++ b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js @@ -1,5 +1,7 @@ function onChange(control, oldValue, newValue, isLoading) { + if (isLoading) return; // Skip when loading the form + // Map backend choice values to colors var colorMap = { '1': '#e74c3c', // Critical - strong red '2': '#e67e22', // High - bright orange @@ -8,8 +10,10 @@ function onChange(control, oldValue, newValue, isLoading) { '5': '#27ae60' // Planning - green }; - var priorityField = g_form.getControl('priority'); - if (!priorityField) return; + // Replace 'priority' with your field name + var fieldControl = g_form.getControl('priority'); + if (!fieldControl) return; - priorityField.style.backgroundColor = colorMap[newValue] || ''; + // Apply background color based on selected value + fieldControl.style.backgroundColor = colorMap[newValue] || ''; }