Adding Icons to UI Action Buttons in ServiceNow

Home/Scripting/Client scripts/Adding Icons to UI Action Buttons in ServiceNow

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 has published a style guide that you can reference to view all of the icons (and corresponding names to reference them by). You can view the style guide here.

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){}
}
By | 2017-05-09T19:36:48+00:00 April 17th, 2017|Categories: Client scripts|Tags: |16 Comments

About the Author:

Mark has worked in the IT industry since 2002 and with ServiceNow since 2007. He is the founder and creator of SN | Guru and the co-founder of Crossfuze, one of the worlds leading ServiceNow consulting partners. Prior to co-founding Crossfuze, he worked for ServiceNow as a Senior Architect on the Professional Services team. He has personally led dozens of successful implementations encompassing every part of the ServiceNow platform. He is also responsible for designing and developing groundbreaking ServiceNow solutions and best practices in the form of various applications, turnkey solutions, and integrations during his tenure at ServiceNow, Crossfuze and, of course, SN | Guru. These solutions are used today by ServiceNow administrators and consultants alike in hundreds of ServiceNow instances around the world!

16 Comments

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

    This is awesome. Thanks for sharing.

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

    Fantastic post Mark.

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

    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 - Reply

    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 - Reply

      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 - Reply

    Another gem from my daily trolling of SN | Guru!

    Thanks Mark!

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

    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 - Reply

      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 - Reply

    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 - Reply

      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 - Reply

      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 - Reply

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

Leave A Comment