UI Builder 101

These are my notes from this video.

The focus on that video is web experiences.

Web experience types

ServiceNow ships three types of web experiences:

1. Core / traditional UI
2. Portal UI (i.e., ServiceNow Support Portal)
3. Next Experience UI Framework
• The ServiceNow web framework for modern application development.
• Workspaces, admin interfaces and many other tools are buillt with the Next Exprience UI Framework

Web components

Javascript API in all modern browsers allowing you to create reusable custom elements that are encapsulated from the rest of the page code.

Understanding web components

• Web components are encapsulated in a Shadow DOM which separates them from the rest of the page.
• Web components use custom HTML elements that are unique for a component. Example: <now-button>
• Link to all SN web components:
• https://horizon.servicenow.com/workspace/components

Angular JS Widgets vs Web Components

The most important difference between widgets and components is that SN doesn't expect you to clone a component and they don't allow you to do so.

Components are reusable in many different contexts.

Component APIs

ServiceNow components maintain an API contract and are backwards compatible when they are updated and improved.

ServiceNow components are

• API backwards compatible
• WCAG compliant for accessibility
• International and translation aware
• Themed

Metadata

Builders or Designers

Tools that simplify the creation of complex metadata. It's metadata all the way!

Examples of components that are build by metadata:

• Form designer
• Mobile studio
• Process automation designer
• UI Builder
• Etc.

Experiences and Macroponent

Experience

A part or workflow of an application. Workspaces or Portals are examples of an experience, but the framework can build many types.

For example, UI Builder is built on top of the Next Experience UI Framework.

Experiences live under this table: sys_ux_page_registry

Structure of an experience URL: 

App Shell

Every experience has an App Shell, which is the common UI elements that wrap the pages (App Chrome) and manage app behavior and capabilities.

Unified Navigation

Improved navigation UI that brings together Core UI, Workspaces, Search, Notifications, Now Assist, and other features.

Parent App Shell

A Parent App Shell wraps multiple experiences to provide a consistent user experience. Unified Navigation is an example of a Parent App Shell.

Macroponent

Highly flexible general purpose UI metadata record used for page omposition, components, controllers, & many other parts of the framework.

Macroponent live under this table: sys_ux_macroponent

Relay events

Relay events pass events to their parent and are often used to pass events to the App Shell to open modals, dialogs, and trigger navigation.

Data resources

Data resources bring data onto the page. They have configuration and events like components, but have no UI and instead output data.

Client scripts table: sys_ux_client_script

UI Builder

User interface (UI) authoring, configuring, and management tool for experiences that are built with our modern web framework.

Understanding Pages

• Pages contain one or more page variants
• A page has a name and URL path
• Pages can have required or optional parameters. These parameters are added to the URL

Page variants

Page variants use criteria to determine which is shown to a user. This criteria can be an audience, script, or the required parameters for the page.

Required parameters

All required parameters are required by the page in order to load.

{{ table }} / {{ sysld }}

Optional parameters

Parameters that are not required to load the page.

/params/

Theme Builder

Change colors, typography, and other visual styles for components, unified navigation, mobile, and core UI with Theme Builder.

Data and Data Resources

Understanding Data Resources

• Reusable objects similar to components with configuration and events.
• Query instance data via Glide or GraphQL
• They can transform data into another format or shape.
• They can read and write data.

Controllers

Controllers simplify pages by moving data resources, client state parameters, and scripts into an encapsulated container with an output API.

Data Binding

OUR COMPONENTS CAN TAKE DATA FROM ANYWHERE

Upgrades, Presets, & Controllers

COMPONENTS AND UPGRADABILITY

• Components are upgraded automatically and you're always using the latest version.
• Many components are a part of the platform family releases, but they can also be included in plugins.
• ServiceNow components have an API contract to maintain backwards compatibility.
• Custom components update when changed, so be mindful of your component API.

Controllers

Controllers encapsulate Data Resources, Client Scripts, and Client State to enable better page upgradability and simplicity.

They work closely with presets.

Presets

Presets encapsulate component configuration in any upgrade-safe way. They can automatically configure components and connect to Controllers.

PS. To practice with UI Builder check out these video series on YouTube.

That's a wrap!