Adding Icons to UI Action Buttons in ServiceNow

It’s hard to believe that it’s been seven years since I wrote a post showing how you can use client scripts to manipulate the appearance of form UI action buttons. This solution has been used in countless ServiceNow instances to help add more clarity to form buttons and processes in the system. A few months ago, I decided to try and see if I could expand on this client script method a bit to add even more button flexibility with the addition of an option to include an icon along with the button text. Fortunately, with the addition of a new icon set in recent ServiceNow releases, this has become pretty simple to do…all while leveraging a consistent, nice-looking icon set.


Available icons

You’ve undoubtedly seen them in various parts of the system, but you may not have realized until now that there are over 250 icons available to choose from in ServiceNow! You can use these icons in various ways (client scripts, UI pages, UI macros, CMS and Service Portal), including with UI action buttons as I show here. All you have to do to show an icon is to add a class attribute with a name matching the icon you want to add.
ServiceNow had previously published a style guide that you could reference to view all of the icons (and corresponding names to reference them by). For the time being, you can access the icons in your instance by navigating to https://your_instance.service-now.com/styles/retina_icons/retina_icons.html

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…

  1. UI action name (Mandatory)
  2. Button background color (Optional)
  3. Button text color (Optional)
  4. 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){}
}

Date Posted:

April 17, 2017

Share This:

19 Comments

  1. Donte April 17, 2017 at 12:06 pm

    This is awesome. Thanks for sharing.

  2. Sanbir April 17, 2017 at 12:28 pm

    Fantastic post Mark.

  3. Karthik April 17, 2017 at 12:45 pm

    Hi Mark,
    As you mentioned, could you please extend how we can put the “transformButton” code in ui script and utilize from client side.

    Thanks in advance,
    Karthik

  4. Dave Edgar April 18, 2017 at 3:50 am

    Thanks Mark. Not seen another instance with this before, been playing with it already and will be pushing to use it more and more

    • Mark Stanger April 18, 2017 at 5:59 am

      This is an SNGuru original so this is the only place you’ll find it to my knowledge. I hope it works well for you!

  5. Eric Pace April 18, 2017 at 1:17 pm

    Another gem from my daily trolling of SN | Guru!

    Thanks Mark!

    • Mark Stanger April 18, 2017 at 1:21 pm

      Thanks Eric, glad you like it!

  6. William Smith May 9, 2017 at 9:40 am

    How can I get the button background color to use the Bootstrap color theme, like you have in your examples?

    • Mark Stanger May 9, 2017 at 7:38 pm

      One way to get at any of the colors you can already see in the system is to install a free browser color picker plugin. For the specific example in the screenshot I’ve updated the script above so that you can see.

  7. Sebastien July 12, 2017 at 6:56 am

    Hi Mark,

    With Scoped application created with Studio (Istanbul Patch3-hotfix0a), the color did not apply on UI Action => we got a error into the Chrome console “Error Button color : TypeError: $$ is not a function”.

    Is there a workaround with that issue ?

    • Sebastien July 12, 2017 at 7:03 am

      the original error message is “TypeError: $$ is not a function” => “Error Button color:” goes from my client script try catch function ;-)

    • Sebastien July 13, 2017 at 2:18 am

      Solution found on the SNC community :
      https://community.servicenow.com/thread/224200

      Add the following scoped system property for your apps

      Name: glide.script.block.client.globals
      Type: true/false
      Value: false

  8. Alexander August 29, 2017 at 6:55 am

    Where can i find the list of available icons by name in SNow? :)

  9. Brian January 18, 2019 at 8:46 am

    Hmm, the style guide link doesn’t work anymore.

  10. Mike October 31, 2022 at 1:17 pm

    To anyone finding this post after the “Next experience” upgrade You will need to add elmt.style.width = ‘auto’;
    elmt.style.padding = ‘0px 10px’;
    elmt.style.border = ‘1px black’;
    elmt.style.alignItems = ‘center’;
    for everything to work correctly otherwise buttons get mashed up and have weird spacing.

Comments are closed.

Categories

Tags

Loading

Fresh Content
Direct to Your Inbox

Just add your email and hit subscribe to stay informed.