Skip to content

Commit 86a53fb

Browse files
authored
Enhance Choice Field UX with Dynamic Color-Coding Based On Values (#1824)
* Created README.md * Script for field color coding * Update README.md
1 parent 7ea4a2b commit 86a53fb

File tree

2 files changed

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

2 files changed

+34
-0
lines changed
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Field Color-Coding Based on Choice Values
2+
3+
## Purpose
4+
Dynamically change the background color of any choice field on a form based on the selected backend value.
5+
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.
11+
12+
## Key Points
13+
- Works with any choice field
14+
- Uses backend values of choices for mapping colors.
15+
16+
## Demo
17+
18+
<img width="1710" height="557" alt="image" src="https://github.com/user-attachments/assets/9fb9e68a-1ade-4eb5-81cc-c947c970bd6f" />
19+
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
function onChange(control, oldValue, newValue, isLoading) {
2+
3+
var colorMap = {
4+
'1': '#e74c3c', // Critical - strong red
5+
'2': '#e67e22', // High - bright orange
6+
'3': '#f1c40f', // Moderate - yellow
7+
'4': '#3498db', // Low - blue
8+
'5': '#27ae60' // Planning - green
9+
};
10+
11+
var priorityField = g_form.getControl('priority');
12+
if (!priorityField) return;
13+
14+
priorityField.style.backgroundColor = colorMap[newValue] || '';
15+
}

0 commit comments

Comments
 (0)