Jon G Lind
ServiceNow Employee
ServiceNow Employee

The ServiceNow UI Builder (UIB) has been around for a while now, and like anything with a bit of history a few myths will work their way into the public consciousness.  The good new is that UIB is not the Loch Ness Monster or Big Foot (maybe that's BAD news, because that would be cool) and we can evaluate some of the ideas that are floating around out there and try to set them straight.

 

What is “UIB” and Next Experience?

First, though, a refresher.  Next Experience is our modern framework, which includes code, html and styling for delivering modern web experiences on the ServiceNow platform.


The thing to remember is that UIB is the premier way to build next experiences. The Next Experience styling and application framework (commonly referred to as User Experience Framework or UXF) are there to support you by handling the dirty work of wiring up and styling your application for a consistent look and feel as well as providing reusability of common components.
 
So, with that out of the way--on to the myths!
 

Five Myths of ServiceNow UI Builder (UIB)

The Next Experience is "UIB"

This is understandable, and I will not fight you on it!  The User Interface Builder, lovingly known as “UIB”, is a tool to help you compose user experiences within the Next Experience framework, but the two are not the same.  Since UIB is the most common tool to configure and build experiences using Next Experience, the tendency to call each of them “UIB” is fair and will likely continue no matter how much pedantic ServiceNow employees like myself tell you otherwise.

 

It is useful to know that the UX Framework which supports Next Experience and UIB is a separate structure built to allow flexible and dynamic user experiences to be built using a variety of powerful tools.

 

Themes are hard and you can’t style granularly

The Next Experience themes help ensure consistency, but as a result you may feel that you don’t have quite as much control over the CSS and HTML as you were used to with other web dev technologies.  However, you may have more flexibility than you realize.  In Tokyo you can control themes at a more granular level, creating a main theme and then leveraging “sub-themes” for each specific concept such as Fonts, Colors, Shape Styles (rounded vs square corners) and images.  You can mix out of the box (OOB) and your own styles (e.g. keep the OOB fonts but change the colors) and create variants that users can choose from through their user preferences.

5 Myths - Theme Selection.png

 Yes!  You can even create your own themes and deliver them to your users like this!

 

There is even a snazzy tool called “deoprototypes” to help you build out a color scheme, learn how to apply styles, get a list of CSS “hooks” that you can target for styling, and make it easier to generate configurations for use within your environment.  Once you’re done with that you can apply the styling per environment, per user, leverage it in your new UIB applications and even with old-school Jelly or Service Portal apps.  Check out Ashley's Next Experiencing Theming article on the (COE) to learn how (NOTE: pay close attention to the article to ensure that you are copying the outputs of the deoprototypes tool correctly).

 

UIB is "New"

Granted, it is much newer than some of the technology we have provided to developers such as AngularJS (2010) and Jelly (going back to at least 2003). As an organization we are continuing to support this elderly technology, but it is not the way of the future.

 

The development of the UX Framework (called “Seismic” internally) which is used to render experiences dates to approximately 2017. The UIB tool itself has been around since Quebec and ServiceNow is continuing to invest in it to make sure that its standards-based web component architecture remains relevant for years to come.

 

You can't do {fill in the blank} with UIB

The primary use case of building and editing workspaces is really UIB’s wheelhouse. We strive to make reusable components to address the majority of use cases and it can be refreshingly simple to create a new workspace or tweak an existing one. The component library and pre-built app shells give you a consistent experience and rapid development.

 

As a software developer sometimes I don’t want consistent or rapid or easy! I want control!

 

Luckily there are tools for the pro-dev that allow for maximum control. An experienced developer armed with the ServiceNow Command Line utility (CLI) can generate any HTML that they wish, leverage the NPM library, develop locally in their favorite IDE, and manage deployment of their custom controls. You can even embed ServiceNow’s components (e.g. buttons and checkboxes and input fields) within your custom components so that you don’t have to implement everything from scratch.

 

Bottom line--developers who are advanced enough to feel that they are constrained by the standard component library are also skilled enough to use the CLI and take full control to build any kind of custom component.

 

 

UIB is not ready

I hear this one a lot.  However, if you are using the ServiceNow platform, then you are likely using “UIB” generated experiences whether you realize it or not. There are approximately 20 workspaces for a variety of our applications that were built using this technology, and users in San Diego and Tokyo who upgrade to the Next Experience (and you should!) are greeted with a Next Experience UI as their home page.

 

The Customer Service Management, CMDB and the Service Operations Workspace are just three more examples that are used by thousands of users each day.

 

It's not just our internal teams that can leverage this.  The tool is ready for you take this power and create and edit experiences to innovate the next generation of powerful enterprise applications built on your favorite platform.  

Getting Started

Ready to get started customizing and creating using UIB?  It can seem daunting at first, but if you invest about 10 hours and learn the fundamentals you will be on the way to (like me) wondering how you ever got by without it.  I also came to actually love working with the tool (let's just say that was not my impression when I first started working with the tools) and you too will hopefully realize how much you can accomplish more quickly and efficiently.  

 

Prescribed courses

  1. UI Builder Fundamentals NowLearning Course
  2. UI Builder Developer Site Course (complete all 5 modules)
  3. Building a Killer Experience with UI Builder CC Lab

Resources

sndevs.slack.com

Next Experience Center of Excellence

Version history
Last update:
‎10-17-2022 11:27 AM
Updated by:
Contributors