ServiceNow UI Builder

In this video, we’ll walk through what you can expect from the UI Builder section of this course. We’ll briefly introduce key concepts like pages, components, data resources, events, and client state in ServiceNow UI Builder. You’ll get a clear roadmap of how these elements work together to create modern, interactive experiences. This overview will help you understand the structure of the upcoming lessons and what you’ll be building step by step.

This video explains the fundamentals and setup of ServiceNow UI Builder, the tool for creating modern workspace-style interfaces. It covers key concepts like "Experiences," "Now Experiences" (pre-made environments), and "Pages" (the actual screens users see). The UI Builder interface is composed of the Left Panel (page structure/outline), the Stage (visual preview), and the Right Panel (component properties and data connection). It also introduces Page Variants for creating multiple page versions for different users and advises on preparing data tables before starting to build.

Learn how to create a new experience in ServiceNow UI Builder from scratch. This video walks you through the "Create an Experience" dialogue, explaining key fields like name, URL path, actual UI (which defines the experience type, such as workspace appshell), Landing Path, and Roles (to control access). You will also discover how to access and manage these settings by clicking "View experience setting" within the UI Builder. Prepare to build and customize your next ServiceNow experience!

This video explains how to create pages in the UI Builder, including how to use page templates to accelerate the building process. It also covers how to add page variants, which allow you to display different versions of the same page based on the audience or specific conditions you set. Utilizing templates can help you build pages quickly and maintain consistency across your experience. These tools are essential for designing flexible and personalized experiences fast.

Discover how to add and configure essential components in ServiceNow UI Builder. This video demonstrates setting up the Avatar component for user identification, using Stylized Text for clean, formatted text, and configuring the Text Link component for navigation to pages or URLs. Finally, learn how to implement and filter the Record List component to display multiple records, such as active incidents, with control over the number of displayed columns and records per page. Master these foundational components to build dynamic and user-friendly interfaces.

Master adding and configuring essential components in ServiceNow UI Builder. Learn to use the Button component to trigger actions like opening a custom modal displaying an Incident list. Next, discover how to implement the Tabs component to organize content. Finally, explore the Data Visualization component to display active Incident data as a configurable Pie Chart, grouped by category. Build dynamic, organized, and data-rich interfaces with these core UI Builder elements.

This video provides a deep dive into using Modals and Popovers in ServiceNow UI Builder. You will learn what these components are, when and why to use them, and how to configure them with live examples. Learn to create a Modal, a pop-up window that captures user attention for actions like showing forms or warnings, by adding an "alert" to a button. Also, master the Popover, a small floating message box that provides extra details or tooltips without blocking the screen.

Master Data Resources and Data Binding in ServiceNow UI Builder to display dynamic, real-time information. Learn that Data Resources are objects that fetch data from tables, acting as a bridge to your UI components. Discover how Data Binding connects components to a resource, allowing automatic updates. The video demonstrates adding the "Lookup single record" data resource and binding the returned data

Learn advanced data binding in ServiceNow UI Builder using the "Lookup multiple records" data resource. This video demonstrates fetching a list of users based on a condition (e.g., email ending with @gmail.com) and displaying the results dynamically. Discover how to combine the Carousel component with the Repeater to create slides for each record. Finally, master binding data from the Repeater to components like Heading to display information like the user's full name on each slide.

Dive into Client State Parameters in ServiceNow UI Builder—the essential variables for creating dynamic, interactive page experiences. Learn that these parameters behave like global variables, accessible across components and dynamically updated based on events or user interactions. Discover how to create a new client state parameter, define its type (e.g., integer), and set its initial value. Finally, master the concept of binding these parameters to components like text, styles, conditions, and more to build reactive UI interactions without writing script.

This video explores client scripts, one of the most important concepts in ServiceNow UI builder. Client scripts allow you to run custom JavaScript directly on your UI builder page to build dynamic behavior that isn't possible through configuration alone. The video also explains how to debug these scripts effectively, which is crucial since UI builder scripts run in the browser. The console can show the error message, line number, and which script caused the issue, making troubleshooting straightforward.

Master the core concepts of building dynamic experiences in ServiceNow UI Builder: Events, Event Handlers, and Event Mapping. Events are signals that something has happened on the page, such as a button click or component render. Event Handlers define the actions to perform in response to an event, like opening a modal or navigating to a new page. Event Mapping is the process of connecting an event from one component to a handler in another, allowing components to communicate and interact.

Master Declarative Actions in ServiceNow UI Builder, which allow you to define UI behavior like fetching data, navigating pages, or updating records using configurations instead of writing client-side code. Declarative actions make development cleaner, easier to maintain, and less dependent on custom client scripts. Learn how to create a new action, configure its details (such as the label, table, and requirements), and implement a server script to execute backend updates. This powerful feature simplifies UI behavior, making it clean and efficient.

Master the configuration of List Menus in ServiceNow UI Builder to enable dynamic record filtering. This video demonstrates how selecting an option in the list menu automatically filters the records displayed on the right. Learn to set up a new page using the list page template and access the list menu configuration ID field. The lesson guides you through creating new list menu configurations, defining categories, and setting up specific lists with custom conditions and selected display columns.

Learn how to configure forms in ServiceNow UI Builder for your workspace experience. This video shows how to select the standard record template and use the Form Controller in the Data Resource panel to choose the table, view, and set the force view option. Discover how to manage form tabs by selecting the Main Tab component and adding or deleting tabs in the Configuration panel. Additionally, you will learn to configure the right-side tabs using the Tab Sidebar component. These configurations are essential for building clean and functional record pages.

Learn how to link a Data Visualization component (like a bar chart) to a separate list page in ServiceNow UI Builder and automatically pass filters. Discover how to use the visualization clicked event on the chart and the link to destination action to navigate to the list page. Master binding the event payload to a page parameter to carry the filter condition. Finally, see how to configure the Record List component on the destination page to use that page parameter for dynamic filtering, providing users a seamless drill-down experience into the data.

Master role-based experiences and security in ServiceNow UI Builder to ensure the right users see the right content. Learn how visibility is controlled at multiple levels, including the experience-level roles and access control lists (ACLs). Discover how to use page variants and audience targeting to deliver user-specific experiences. Finally, understand how to configure component visibility using scripting and how platform ACLs ensure data security behind the scenes.