Now Experience UI Framework: landscape of the future

Now Experience framework was originally introduced in 2020 as a new tool for building ServiceNow custom UI/UX and web applications. At that time we did not have a chance to dig deep into the architecture since the initial rollout was very limited, but everything changed with a Quebec release.

Quebec release introduced a complete toolset for building modern web applications on the ServiceNow platform — starting from a low-code UI Builder to a fully updated CLI for creating custom web components.

1. Now Experience Framework — where to start?

Now Experience Framework is a set of tools, concepts, and architecture principles that developers are going to use for building custom ServiceNow applications. It is important that everyone understands what the framework is and how to navigate it.

The framework introduces two functional branches:

“Application Development” is a low code branch of the framework. UI Builder is a primary tool for creating custom ServiceNow web applications, portals, and dashboards. No heavy scripting assumed here — you will be just using UI Builder designing application pages, wiring up components etc.

“Low code” does necessary mean no-code (despite the fact that overall intent is to use as little code as possible). Developers need to understand architecture concepts and building blocks because scripting might be required in many cases.

“Component Development” is a part of the framework that requires a deep understanding of web development technologies and scripting. This area of the Now Experience framework is about building custom components that can be used in UI Builder. The primary tool is VS Code or any other IDE that supports modern javascript development.

Interesting fact to point out is that you can build components using the latest javascript frameworks and libraries like React, Angular, Vue etc. It may be tricky but at the end it is all about web standards and it is widely supported.

2. Application Development — basic concepts

To start building applications with UI Builder you would need to understand the basic structure of the application:

There are three core records, that establish “an application”. You start developing an app by creating and configuring those records:

1. App shell — this record defines an application environment. This is the place where you declare basic look&feel and functionality of your app in terms of the header, footer, main content area, left-navigation etc. There are several out-of-the-box app shells available for developers, so you don’t need to create it from scratch.
2. Experience — this is where you configure the corresponding app shell and define global application properties.
3. App Config — app config is a bundle of all application pages. This is the primary place where your application UI/UX is located. And this is where you will be working most of the time with UI builder.

“Page” is a core concept in Now Experience Framework — it is an isolated web page that provides custom UI/UX. The page may contain multiple variants (you may think about a variant as an “instance” of a page) and each variant may have its own params, components etc.

Developers create Pages/variants by wiring up framework components in UI Builder.

3. Development in UI Builder — what you need to know

The development process in UI Builder is pretty simple and straightforward — you just drag&drop components, configure properties, define layouts etc. However, you have to understand the principles of how the framework works, building blocks, and how to connect everything:

UI Builder is indeed a low code environment that allows you to build advanced UI/UX without heavy scripting. There is a good chance that it will have a significant impact (in a good way) on how we’re building ServiceNow applications.

Just make sure to prepare yourself with a knowledge of such areas as: state management, routing, event management etc. Those are core concepts in web development, and they have their own implementation in the Now Experience Framework.

5. Core Data Management Components

There is a number of out-of-the-box components created by ServiceNow that establish a foundation for most of the custom apps built with UI builder.

Familiarity with these components and the ability to utilize their API would be a critical skill for ServiceNow developers. Some of those components listed below:

At this time (Feb 2021) we don’t have much information about those components API, but they are available in UI Builder and can be used for application development.

6. Application Development — summary

Here is a complete view on a low code branch of Now Experience framework — it may give you an idea what knowledge domain areas to explore and how they are connected to each other:

7. Component development — pushing limits of ServiceNow

“Component development” is a part of the Now Experience Framework where you can create with no limits. Components are small parts of your application, so here you are not going to create an application itself, rather you will be creating “building blocks” for your applications:

This area of expertise might be pretty complex because it requires a fundamental knowledge of web development and the Now Experience Framework architecture. However, it is not something ServiceNow developers should be afraid of, since it opens many opportunities to grow in a software/web development industry, and gives developers the ability to build amazing ServiceNow apps like never before.

What’s next?

This is just a quick high-level look at the Now Experience Framework landscape and two different branches developers can explore and pursue:

Each of those tiny blocks can be expanded in dozens of additional articles, tutorials, and labs — that’s what we’re planning to do in the next months.

And no matter what branch you choose to explore and follow — the Now Experience Framework is here and will define the future of ServiceNow development for years ahead.

We’ve just started…