Great UX Trick: Simple Info Banners for ServiceNow Lists

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 one line! ??

Enhancement: Delegate the administration of the banner

You can grant the right to edit the banner to non administrator, if you put the content into a System Property. In the UI Action, you will have to use gs.getProperty() to retrieve the text.

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

……………

Originally published in servicenow.implementation.blog by Shiva Thomas.

If this article was useful to you, please consider going to its ServiceNow Community version, to mark it as Helpful ?? and to Bookmark it.