If you miss any content, please leave it as a comment and I will add it to this article.
⚠️ For the similar topic of Next Experience UI, I have written an individual article
| Table of Contents |
My library Knowledge Sources To Go is very popular, but it was intended mainly as a thematically grouped guide to standard sources and was provided by me as a PDF file. For certain topics, however, there is so much content that I can no longer include it in that document, as it cannot continue to grow forever.
For this reason, I have decided to handle such topics in individual community articles like this one instead.
What is the UI Builder?
The UI Builder is a web user interface builder that is part of the Next Experience UI Framework. UI Builder can be used to build pages for configurable workspaces, App Engine Studio generated workspaces and portals, and custom web experiences using Next Experience Components and custom web components.
Within UI Builder, you can do the following to configure your web experience:
- Create and configure pages
- Configure page layouts
- Add components to a page (150+ are available baseline)
- Configure and style components that can communicate and react to each other
- Set up data resources and use data binding to enable components to fetch and display data
- Define event handlers for baseline events
- Create client state parameters to store page-level data
- Add client scripts
- Apply theming to your experience
Entry point to the official product information pages
Entry point to the official product documentation.
Trainings & Courses
This course of 5 modules gives an easy introduction to the subject.
Take a closer look at the fundamentals of UI Builder and how it can be used to create pages, using components, for workspace or custom portal experiences within ServiceNow.
The UI Builder Advanced course is designed to provide developers and implementors with in-depth knowledge and skills for creating custom workspaces using UI Builder. This hands-on course will level up your understanding of UI Builder development by diving into more advanced UI topics including the configuration of complex components, understanding event-driven development, utilizing different types of data resources, implementing declarative actions, and learning about the development tools available for troubleshooting.
UI Builder: Log Event Payload Data
In this course, learners can watch a short video to learn how to log event payload data from UI Builder within your browser's Developer console.
UI Builder: Using NED Tools for Troubleshooting an Experience
Learn how to install and use the Next Experience Developer (NED) Tools Chrome web extension to troubleshoot an experience.
Introduction to Entity View Action Mapper - EVAM
Entity View Action Mapper (EVAM) shows information from different data sources in a card grid view or as a list of information in a list view. Large data sets of search results can be paged through with different views based on filter conditions. EVAM could be that one pane of glass solution you need.
Articles & Blog Posts
2021-02-26 by @Chris Pearson
UI Builder - Component Visibility Logic
We certainly know how to build a record page on a portal by now and we can add a button to our page which calls the proper Transform Data Broker onClick to execute the server-side logic to cancel the ticket according to the requirements. But how do we ensure that the button only appears under the right conditions?
2021-06-01 by @Daniel Draes
How to setup a type-ahead search in UI Builder
On a new UX page we need an input field to search and select a user record, to allow a great user experience we want to utilize a type-ahead search like experience we all know and love from Google and the likes.
2022-05-06 by @Max Selwyn
How To: Dynamic data in UIB Dropdown component
The dropdown component lets you use data binding from a data resource(data broker), however, this resource output is probably not in the correct format which would result in 'blank' results in the dropdown. To fix this, you can write a simple script to create your options and have them display correctly.
2022-07-13 by @Jon G Lind
Using Data from your GraphQL API in UI Builder
By now you've created your first GraphQL API and learned how to craft queries to it. The final step, of course, is to actually use that data. Your API can be used anywhere within the platform, or configured for third party integrations outside of ServiceNow, in this example we will explore how easy it is to render within ServiceNow using UI Builder.
2022-10-24 by @Brad Tilton
All About Data Resources in UI Builder
A data resource [sys_ux_data_broker] in UI Builder mediates data between a component and the ServiceNow server. The data resource brings data from the server to the component, and it brings updated data back to the server based on interactions with the component.
2023-08-03 by Carleen Carter
UI Builder series
2024-01-20 by Dan Covic
How to Build Workspaces from Scratch
If you're looking to build a workspace from scratch, the UI Builder is the way to go. In this short article, I provide an introduction on how to build workspaces from scratch with the help of the UI Builder.
2024-08-22 by @Reece Poulsen
Most of the time, you can use UI Builder without worrying about the tables working behind the scenes. However, there may be times when you need to dive into the backend to fix something. If you find yourself in such a situation, you might notice there's not much documentation to help you. Here is a list of the tables I have encountered, each with a short description of what the table does and a screenshot of the backend form.
2024-09-03 by @Reece Poulsen
ServiceNow’s UI Builder is a powerful tool that lets developers and designers create, customize, and manage modern, responsive interfaces within the Now Platform. It offers an intuitive and visual way to build user interfaces (UIs) using reusable, pre-built components and easy drag-and-drop functionality. UI Builder is inspired by modern web development, so web developers will find it quite familiar!
2024-12-03 by @Reece Poulsen
How to Create a Custom Data Resource
In this blog post, we will explore everything I have learned so far about data resources, including how to create your own.
2025-01-21 by @michaelburney
UI Builder Essentials: Six Fundamental Features You Need to Know
In this article, you’ll learn each core building block of UI Builder: Pages, Page Variants, Components, Data Resources, Events, and Scopes, plus details about how they interact.
2025-01-24 by @sophiasemga
UI Builder Essentials: Navigating UI Builder - A Step-by-Step Tutorial
In this tutorial, we will be diving into UI Builder. We'll be taking a guided tour of UI Builder by learning how to access it, and take a look at the different parts that make up UI Builder. By the end of this Introduction, you will have a general understanding of this powerful tool and be on your way to knowing how to use it to create and improve dynamic user experiences.
2025-01-30 by @michaelburney
UI Builder Essentials: Dynamically Binding the List Component With a Data Visualization
In this tutorial, you will create a dynamically filtered list that gets it's content from a Data Visualization component.
2025-02-04 by @michaelburney
UI Builder Essentials: Implementing Popovers
In this tutorial, you’ll learn about Popovers and how to implement them in UI Builder!
2025-02-07 by @sophiasemga
UI Builder Essentials: Updating Component's Data with a Button
In this tutorial, you’ll configure a UI Builder page to include a button component that dynamically updates the value of the “Description” field in a form component when clicked.
2025-02-12 by @michaelburney
UI Builder Essentials: Simple Counter Application
In this tutorial, you will create a simple counter application in UI Builder. The final app will have a button that, when clicked, increases the number displayed on the page by 1.
2025-02-14 by @sophiasemga
UI Builder Essentials: Interactive List and Form Configuration
In this tutorial, you'll configure a UI Builder page to create a side-by-side List and Form view. The goal is to dynamically update the form components data based on the selected record from the list.
2025-02-21 by @sophiasemga
UI Builder Essentials: Modals and Modeless Dialogs
In this tutorial, we’ll dive into the world of Modals and Modeless dialogs in UI Builder. You’ll discover what they are, how to configure them, and the key differences that set them apart. To bring these concepts to life, we’ll walk through two practical use cases, giving you hands-on experience with each type of overlay and a deeper understanding of how to leverage them effectively within your experience.
2025-03-04 by @John McCormick1
UI Builder Essentials: Troubleshooting Guide
When working on experiences in the Next framework, it can be challenging to identify the root cause of an issue. The framework is extremely powerful, but with that power comes complexity and nuance when trying to troubleshoot issues. This article aims to provide the tips and tricks that will help you more quickly identify where the issues might be.
2025-03-06 by @sophiasemga
UI Builder Essentials: Link to Destination Opens a List Page That Is Filtered by Clicking a Data Viz
In this tutorial, you will create a dynamically filtered list - a Pie Data Visualization that redirects you to a filtered list.
2025-03-28 by @sophiasemga
UI Builder Essentials: How to Create a Custom Tab
In this guide, you'll create a custom tab in Customer Support Workspace to display related Problems and Changes for an incident's caller. This helps you quickly view and navigate to relevant records without leaving the incident page.
2025-04-04 by @sophiasemga
UI Builder Essentials: Record Page Configuration - Set Icon for Contextual Sidebar
In this guide, we walk through the process of adding a custom icon to an existing record page sidebar in UI Builder. This icon, called Related Records, will display a filtered list of incidents associated with the caller of the current record.
2025-04-18 by @michaelburney
UI Builder Essentials: Next Experience Developer Tools Overview
Next Experience Developer Tools is a Google Chrome browser extension provided by ServiceNow that adds specialized debugging and profiling capabilities for the Next Experience UI framework (ServiceNow’s modern UI).
2025-04-24 by @michaelburney
UI Builder Essentials: Next Experience Developer Tools Inspector Tab
The Next Experience Inspector is a Chrome DevTools tab available from ServiceNow's Next Experience Developer Tools Chrome extension. It allows developers to easily inspect and debug Next Experience application pages in real time, helping you understand exactly how your UI components function behind the scenes. By displaying important details and visual health indicators all in one place, the Inspector simplifies identifying configuration issues in order to help debug stubborn application issues.
2025-05-01 by @michaelburney
UI Builder Essentials: Next Experience Developer Tools Profiler Tab
The Next Experience Inspector is a Chrome DevTools tab available from ServiceNow's Next Experience Developer Tools Chrome extension. It allows developers to easily inspect and debug Next Experience application pages in real time, helping you understand exactly how your UI components function behind the scenes.
2025-06-05 by @sophiasemga
UI Builder Essentials: Adding Declarative Actions - List Action Decorator
n this tutorial, you will create a custom Declarative Action in UI Builder that adds a 'Check SLA' button to the Customer Support incident list page within the Customer Support Workspace. When clicked, this action will open a new tab displaying the associated Task SLA records of the selected Incident.
2025-06-05 by @Martin Rudack
Enhancements of Screen Conditions in UI Builder
A powerful new feature in the Yokohama release allows you to not only use 𝐩𝐚𝐠𝐞 𝐩𝐚𝐫𝐚𝐦𝐞𝐭𝐞𝐫𝐬 in your screen conditions but also leverage a 𝐬𝐞𝐫𝐯𝐞𝐫-𝐬𝐢𝐝𝐞 𝐬𝐜𝐫𝐢𝐩𝐭 to provide data that influences which page variant is shown. This gives you far more flexibility and control, especially in complex scenarios.
Videos & Podcasts
2021-03-13 by ServiceNow Ninjas
In this short video series, we are going to create a new Portal using ServiceNow latest UI Builder
2021-03-25 by Matthew Herron
Building a simple master detail app on UI Builder
A simple walkthrough of building the most fundamental UI application: The master-detail app. Users need to browse a list of items and when they click on an item, they link to a form of that record.
2021-06-08 by ServiceNow Dev Program
Build a Notes App in UI Builder
On this episode, join Brad and Chuck as they build a front-end for a Notes app using out-of-the-box functionality in UI Builder. They'll attempt to replicate the functionality from the Creating Custom Widgets Service Portal training on the developer site.
2021-08-24 by ServiceNow Dev Program
On this episode, we will work on a recipe app in UI Builder, exploring some of the new Rome release features in UIB.
2021-08-24 by ServiceNow Dev Program
On this episode, join Brad, Chuck, and Earl as they explore viewports in UI Builder in the Rome release.
2021-12-01 by ServiceNow Community
Building Custom Experiences with UI Builder
Learn how to use UI Builder to create a great experience for your custom apps. Brad Tilton, Sr. Developer Advocate with ServiceNow, shows you how to deliver amazing experiences using ServiceNow's intuitive WYSIWYG builder.
2022-01-10 by JZ
Low-Code to create Web app and Workspace (UI Action, Data Resource and Event Handling)
Low-Code approach to create ServiceNow Web App/Workspace:
1) Create web page
2) Create client state parameters
3) Create Client Script
4) Configure Data Resource
5) Config a client state parameter for each web component
6) Config an event to link each web component with each state parameter
2022-02-11 by ServiceNow Dev Program
Using the new repeater component in UI Builder
Join the developer program team as we use the new repeater component, introduced in the San Diego release, to build an experience.
2022-02-18 by ServiceNow Dev Program
Join the developer advocates as we build an experience using the new UI Builder enhancements in the San Diego release.
2022-14-04 by ServiceNow Dev Program
Workspace Builder & Experience Templates
2022-08-19 by ServiceNow Community
In this Next Experience Academy session we'll cover an overview of what UI Builder is in ServiceNow, it's current use cases as of San Diego and Tokyo, as well as some new features for UI Builder that are coming as of the Tokyo release.
2022-08-19 by ServiceNow Dev Program
In this series we will focus on exploring the Quebec Release version of UI Builder by looking at different pieces of the tool and putting those pieces together to solve some problems. We'll look at and explore concepts like pages and variants, data resources, client state parameters, client scripts, EVAM, components, data binding, and more.
2022-11-17 by GlideFast Consulting
In this ServiceNow Tutorial, Technical Consultant Travis Castleman gives a demo on UI Builder in ServiceNow.
2023-01-28 by ServiceNow with Jesse
How to make an external REST API call in UI Builder
Learn how to make an API call to an external REST API using ServiceNow's UI Builder within the Now Experience framework. This allows you to pull in external data into Configurable Workspaces.
2023-02-17 by ServiceNow Dev Program
UI Builder and Next Experience in Utah
UI Builder, Next Experience, and more.
2023 by ServiceNow Dev Program
Join Next Experience outbound product managers Brad Tilton and Maria Gabriela Ochoa Waechter Perez every other Thursday as they build solutions and solve problems using UI Builder, ServiceNow's web user interface builder for creating and editing pages in workspace experiences.
2023 by TechnoMonk
Series of videos
2023-07-31 by ServiceNow Community
Workspace and UI Builder Tips and Tricks
Join us for a quick lesson full of tips and tricks for working with UI Builder and Workspaces! There'll be plenty of awesome information that you've been looking for like how to add a playbook tab to a record page, adding user experience analytics to UIB, and more!
2023-09-26 by ServiceNow Community
What's new in UI Builder for Vancouver
It's a great session with one of our best experts to discover the new hot UIB/Next Experience features in Vancouver.
2023-10-23 by GlideFast Consuting
ServiceNow UI Builder | Vancouver New Features
New feature alert! Senior Technical Consultant Saloni Suthar walks us through new features in the ServiceNow UI Builder for the ServiceNow Vancouver Release.
2023-10-24 by ServiceNow Community
Next Experience Academy: What's new in Vancouver: UI Builder edition
Join us for a first look at what's coming in Vancouver for UI Builder!
2024-01-07 by Teiva Systems
Webinar UI Builder: Creating User Friendly ServiceNow Pages
Learn how to building modern Portals/Workspaces using UI Builder from scratch based on Figma templates. This is the recording of a webinar about valuable insights and knowledge of how to using the UI Builder tool within the ServiceNow platform incl. a step by step explanation.
2024-03-26 by ServiceNow Dev Program
2024-03-29 by ServiceNow Dev Program
Join us for an engaging session on Live Coding Happy Hour as we navigate the thrilling world of UI Builder in ServiceNow. This episode is a deep dive into developing a sophisticated notes application, showcasing the power and versatility of UI Builder. Discover how to:
• Utilize the Condition Builder component to add dynamic, advanced filtering to your applications.
• Implement visibility toggles and explore the event-driven development paradigm within UI Builder.
• Leverage client state parameters for managing application state and data flow.
• Embed and manipulate encoded queries for nuanced data retrieval and display.
2024-04-04 by ServiceNow Community
What's New in Washington D.C. for UI Builder and Workspaces
Join us for a first look at what's coming in Vancouver for UI Builder and Workspaces!
2024-11-21 by ServiceNow Dev Program
UI Builder 101 w/Chris Johnson
Dive into the world of ServiceNow's modern web UI framework, Next Experience, and UI Builder through this comprehensive exploration of the framework's architecture, capabilities, and UI development tools. Chris Johnson, Director of Design, starts with the basics and builds to the advanced capabilities. This video covers everything you need to know to understand the framework and create powerful web experiences on ServiceNow like Workspaces or Custom UI.
2025-08-27 by ServiceNow Community
Unlocking the Power of Controller Building in UI Builder
This Platform Academy session brought an exciting deep dive into one of the most powerful tools for building modern, scalable experiences on ServiceNow: controller building in UI Builder. Led by Maria Gabriela Ochoa Perez Waechter, the session walked attendees through why controllers matter, how they simplify development, and the many ways they improve collaboration across teams.
2025-08-27 by ServiceNow Community
This is your chance to get expert answers to your Next Experience and UI Builder questions. Whether you're refining your workspace or just getting started, this session is for you.
Troubleshooting
Known Error Portal
Pre-configured filter for the respective topic. Remove the query string or modify the filters on the left side if you want to narrow down the search results in a different way.
Selected Articles
