Great UX Trick: Field decorations with 305 hidden icons

[Shiva Thomas]

ServiceNow contains a hidden treasure of more than 300 icons than can be used to convey better visual distinctiveness to your users' bookmarks, service portals and system info messages. This distinctiveness can be used to ensure that your contextual messages receive more attention and to facilitate navigation in your instance.

Those icons are dingbats characters grouped in a special web font included in your instance, and can be applied in your html content via CSS classes, applied to the italic or emphasis tag. Example: <i class="icon-name"></i>.   This web font was compiled by ServiceNow, using the open source Grunt-Webfont project. The version included in Jakarta is called retina_icons_2017_1_17.woff and contains 295 distinct icons. The version included in Kingston contains 10 more, for a total of 305 icons.

You can access a nice preview with all the characters included in the web font via a hidden URL that is available in any instances, even HI: https://YOUR_INSTANCE.service-now.com/styles/retina_icons/retina_icons.html

Extra icons for Field Decorations

Just in case you're not familiar with ServiceNow Field Decoration, I'll start by briefly present the base functionality before moving into advanced territories, before showing some handy advanced tricks and use cases.

What are Field Decorations?

They are symbolic icons that you can add left to any Field in a form.

It started circa 2008

One example that is provided out of the box in all instances is the VIP icon user with the Incident's Caller field.

Simply set the caller with a VIP user, and the onChange Client Script "Highlight VIP Caller" will highlight the field with an icon and red color.

if (caller.vip == 'true') {
 var bgPosition = "95% 55%";
 if (document.documentElement.getAttribute('data-doctype') == 'true')
       bgPosition = "5% 45%";
 callerLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: bgPosition, paddingLeft: '30px' });
 callerField.setStyle({color: "red"});
}

Those 16x16 pixel icons didn't scale well with high resolution displays and modern OS. Therefore, they were deprecated and were progressively removed since 2013. The VIP icon is one of the last examples remaining in the last releases.

Mobile evolution, circa 2013

ServiceNow started using its own custom made web font to ensure that the icons scales at every resolution.

On example is when someone else edits a record you are looking. There is an activity icon that highlights every field that have been refreshed.

They are also used in the UI macro icon.

To configure Field decoration you need to the very restricted Mobile GlideForm API, the only part of the GlideForm API that works on all user interfaces, including the Services Portals and mobile apps.

The good news is that the same functionality is now way simpler to script:

           if (ref.getValue('vip') == 'true')
                     g_form.addDecoration('caller_id', 'icon-star', 'VIP');

The full example is available in the Mobile GlideForm API documentation.

The bad news is that the API is very limited and you can't specify additional CSS arguments, like color or alternative sizes.

g_form.addDecoration (String fieldName, String icon, String text)

fieldName: The name of the target field

icon: The name of the icon, as shown in the retina_icons page

text: Text for mouse overs and text-only browsers

Some additional examples:

 

Suggestion about future evolution

I find it frustrating that you specify additional CSS arguments to addDecoration function. I feel that the 2013 iteration, while simplifying the feature, also lost effectiveness. The icons are very small, and black and white can only convey limited meaning.

I would appreciate if I was allowed to use custom styling, or why not, be allowed to use Emoji icons. The good news is that you can do exactly that in HTML info messages.

Related articles and future follow ups

I published a previous article about the use of those retina icons for custom bookmarks, and I plan to conclude with a third article about additional usages in HTML info messages.

This article was originally published in ServiceNow.implementation.blog.