Foundations · Lesson 1.1

What is UI Builder in ServiceNow?

Beginner
15 min read
Tested on Australia
Updated 18 Oct 2026

UI Builder
Next Experience
Workspaces

Why UI Builder exists

Before UI Builder, building a custom screen in ServiceNow meant writing a lot of code. In the classic interface, you wrote a UI PageA classic custom page built with Jelly, HTML and scripts, the way custom screens were made before Next Experience.Learn more using Jelly, HTML and scripts. For self-service websites, you built Service PortalServiceNow's older framework for self-service websites, built from AngularJS widgets. Employee Center is built on it.Learn more widgets with AngularJS. Both work, and plenty of instances still use them, but every screen was hand-made. Each developer built things a little differently, screens often looked different from the rest of the platform, and every change needed a developer.

When ServiceNow introduced Next Experience, it also needed a better way to build screens for it. UI Builder is that way. You start from a library of tested building blocks that already look and behave like the rest of ServiceNow, arrange them on a page, and configure them through settings rather than code. You still write small scripts when you need custom logic, but for most screens you configure far more than you code.

The result is that pages are quicker to build, look consistent with the rest of the platform, and are much easier for the next developer to understand and change.

Where you will see UI Builder pages

Every page you see in a Next Experience WorkspaceAn experience made for people who work through records all day, like support agents, with lists, records and tools on one screen.Learn more is built with UI Builder. That includes the workspaces ServiceNow ships, such as Service Operations Workspace for IT support agents, and the workspaces for HR and customer service teams. The home page, the list pages and the record page you open to work on an IncidentA record describing something that is broken or not working for a user, like a laptop that will not connect to Wi-Fi.Learn more are all UI Builder pages.

You can spot them by their address. Next Experience apps open at URLs that start with /now/, for example /now/sow/home for Service Operations Workspace. Each of these apps is called an ExperienceA complete app built for Next Experience, such as a workspace. It is made up of pages and opens at its own URL.Learn more , and UI Builder is the tool used to build and change them. Companies also use UI Builder to build their own custom experiences, such as a workspace for an internal team.

UI Builder, Service Portal and the classic UI

New developers often mix up these three, because all of them are about “screens”. The easiest way to tell them apart is by what they build and how.

	Classic UI	Service Portal	UI Builder
What it builds	Classic forms, lists and custom UI Pages	Self-service websites, such as Employee Center	Next Experience pages, such as workspaces
How you build	Form Layout, plus Jelly and scripts for custom pages	Writing widgets with AngularJS, HTML and CSS	Dragging components and configuring them
Typical user	Admins and agents in the platform UI	Employees and customers asking for help	Agents and teams working in a workspace

All three still exist side by side, and a real project often touches more than one. The question to ask is simple: where does this screen live? If it is inside a Next Experience workspace or another /now/ experience, the answer is UI Builder.

The six pieces of every UI Builder page

Every UI Builder page, from the simplest to the most complex, is made from the same six pieces. You will learn each one properly later in this course. For now, the goal is to know their names and how they fit together.

Piece	What it is	In the office example
ExperienceA complete app built for Next Experience, such as a workspace. It is made up of pages and opens at its own URL.Learn more	The whole app, with its own URL	The office building
Page (UI Builder)One screen inside an experience, such as a home page or a record page, with its own URL.Learn more	One screen inside the experience	One room
VariantOne version of a UI Builder page. A page can have several variants, and each user sees the one meant for them.Learn more	One version of a page, shown to a chosen AudienceA group of users, usually defined by their roles, used to decide which variant of a page each person sees.Learn more	The same room set up differently for different teams
ComponentA ready-made building block you place on a UI Builder page, such as a button, a list, a card or a set of tabs.Learn more	A building block placed on the page	A desk, a chair, a whiteboard
Data resourceSomething you add to a UI Builder page to fetch data, such as a list of records, so components can show it.Learn more	Fetches the data the components show	The supply room that keeps the shelves stocked
Event (UI Builder)A signal a component sends when something happens on the page, such as a button being clicked, so the page can react.Learn more	A signal that something happened, so the page can react	Someone pressing the meeting-room call button

Press Play below to watch one small page being built, one piece at a time.

InteractiveWatch a UI Builder page come together

Step 1 of 6 · Experience
Start with an experience
Your IT team wants its own workspace. In UI Builder, that whole app is an experience. It gets a name and a URL path, and everything else lives inside it.
Experience
IT Team Workspace (/now/it-team/)
Page
(none yet)
Shown to
(nobody yet)
Components
(none yet)
Data
(none yet)
When a row is clicked
(nothing)
Step 2 of 6 · Page
Add a page
An experience is made of pages, just like a website. You add a page called "My incidents", where each agent will see the incidents assigned to them. It gets its own URL inside the experience.
Experience
IT Team Workspace (/now/it-team/)
Page
My incidents (/now/it-team/my-incidents)
Shown to
(nobody yet)
Components
(none yet)
Data
(none yet)
When a row is clicked
(nothing)
Step 3 of 6 · Variant
Create a variant for agents
A page can have more than one version, called a variant. You create one for agents and set its audience to users with the itil role. Later, you could add a second variant for managers, with charts instead of a plain list.
Experience
IT Team Workspace (/now/it-team/)
Page
My incidents (/now/it-team/my-incidents)
Shown to
Agents (users with the itil role)
Components
(none yet)
Data
(none yet)
When a row is clicked
(nothing)
Step 4 of 6 · Components
Drag components onto the page
Now you design the screen. From the component list, you add a Heading and a Record List to the page and arrange them. No HTML or CSS is needed: each component has properties you fill in, like the heading text.
Experience
IT Team Workspace (/now/it-team/)
Page
My incidents (/now/it-team/my-incidents)
Shown to
Agents (users with the itil role)
Components
Heading, Record List
Data
(none yet)
When a row is clicked
(nothing)
Step 5 of 6 · Data
Connect the data
The list is empty until it knows what to show. A Record List comes with a List Controller, which fetches its records. You set the controller to the Incident table, with a filter for active incidents assigned to the current user.
Experience
IT Team Workspace (/now/it-team/)
Page
My incidents (/now/it-team/my-incidents)
Shown to
Agents (users with the itil role)
Components
Heading, Record List
Data
Active incidents assigned to me
When a row is clicked
(nothing)
Step 6 of 6 · Events
Make it react with events
Finally, the page should do something when an agent clicks an incident. The list sends an event when a row is clicked, and you attach an event handler that opens that incident's record page. The page is now complete and working.
Experience
IT Team Workspace (/now/it-team/)
Page
My incidents (/now/it-team/my-incidents)
Shown to
Agents (users with the itil role)
Components
Heading, Record List
Data
Active incidents assigned to me
When a row is clicked
Open the incident record page

Notice the order. The experience and page give the screen a home. The variant decides who sees it. Components decide what it looks like. Data fills it with real records, and events make it respond. Almost every UI Builder task you will ever do is a change to one of these six pieces.

Open UI Builder in your instance

You do not need to build anything yet. Just take a first look around, so the tool feels familiar before the next lessons.

Log in to your PDI (Personal Developer Instance)A free ServiceNow instance you get from developer.servicenow.com to practise on safely.Learn more .
Click All and type UI Builder into the filter.
Click UI Builder (it sits under Now Experience Framework). UI Builder opens on its own home screen.
Find the list of experiences. These are the apps UI Builder can edit on your instance.
Open any experience and look at its list of pages. Click a page to see its variants.

Do not change anything in a ServiceNow-provided experience yet. In the next lessons, you will learn how to make your own copies safely.

Practice: which tool would you use?

PracticeUI Builder, Service Portal or classic UI?

Read each task and pick the tool you would open for it. On a computer you can also drag a task onto a tool.

Add a new tab showing related problems to the incident record page in Service Operations Workspace.
Answer: UI Builder. Service Operations Workspace is a Next Experience workspace, and every page in it, including the record page, is built and changed in UI Builder.
Change how a widget looks on the Employee Center home page.
Answer: Service Portal. Employee Center is built on Service Portal, so its pages are made of Service Portal widgets, not UI Builder components.
Add a new field to the incident form that agents use in the classic platform UI.
Answer: Classic UI. Classic forms are arranged with Form Layout or Form Designer. UI Builder does not control classic forms.
Build a landing page with charts for a brand-new custom workspace.
Answer: UI Builder. New workspaces and their pages are built in UI Builder, using components such as charts and data resources to feed them.
Fix a bug in an old custom UI Page written in Jelly.
Answer: Classic UI. UI Pages are classic pages built with Jelly and HTML. You edit them in the UI Pages module, not in UI Builder.
Show managers a different workspace home page from the one agents see.
Answer: UI Builder. This is exactly what variants and audiences are for: one page, two variants, each shown to a different group of users.
Add a new AngularJS widget to a custom self-service portal.
Answer: Service Portal. AngularJS widgets are the building blocks of Service Portal, so this work happens in Service Portal, for example in the Widget Editor.
Add a small button next to the Caller field on the classic incident form.
Answer: Classic UI. A button beside a field on a classic form is usually a UI Macro, which belongs to the classic UI, not to UI Builder.

What’s next

You now know what UI Builder is, why it exists, how it differs from Service Portal and the classic UI, and the six pieces every page is built from. In the next lesson, Next Experience, experiences and app shells, you will look more closely at the first piece: what an experience really is, and how an app shell gives every page in it the same header and menu.

Quick check

Your manager asks you to add a new tab to the incident record page in Service Operations Workspace. Which tool do you open?

Show answer

UI Builder

Service Operations Workspace is a Next Experience workspace, so its record page is a UI Builder page. You would open it in UI Builder, duplicate the variant rather than editing ServiceNow’s own version, and add the tab to your copy.

Was this lesson helpful?

Spotted a mistake, or a step that looks different in your instance?