How to Show Images in Info Messages in ServiceNow

I was recently working with a client who wanted to show an image whenever a specific addInfoMessage was displayed on the incident form. My first thought was that this was going to be a piece of cake since I knew that Info Messages (used in an “onDisplay” Business Rule in this case) could contain HTML.

So I began down my path. I first went to the “image picker” to find a suitable image; while there were a number of potential candidates, nothing really “popped”; so I decided I would add my own image/icon:

    1. First I went to Google’s image search and quickly snagged a great looking icon
    2. Opened the icon up in Gimp, and resized it to 20×20 (was 256×256 which was way too big for an info message)
    3. I then went to System UI -> Images -> New
    4. Specified a Category of “General”, and “Name”: IconName.png
    5. Then uploaded the image
    6. Now with the image in place we theoretically just needed to reference it in the infoMessage
          gs.addInfoMessage('<img src="IconName.pngx" /> This task message includes an icon')

And All Done… Right? Well, not so fast. Apparently, ServiceNow doesn’t display the image correctly when it is called in this manner. In order to workaround this behavior we have to perform some inline CSS styling (Nasty I know…) in order to display it “inline” with a width of 20px:

          gs.addInfoMessage('<img style="display: inline !important; width: 20px;" src="IconName.pngx" /> This task message includes an icon')

After adding in the styling the image was displayed properly and all again was right with the world.

 

Leave a Reply

Your email address will not be published. Required fields are marked *