T
his onLoad client script shows how to change the background color of form buttons in ServiceNow. For this example, I set up the script to change the color of the ‘Approve and ‘Reject’ buttons on the approval form to green and red respectively. The script itself is pretty straight-forward and can be used as a model for targeting other DOM elements using client-side JavaScript.

You can use this script in an ‘onLoad’ client script on the table of your choice. This example should be used on the ‘Approval’ table.
function onLoad() {
//Change the color of the 'Approve' button to green
changeButtonColor('approve', '#00CC00');
//Change the color of the 'Reject' button to red
changeButtonColor('reject', '#CC0000');
}
function changeButtonColor(buttonID, backgroundColor) {
try{
//Find the button(s) by ID and change the background color
$$('button[id=' + buttonID + ']').each(function(elmt) {
elmt.style.backgroundColor = backgroundColor;
elmt.style.color = '#ffffff'; //make the button text white
});
}catch(e){}
}
//Change the color of the 'Approve' button to green
changeButtonColor('approve', '#00CC00');
//Change the color of the 'Reject' button to red
changeButtonColor('reject', '#CC0000');
}
function changeButtonColor(buttonID, backgroundColor) {
try{
//Find the button(s) by ID and change the background color
$$('button[id=' + buttonID + ']').each(function(elmt) {
elmt.style.backgroundColor = backgroundColor;
elmt.style.color = '#ffffff'; //make the button text white
});
}catch(e){}
}
I have updated this method with javascript prototypes, which makes much simpler to implement. Only requirement is to have an Action Name associated with the button.
This can be created as a global UI Script.
UI Script
Name: ChangeButtonColor
Global: Yes
Active: Yes
Script:
// e.g. changeButtonColor('sysverb_update', 'black', 'white');
// e.g. changeButtonColor('sysverb_update', 'black', 'white', 'bold');
// e.g. changeButtonColor('sysverb_update', 'black', 'white', 'bold', 'italic');
function changeButtonColor(buttonId, backgroundColor, color, fontWeight, fontStyle)
{
var button = $(buttonId);
button.style.backgroundColor = backgroundColor;
if (color)
button.style.color = color;
if (fontWeight)
button.style.fontWeight = fontWeight;
if (fontStyle)
button.style.fontStyle = fontStyle;
}
Great idea. I’ve actually been meaning to rewrite this code to use prototype for a while now. I’ve updated my example above to use prototype. One thing you might consider for your script is that you’ve usually got two sets of buttons on a form that you have to change the color for (one at the top and one at the bottom). You can check out my code above and adjust yours accordingly so that it gets both sets of buttons.
Mark,
We recently upgraded to Eureka and with UI14, this client script doesn’t seem to work anymore. Do you know what we could do to fix this?
Hi Blair. I think that some of the older button color scripts I had may not work perfectly in UI14, but the current one on the article works fine. I just confirmed this on the approval form in demo004. Make sure you’re using the updated script as a first step; if you’re still having problems after that, you should check your browser error console to see if there’s another client script or UI policy causing things to error out.
Mark,
Thanks for the feedback. I didn’t realize that this script was updated to include a try/catch. Once I added that, it works perfectly. Thanks again!
I’m glad that the new script did the trick!
I am trying to globally change the color of the background of buttons. We have just moved to Eureka and there have been a lot of complaints about the background color of the buttons but I cannot find how to do this globally. Is there a way to do this globally for all UI Action buttons?
It looks like SN has taken that away in the Eureka release. At this point in time I’m not sure how to do that, but if it’s possible it would be handled with the theme-specific settings.
I just logged a ticket with Service Now about changing the color of buttons globally. They then proceeded to create a Problem ticket. They said they didn’t know this was a bug.
Anyway, can someone please send me the new code? I can’t seem to find it.
thanks
Thanks for logging the ticket, please let us know here if you hear back from SN about a fix. As far as new code, the only code I have is in this article for changing the color of individual buttons.
This script works great…except
the New button on lists. This doesn’t change.
any ideas?
This is only designed to change the color of form buttons. There really isn’t a good way that I’m aware of to change the color of list buttons in the system.
Hey Mark, Is this suppose to work on Helsinki as well. I am checking the exact code on my Approval form, but this doesn’t work. Any suggestions?
I can confirm that it works great on several Helsinki instances I’m using. If it’s not working for you, I’d guess it’s probably due to another client script that is causing an error that’s killing the processing of all other client scripts and UI policies on that form. Check your browser error console to see if that’s the case.