- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-24-2020 12:39 PM
We have a field on a task form called User Access Type.
By default, this field has a light yellow background via a configured style.
We would like to change the background color of this field to red when the field is Delete rather than Add.
I attempted to set another style that would set the background to red when the value was delete, but that does not appear to work. When I attempt to set a value on the existing configured style, it also appears to stop working for reasons I can't figure out.
I attempted to create a client script to change the background onLoad when the field value is delete, but scripting is not my strong suit and I have not been successful so far.
Solved! Go to Solution.
- Labels:
-
Scripting and Coding
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-25-2020 09:29 AM
Updating my code to have you use:
function onLoad() {
//Type appropriate comment here, and begin script below
var element = g_form.getElement('u_user_access_type');
var accessType = g_form.getValue('u_user_access_type');
if (accessType == 'delete') {
element.style.backgroundColor = "red";
}
}
Simply replace 'u_user_access_type' with the actual back-end name of the field (not label) and this will work.
I did this with the number field on Incident just to play around and this is how it turned out:
Please mark reply as Helpful/Correct.
Thanks!
Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-23-2023 07:22 AM
You can use the table sys_ui_style . You can write the condition in the value column using javascript tag and then write the style you needed to achieve in the style column. This is if you want on list view. If you want on form view then you have to write a client script like mentioned by Allen above and instead of using element.style.backgroundColor use element.style.color
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
3 weeks ago
Hello Allen,
Just chiming in 5 years later to say big thanks for the script you posted. I read quite a few community threads on this topic and your script was by far the simplest, so much that even a non-coder like myself was able to tweak the script setting to fit my custom fields.
For anyone else reading this, here is if the full script I ended up using for a Green/Yellow/Red health status field:
function onLoad() {
//Type appropriate comment here, and begin script below
var element = g_form.getElement('u_hr_case_health_v2');
var caseHealth = g_form.getValue('u_hr_case_health_v2');
if (caseHealth == '1')
element.style.backgroundColor = "#6EDB8F";
else if (caseHealth == '2')
element.style.backgroundColor = "#FFE366";
else if (caseHealth == '3')
element.style.backgroundColor = "#FF7B65";
}
I read up on graphic design discussion and most people agree that the default Green/Yellow/Red colors are way too harsh when viewed together, so those hex colors align to the "Light" color versions from ServiceNow's color definition records:
- Light green: #6edb8f
- [instance].com/nav_to.do?uri=sys_report_color.do?sys_id=280689b3d7332100fa6c0c12ce6103d0
- Light yellow: #ffe366
- [instance].com/nav_to.do?uri=sys_report_color.do?sys_id=6266c9b3d7332100fa6c0c12ce610316
- Light red: #ff7b65
- [instance].com/nav_to.do?uri=sys_report_color.do?sys_id=408589b3d7332100fa6c0c12ce610377
I also created Field Style records (right-click the field in the form and select Configure Styles) for each dropdown value to make the colored dot appear in the list view, and Chart Color records (Platform Analytics Administration > Color Settings > Chart Colors) so that Platform Analytics can enforce data visualization/report elements to have colors that align to each of the colors (i.e. green status is represented by a green slice/bar, etc.).
