Refresh UX with UI Builder – list

ServiceNow has a nice history of UX/UI improvements. I personally haven’t used UI15, but I saw that UI16 was a big step ahead. Couple of years have passed and now we have polaris. It has its flaws, but it’s refreshing and clean. It’s also a lot more configurable than you may think – the Next Experience UI framework connected with some basic UI Builder components can make your backend look fresh and clean even for non-technical users.

So what’s the plan?

Let’s start with the list. I plan to do another post on refreshing the form, maybe something else, who knows. The first thing to do is to create an experience. The end result may look similar to this:

An experience worth remembering

The first important choice which is not really well documented (and the help link redirects to no results found page…) – selecting an app shell. However, you can easily find a documentation page describing the different options. Unfortunatelly, it doesn’t have sample pictures, but you can imagin what the result would be like. Since our list would be used for working, the logical choice is Workspace App Shell. The name is not that important, just remember it will be visible in the URL all the time. Our use case also doesn’t care about landing page.

Let’s stay on the same page

Now, we want to create a list. One of its features os reusability across multiple tables. This is why we have to configure parameters for our UI Builder page. The most basic ones should be:

• table – to show records from specific table
• query – to add predefined filtering
• view – to enable different list views

With this basic set we will be able to not only use the list for our custom app, but also add it to the navigator as a module and even replace the default lists on the platform. Sounds crazy? It does, but it also requires a lot more work (including list event handling, there are so many events available for the List component).

And finally, our list

Now we are ready to add list to our page. Just search for it in Add component screen and add it:

The basic config is really simple:

• Table – @context.props.table
• View – @context.props.view
• filter – @context.props.query

The rest of the true/false pills are up to you. The customizations possibilities are pretty big, so you can make your UX really unique.

On top of that, you get all the nice features of this component – column sorting, column reordering, drag&drop features, new UI for filtering

One last thing…

On the teaser picture above, you have probably noticed the colors and empty values replacement. In UI16 it could have been achieved with UI Macro. In UI Builder however, it will no longer work. UI Builder components have great documentation pages. On the List component page, you can find the property called Highlighted values config:

It even mentions the table where you have to add the configuration to highlight some values. But that table is wrong. The correct one is sys_ux_highlighted_value_config.

List highlights

What you have to do is not as clear as it should

1. Add a highlight config record (no table reference required) – sys_ux_highlighted_value_config
2. Add a highlighted value (table and field are required) – sys_highlighted_value
3. Add a highlighted value condition (condition and highlights definitions) – sys_highlighted_value_condition

Instead of having it in one, maybe two connected records, it’s now super customizable and there are three records in three different tables. Just for one field highlights. In my opinion it’s an overkill, but maybe there is a plan for the future to use it, who know…

Conclusion

The UI Builder experience provides a lot of possibilities to completely redesing UX on the platform. It is a very powerful tool to make sure your end users are using the platform exactly how they want to. When you think about it, you could even mimic the tool you are replacing with ServiceNow. That’s neat!