Overview
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.
Family Release: Xanadu
UI Builder Release: 26.2.74
Roles Required: Admin
Authored by: @sophiasemga
What is UI Builder?
UI Builder is a web user interface that’s built on the Next Experience UI Framework (A ServiceNow JavaScript framework built on web component standards, similar to React). It allows users to build pages for configurable workspaces and configure or create custom web fulfiller experiences and user-friendly applications.
With UI Builder, users can:
• Modify or extend configurable workspaces.
• Configure experiences with components.
• Create custom experiences with page layout options, such as Flexbox or Grid.
To get started with UI Builder:
1. Log in to your ServiceNow instance.
2. Once logged in, search for UI Builder in the ‘All’ menu under Now Experience Framework.
You are now on the UI Builder home page!
Experiences and Workspaces
Once the UI Builder interface loads in a new tab, you will be introduced to the Home tab page.
This page contains:
1. A section for recently opened Experiences.
2. A section to create a new Experience, Page Collection, or other Experience related items.
3. A section with videos on how to get started with UI Builder.
At the upper-right corner of the UI Builder page, you’ll see a Create button. Clicking this button opens two drop-down options to create an experience, page collection, or other experience related items.
Next, click on the Experiences tab at the very top left next to the Home and Recents tab page. Browse through the workspace experiences alphabetically and locate, then click, on the Service Operations Workspace (SOW) OR search for the workspace in the '
Search experiences' bar.
Experience Editor
You should now be in the Experience Editor view of the Service Operations Workspace in UI Builder. Let's take a moment to familiarize ourselves with the Experience Editor and look at the different elements on the page.
On the top-left corner, there is a blue and green icon that, when clicked, takes you back to the UI Builder home page.
Next to that icon is the title of the current experience, Service Operations Workspace. Clicking on this title opens the experience overview, showing the pages and variants of the Service Operations Workspace.
Next to our experience title, we also have the Experience dropdown menu, which displays the pages and variants within the current workspace experience, it's another way to quickly navigate to editing a page. Within this drop-down menu exists an
'All Experiences' link that takes you back to the overview of all the experiences in UI Builder, it also includes a Search bar to search for pages and below our search bar is an 'Experience' link that redirects us back to the experience editor of our current workspace experience.
In the top-right corner, the first dropdown is the Application Scope Selector, this is where we select the application scope you are going to be working on.
The last two links are good for you to click on and navigate whenever you have the time. What's New displays newly released UI Builder features and the Help link contains links to documentation.
Located at the bottom of the top-right corner section is the View Experience Settings link, which allows you to quickly configure the workspace settings. (e.g, title, URL path, roles, and theme)
Below the Service Operations Workspace (SOW) heading, you'll find a menu detailing specific aspects of the experience we are currently in, you see the
URL path, Application Scope, App Shell, and the Roles required to view the experience.
Pages and Variants
Under the Pages and Variants heading, you'll find a long list of grouped items. But what are pages and variants? A page is content tied to a URL and defines what content displays at that URL. It consists of two key elements: layouts and components.
Each gray heading represents a page, while the items listed beneath it are the variants of that page. The first variant you create becomes the default variant.
Variants can be used to serve similar content in pages to different audiences, for example a dashboard that a manager might be interested in may not fit the needs of a help desk agent. Instead of making another page entirely, using variants and audiences can help you serve the appropriate content to the right audience. Typically, most pages would have a default variant, and any other variants will be listed below it. Notice that the variants of each page share a URL path, but the Order column determines which variant displays by default (the lowest number is the variant that shows up by default).
The next two columns Audiences and Conditions determine what shows up for different users and roles. Both specify who can see the page, based on the role/audience, and conditions can be added to determine when a page should be visible.
Click on the information icon by Audience and Conditions to learn more.
At the end of the columns, you have quick access options to open variants in the editor or view their settings.
Note: You cannot edit the Order, Audience, or Conditions from the list, but you can from the settings page.
Page Variant Editor
At the top of the Pages and Variants list, click on the Service Desk Landing Page SNC variant which is marked by the yellow "Landing Page" tag.
Upon clicking, you should now be in the page variant editor view. Let's take a moment to familiarize ourselves with this interface.
Below the menus we've already covered you may see a blue notification bar indicating that you are in a different application scope or that the page variant is read only. It's always important to keep in mind what scope you are working in when making changes to workspaces. We suggest you try to follow what scopes are used by the out of the box (OOB) page variants, but what's most important is communication among your development team to ensure that all your development is done in a consistent way, using the same scopes.
While we are using the Service Operations Workspace for purposes of teaching you in this article, please note that a lot of configuration for this workspace is actually handled outside of UI Builder. The SOW team has some awesome learning content you should check out to learn more about how to configure this workspace, they released a series of Lunch and Learn videos along with a bootcamp on NowLearning to get you started.
Directly below the blue pop-up notification, you will find the hamburger menu (
three horizontal lines) in the top-left corner. This menu provides quick access to quick links to Duplicate a variant and Developer options which offers tools like Clear UI Builder Cache, which helps refresh cached data within the editor.If you were on a page that had URL parameters, you would be able to input test data for them next to this menu bar.
In the stage panel, there is a setting to change the width of the preview on the Stage, as well as some useful tools in the top-right corner. You have the Undo/Redo button which allows you to reverse or repeat an action, a Preview button which lets you see how the page will appear to end users, and lastly, a Save button which ensures your changes to the page variant are properly stored.
Note: ALWAYS remember to click Save after making any modifications. This prevents you from losing progress when configuring a page variant or adding components.
The UI Builder editor view consist of three main sections, which we will now cover.
Component Tree
The Component Tree is divided into two sections:
- Overlays Section: This is at the top of the content tree and contains modals, popovers, and modeless dialogues that appear on the page. These elements often require user interaction before they close.
- Body Section: Includes everything you see on a page variant. It consists of layouts and components within layouts, amongst other things.
Layouts control the structure of a page and govern how pages are designed and organized. It is usually the first step in configuring a page. UI Builder offers Basic pre-configured column layouts, along with Flexbox and CSS Grid layouts.
Components are the elements of a page. Once a layout is in place, components can be added and customized using the Component Configuration panel.
If you notice in the Body section, there are a few components with a crossed-out eye icon next to it, it means the component is hidden due to a condition. To maintain clarity, it is recommended to rename containers and components as you develop your pages for better organization.
Data and Scripts
This section displays the data resources, client state parameters, and client scripts that interact with components on the page. Clicking any of these items opens a modeless dialog box, allowing you to configure them.
Data Resources: This feature is used to fetch information from tables to power your components and experiences. Utilizing data resources allows your components to be reusable and dynamic.
Client State Parameters: These act as page-specific variables, storing data to use within components. Once defined, they can be updated dynamically using events and client scripts. Think of these as variables that store information to be used later.
Client Scripts: UI Builder allows you to define client scripts and execute them as a result of a triggered event.
The Stage
Before we touch on one of the most important parts of UI Builder, lets quickly talk about the Stage which is located at the center of the Page Editor. It contains a WYSIWYG preview of the page variant, and it's where all our configured components will be displayed, reflecting what it might look like when browsed by an end user. If test data is applied via URL parameters, the stage panel might change accordingly.
Configuration Panel
The Configuration panel is where you'll find all the configuration options for components. As you begin to work on getting more familiar with UI Builder, you'll find yourself coming here more often to make modifications to the components on your page.
This panel contains three tabs:
Configure: This provides the ability to edit/modify component properties and it is where all the configuration options for pages and components live.
Style: Allows you to apply CSS styles to components and pages.
Events: Allows you to set up event handlers (which define actions when an event is triggered) and event mappings (links events to event handlers).
Preview + Open URL Path
Located next to the Save button, the Preview button features a drop-down menu with an Open URL Path option. Clicking Preview opens a modal displaying a rendered preview of the current variant you are editing. This allows you to view the variant without needing to impersonate a user, bypassing audience and condition-based access restrictions.
Alternatively, selecting Open URL Path from the drop-down will load the page exactly as it would appear to the currently logged-in user, considering audiences, conditions, and variant order.
This feature ensures you can accurately test and validate the user experience without additional steps.
Page Variant Settings
To access the Page Variant settings, navigate to the setting menu at the top center of the stage panel.
On the top left, you'll see a list of all page variants for the particular page, displayed in order of priority. This order determines which variants users see, depending on any audiences and conditions applied. Variants are generally displayed from top to bottom based on these conditions.
If a user cannot see a specific variant, ensure that all audience and conditions requirements are met, and the variants they have should access to are at the top of the list relative to others they might have access to.
At the center of the settings menu, you'll see the application scope in which the page variant editor is currently operating and options to duplicate the page, edit the name, and modify audience/roles if you are in the correct application scope.
Conclusion
Congratulations! You now have great knowledge about UI Builder. With these steps, you are now ready to explore and configure dynamic user experiences! Don't forget to share this article with your colleagues and friends who might benefit from mastering UI Builder.
Stay tuned for more tutorials and tips to help you create dynamic and engaging user interfaces!
Check out the Next Experience Center of Excellence for more resources
