File tree Expand file tree Collapse file tree 2 files changed +34
-0
lines changed
Client-Side Components/Client Scripts/Color-coded Priority field for improved UX Expand file tree Collapse file tree 2 files changed +34
-0
lines changed Original file line number Diff line number Diff line change 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+
Original file line number Diff line number Diff line change 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+ }
You can’t perform that action at this time.
0 commit comments