Skip to content

Conversation

@Shweyy123
Copy link

@Shweyy123 Shweyy123 commented Oct 6, 2025

README.md

🎨 Dynamic Field Background Color on Change (Client Script)

📌 Description

This client-side onChange script dynamically changes the background color of a choice field (e.g., priority) on a form based on its selected backend value. The visual cue enhances the user experience, making it easier to distinguish form states like urgency, priority, or status at a glance.

Useful in scenarios where quick visual feedback is important — for example, highlighting high-priority incidents in red or planned work in green.


🚀 Features

  • ✅ Works with any choice field (just update the field name)
  • ✅ Uses g_form.getControl() to target DOM elements
  • ✅ Color-codes based on backend values, not labels
  • ✅ Improves usability with real-time feedback
  • ✅ Lightweight and efficient — runs only on user interaction

🛠️ How to Use

📄 Script Location:

Place this in a Client Script with the following settings:

  • Type: onChange
  • Table: (Choose your target table, e.g., incident)
  • Field Name: priority (or your custom choice field)
  • When: onChange

💡 Customization:

  1. Replace 'priority' in the script with the name of your choice field if different.
  2. Adjust the colorMap object to match your field’s backend values and preferred colors.

🧠 Script Logic

function onChange(control, oldValue, newValue, isLoading) {
  if (isLoading) return;

  var colorMap = {
    '1': '#e74c3c',  // Critical - red
    '2': '#e67e22',  // High - orange
    '3': '#f1c40f',  // Moderate - yellow
    '4': '#3498db',  // Low - blue
    '5': '#27ae60'   // Planning - green
  };

  var fieldControl = g_form.getControl('priority'); // Replace 'priority' with your field name
  if (!fieldControl) return;

  fieldControl.style.backgroundColor = colorMap[newValue] || '';
}

📂 Folder Structure

Client-Side Components/
└── OnChange Field Color Highlight/
    ├── setColor.js
    └── README.md

🎯 Use Case Example

You're building a custom form for task management where the priority field is crucial for the agent to assess quickly. Instead of just reading "Critical" or "Low", the user now sees red or green immediately based on the selection, improving response time and reducing errors.

 Contribution Checklist

✔️ Script placed under Client-Side Components/OnChange Field Color Highlight/
✔️ Includes descriptive README.md
✔️ Script is single-purpose and cleanly written
✔️ No XML exports or sensitive data
✔️ Compatible with current ServiceNow client scripting standards

👨‍💻 Author

Contributor: @Shweyy123
PR Reference: #1845
File: setColor.js  Dynamic color-coding for choice fields

@rohi-v rohi-v self-assigned this Oct 6, 2025
@rohi-v
Copy link
Contributor

rohi-v commented Oct 6, 2025

@Shweyy123 I can see that you have just changed the variable name inside the script.

Review your contribution against the guidelines and make the necessary adjustments. Closing this for now. Once you make additional changes, feel free to re-open this Pull Request or create a new one

@rohi-v rohi-v closed this Oct 6, 2025
@wiz0floyd wiz0floyd added the spam label Oct 6, 2025
@Swetha-dev59 Swetha-dev59 mentioned this pull request Oct 7, 2025
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants