Great UX Trick: Simple Info Banners for List Views

ServiceNow’s List Views are a great interface to display list of records, but sometime they are bit dry. Did you know that there is an easy trick to add banners on top of them?

Such info banners are useful, as they can give contextual help to your users. This is a better approach than emails, as the information is easily found when the user need it. To display banners on list views, we need to be creative and use configuration in an unexpected way…

Usually, UI Actions are used to add buttons to forms or list views. They are a nice way to add features… But they can’t be used to add banners… unless you use a…

Clever workaround

1. Create a new UI Action
2. Select the Table where you want to display the banner.
3. Set List Banner Button to True. List bottom button or List context menu can also be used.
4. In the Condition field put a script that will trigger an info message

Some example of Conditions that can be used:

if (!RP.isRelatedList()) { gs.addErrorMessage("Don't forget to wash you hands before opening an incident."); }

if (!RP.isRelatedList()) { gs.addInfoMessage("<b style='font-size: 150%'> 🤨💬 Due to new company regulation, only incidents from your legal entity are visible.</b>"); }

Explanations

The Condition is evaluated server side, before the list is displayed. Unlike business rules, the UI Action will ignore most database calls, and only trigger when a list view is generated. This is excellent for performance. The condition is expecting some true/false answer, but since we are not returning one, the UI Action won’t display a button.

We avoid using the Script, as any JavaScript would only be executed once the button is clicked by an user. This is why our code is on the Condition… to ensure it’s executed without user interaction.

gs.addInfoMessage is the function that display the blue banner. You can put HTML in here, to enhance the content, but you can’t change the blue box itself.

gs.addErrorMessage can be used as an alternative. It will use a red box to display your message.

!RP.isRelatedList() ensures that the banner will not be displayed on form including related lists.

Alternative

I got the idea of adding banners on list view from the Subscription table.

In here, ServiceNow triggers gs.addInfoMessage via a on-query Business Rules. Since they are executed on every database query, the developer had to use 23 lines of code to insert complex conditions to avoid unwanted side-effect.

Using an UI Action allows to trigger the same banner with only 1 line! 😅

Enhancement: Delegated administration of the text

You can also grant the right to edit the banner to non administrator, if you put the text into a system property. You’ll have to use gs.getProperty() in the condition.

if (!RP.isRelatedList() && gs.getProperty('customInfoText') != '') { gs.addInfoMessage(gs.getProperty('customInfoText') ); }