UI Builder Overview
In Lesson 2, we delve into the core of ServiceNow's Next Experience UI Framework, with a focus on UI Builder. Understanding UI Builder is crucial for creating modern, web-based user experiences using reusable web components.
What is UI Builder?
The UI Builder is a key component of the Next Experience UI Framework.
UI Builder is ServiceNow’s web user interface page builder for fulfiller experiences.
It uses the ServiceNow JavaScript framework built on web components standards, similar to React.
Configure and customize one of our 20+ OOB workspaces or create your own workspace or starter portal experience with AES
UI Builder enables you to construct user experiences in various contexts, such as:
- Configurable workspaces
- App Engine Studio-generated workspaces
- Portals
- Custom web experiences using Next Experience Components and custom web components
What Can You Do with UI Builder?
Within UI Builder, you have a wide range of capabilities to configure your web experiences, including:
- Creating and configuring pages
- Defining page layouts
- Adding components to pages (with over 150 baseline components available)
- Configuring and styling components, allowing them to communicate and react to each other
- Setting up data resources and using data binding for components to fetch and display data
- Defining event handlers for baseline events
- Creating client state parameters to store page-level data
- Adding client scripts
- Applying theming to enhance the overall look and feel of your experience
What is Service Portal?
Service Portal is ServiceNow’s web user interface portal builder for requester experiences.
It is built on and uses Angular widgets as its tech stack.
Employee Service Center is our current recommended Service Portal.
UI Builder vs. Service Portal
It's important to note that UI Builder is not intended for building or configuring out-of-the-box Service portals like Employee Center.
For these purposes, you should continue to use the Service Portal Designer.
Here's a quick comparison of the two development functionalities:
UI Builder
- Target Audience: Fulfillers
- Portal Capability: Workspaces and small, departmental portals
- Responsive: No
- Pixel Perfect Design: No
- Service Catalog: Very limited support
- ATF Testing: No
- Public Pages: Difficult to set up
Service Portal
- Target Audience: Requestors
- Portal Capability: Enterprise and Customer Portals
- Responsive: Yes
- Pixel Perfect Design: Yes
- Service Catalog: Fully supported
- ATF Testing: Supported
- Public Pages: Yes
Using UI Builder
To access UI Builder, you'll need either the admin or ui_builder_admin role. Once you have the correct role, you can launch UI Builder in one of two main ways:
Navigate to "All > Now Experience Framework > UI Builder" in the Unified Navigation header to open UI Builder in a new browser tab.
Choose to edit an experience associated with a custom application from within App Engine Studio. This action opens the experience within UI Builder.
App Engine Studio is a development tool that can be used to build custom applications. It is a separately licensed product, however, is not required in order to use UI Builder.
Introduction to App Engine Studio: This course provides of overview of App Engine Studio's no-code functionality and walks you through building your first application.
Knowledge Test
Q1. What is UI Builder?
- Service Portal Designer
- Form editor
- Web user interface builder
- Report builder
Q2. True or False. You need to purchase App Engine Studio to be able to use UI Builder.
- True
- False
Next
In Lesson 3, we'll delve into Web Experiences, providing more insights into creating engaging user interfaces using UI Builder.
Lesson 3: Web Experiences
Stay engaged as we explore the world of web experiences and how UI Builder plays a pivotal role in crafting them.