From 8b66e69f6e46b704e7be8288694a415528060154 Mon Sep 17 00:00:00 2001 From: Bhavishya Velaga <52957703+bhavishyavelaga@users.noreply.github.com> Date: Sun, 5 Oct 2025 11:15:41 -0400 Subject: [PATCH 1/3] Created README.md --- .../README.md | 20 +++++++++++++++++++ 1 file changed, 20 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..28f039f61a --- /dev/null +++ b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/README.md @@ -0,0 +1,20 @@ +# Field Color-Coding Based on Choice Values + +## Purpose +Dynamically change the background color of any choice field on a form based on the selected backend value. + +## 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. Optionally update the `labelMap` for tooltips. +5. Save and test on the form. + +## Key Points +- Works with any choice field +- Uses backend values of choices for mapping colors. + +## Demo + +image + From 4c28f656705a2f0712bbc2dc919882c49af25bc9 Mon Sep 17 00:00:00 2001 From: Bhavishya Velaga <52957703+bhavishyavelaga@users.noreply.github.com> Date: Sun, 5 Oct 2025 11:19:32 -0400 Subject: [PATCH 2/3] Script for field color coding --- .../setColor.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js 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 new file mode 100644 index 0000000000..9538d57461 --- /dev/null +++ b/Client-Side Components/Client Scripts/Color-coded Priority field for improved UX/setColor.js @@ -0,0 +1,15 @@ +function onChange(control, oldValue, newValue, isLoading) { + + var colorMap = { + '1': '#e74c3c', // Critical - strong red + '2': '#e67e22', // High - bright orange + '3': '#f1c40f', // Moderate - yellow + '4': '#3498db', // Low - blue + '5': '#27ae60' // Planning - green + }; + + var priorityField = g_form.getControl('priority'); + if (!priorityField) return; + + priorityField.style.backgroundColor = colorMap[newValue] || ''; +} From f0aebbaba2b5fd9ae255a8a84cf038740805280d Mon Sep 17 00:00:00 2001 From: Bhavishya Velaga <52957703+bhavishyavelaga@users.noreply.github.com> Date: Sun, 5 Oct 2025 11:19:55 -0400 Subject: [PATCH 3/3] Update README.md --- .../Color-coded Priority field for improved UX/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 28f039f61a..92c842b04a 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 @@ -7,8 +7,7 @@ Dynamically change the background color of any choice field on a form based on t 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. Optionally update the `labelMap` for tooltips. -5. Save and test on the form. +4. Save and test on the form. ## Key Points - Works with any choice field