This 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.
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){}
}If you want to take this step a little bit further, you can add icons to UI actions.
Fortunately, with the addition of a new icon set in recent ServiceNow releases, this has become pretty simple to do.
The following script can be used in any standard form client script. The key is the ‘transformButton’ function at the bottom. This could be included as a global UI script in your instance so that you don’t need to include it in every single client script. Once that’s in place (whether in a global UI script or in the client script itself) you can just call ‘transformButton’ with the appropriate parameters to change the button however you want. The parameters used are as follows…
- UI action name (Mandatory)
- Button background color (Optional)
- Button text color (Optional)
- Button icon name (Optional)
function onLoad() {
//Change the color of the 'Approve' button to green
transformButton('approve', '#77FF77', 'white', 'icon-success-circle');
//Change the color of the 'Reject' button to red
transformButton('reject', '#FF0022', 'white', 'icon-error-circle');
//Change the color of the 'Info' button to blue
transformButton('info_button', '#31708f', 'white', 'icon-info');
//Change the color of the 'Warning' button to yellow
transformButton('warning_button', '#f0ad4e', 'white', 'icon-warning-circle');
}
function transformButton(buttonID, buttonBackgroundColor, buttonTextColor, buttonIconName) {
try{
//Find the button(s) by ID and change the background color
$$('button[id=' + buttonID + ']').each(function(elmt) {
elmt.style.backgroundColor = buttonBackgroundColor;
if(buttonTextColor){
elmt.style.color = buttonTextColor;
}
if(buttonIconName){
elmt.addClassName(buttonIconName);
//Add some spacing between the icon and button label
elmt.innerHTML = ' ' + elmt.innerHTML;
}
});
}catch(e){}
}
This same idea can be applied to form header colors as well by getting the HTML element of the form. You’re probably aware that ServiceNow provides a global CSS property to set the form and list header color. The global property can be found by navigating to System Properties -> CSS, and changing the ‘Banner and list caption background-color property.
function onLoad() {
//Change the color of all form section headers
var backgroundColor = 'red';
$$('.navbar').each(function(elmt) {
elmt.style.backgroundColor = backgroundColor;
});
}(All credits go to ServiceNowGuru for this awesome finding!)
[Updated 30/09/2019]
As you may notice, the UI action element names differ (top from bottom) and for this, you need to add them also - you can verify the names by getting the HTML element of the form. (tested in Madrid)
function onLoad() {
changeButtonColor('approve', 'limegreen', 'white'); //approve button header
changeButtonColor('reject', 'red', 'white'); //reject button header
changeButtonColor('approve_bottom', 'limegreen', 'white'); //approve button bottom
changeButtonColor('reject_bottom', 'red', 'white'); //reject button bottom
}
function transformButton(buttonID, buttonBackgroundColor, buttonTextColor, buttonIconName) {
try{
//Find the button(s) by ID and change the background color
$$('button[id=' + buttonID + ']').each(function(elmt) {
elmt.style.backgroundColor = buttonBackgroundColor;
if(buttonTextColor){
elmt.style.color = buttonTextColor;
}
if(buttonIconName){
elmt.addClassName(buttonIconName);
//Add some spacing between the icon and button label
elmt.innerHTML = ' ' + elmt.innerHTML;
}
});
}catch(e){}
}
I hope this helps.
Please comment or mark helpful - click as appropriate.
Hi Rafael,
this is a nice feature. I tried to use it in my personal Developer Instance for testing first but I found out that only the Form Button in the header changed the color and the icon appeared in front of the text.
The Form Butoon on the Bottom did not change.
This is under Madrid Build tag: glide-madrid-12-18-2018__patch1-02-13-2019.
In which Release did you test?
Thanks for a comment.
that's great idea
there is an OOB feature from servicenow with similar to apply color to UI Action
Hi @Community Alums ,
I tried the same code in my scoped application with two new UI actions - Up Vote and Down Vote with up and down arrow icons before them but for some reason the width doesn't auto adjust and the button messed up in the classic UI.
Also, doesn't it work in service portal? It isn't on my end.
FYI:
Client Script UI type set to All
