Change the Color of Form Buttons

///Change the Color of Form Buttons

Change the Color of Form Buttons

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.

Form button color change

Because we’re dealing with form buttons (which are actually UI Actions) in this script, you’ll need to pay close attention to the of your UI Action. You’ll need to provide the button ACTION NAME in the script below.
This same idea can be applied to form header colors as well. Check out this article to find out how!

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){}
}
By | 2018-07-09T15:00:12-06:00 February 23rd, 2010|Categories: Client scripts|Tags: , |14 Comments

About the Author:

14 Comments

  1. Amado Sierra November 3, 2011 at 2:24 pm - Reply

    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');
    // 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;
    }
    • Mark Stanger November 3, 2011 at 4:58 pm - Reply

      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.

  2. Blair September 22, 2014 at 12:20 pm - Reply

    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?

    • Mark Stanger September 22, 2014 at 1:56 pm - Reply

      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.

      • Blair September 23, 2014 at 7:32 am - Reply

        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!

  3. Angela October 13, 2014 at 11:10 am - Reply

    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?

    • Mark Stanger October 14, 2014 at 6:06 am - Reply

      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.

  4. Debbie October 21, 2014 at 5:32 am - Reply

    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

    • Mark Stanger October 21, 2014 at 5:56 am - Reply

      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.

  5. Debbie October 22, 2014 at 2:43 am - Reply

    This script works great…except
    the New button on lists. This doesn’t change.
    any ideas?

    • Mark Stanger October 22, 2014 at 7:58 am - Reply

      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.

  6. Not working on Helsinki December 5, 2016 at 12:13 am - Reply

    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?

    • Mark Stanger December 5, 2016 at 6:22 am - Reply

      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.

Leave A Comment