Help
Join the Community
-
Documentation
Find detailed info about ServiceNow products, apps, features, and releases.
-
Impact
Drive a faster ROI and amplify your expertise with ServiceNow Impact.
-
Partner
Grow your business with promotions, news, and marketing tools for partners.
-
Store
Download certified apps and integrations that complement ServiceNow.
on - edited on by
MGOPW
This guide will walk you through the steps to get up and running with the new UI Builder (UIB) released in Quebec. The article you're viewing contains some foundational content and then serves as your table of contents for the other UIB topics (the hyperlinks below take you to separate Community articles or sections therein). This content will be updated and expanded so that you can use it as your one-stop-shop for becoming proficient with UIB. You can find a collection of related UIB resources in the Next Experience Center of Excellence.
1 - Prerequisites and Terminology |
Overview
First, these brief introduction videos will provide a high-level overview of the core features and functionality UI Builder; these will you get warmed up for what this guide will delve into:
- Quick Start – highlights seven essential capabilities performed in UI Builder
- Quick Tour – an overview of the labels used for the core elements of the UI Builder
Prerequisites
Before you can put this guide to use, there a just a couple of essentials to have in place:
- You must be using the Quebec or newer release of the Now Platform (this guide doesn't apply to versions of the UI Builder that was available in earlier releases)
- You must have the ui_builder_admin role granted to you
Terminology
| Audience | A predefined set of criteria that the runtime can evaluate against to determine if a variant should/can be shown to a user requesting a page. Target portal content and lifecycle event activities to specified audiences with audience records. |
| Body | Refers to the content section of a page; shows the component path hierarchy. |
| Event | The output of a component as it tries to communicate with the containers it is loaded into that something happened; often this is a user interacting with it like clicking a button, or a lifecycle event like when the component is loaded. In UXF/Seismic, properties go into components and events go out. |
| Event Binding | A way to bind data elements together within UIB, for example the output of a data resource could be bound to properties passed into a component; so that if a page variable changes, or user changes; data collections depending on these changes can get passed into the components. |
| Event Handler | A programmed handler for an event coming from a component or other source. |
| Layout | Refers to the composition of a page; a layout features a collection of slots that a user can place components inside; a user can use a container component to define another layout within a slot. |
| Macroponent | Term used in the platform, not within UIB. A reusable UIB object that contains layout, composition, data resources and event information, useful for describing a page composition. See Page Definition. |
| Modal dialog | A modal window describes parts of a UI. An element is considered modal if it blocks interaction with the rest of the application. |
| Page | A page is the collection of components that comprise a workspace or portal UI. For example, a landing page, in classic Workspace, displays lists and analytics that show records that need to be addressed. You edit content inside these pages in the Stage panel in UI Builder. |
| Page Definition | A reusable UIB object that contains layout, composition, data resources and event information, useful for describing a page composition. In the platform this is referred to as a Macroponent. |
| Page Properties | Defines the configuration properties of a page definition. |
| Page Settings | Defines settings of a page, like its name, scope and path. |
| Page template | When a layout isn't enough; The ability to create a new page with composition, configuration, data, and layout, already set up as a starting point. |
| Parameter | Inputs that can be optional (such as inputs that are optional in a URL) or required (such as a field) |
| Variant | This is a variant of a page that features targeted content for specific audiences. "Create a variant to assemble targeted content for specific audiences, such as Agents or Managers." |
| Variant Collection | A UIB construct that defines a collection of screen variants that map to a route; such that one particular route can find the most applicable screen variant to be served up. |
| Variant settings | A UIB construct that defines properties of a variant, like its name and scope. |
| Viewport | Refers to a category of components / behaviors. An area on a page that can have content added to it at runtime; this allows for example, a modal page definition that can have different content for the body and interactions of the modal added to a modal's viewport; thus separating the content from the modal mechanism. |
2 - Create and Configure a Page |
2.1 – Create a Page
2.2 – Create a Page with a Page Template
2.3 – Advanced Page Settings - Parameters & Variants
3 - Building a Page |
3.1 – Working with Layouts
3.2 – Layout Systems
3.3 – Working with Components
3.4 – Adding Styling to a Component
3.5 – Working with Variants
3.6 – Working with Viewports
3.7 – Working with Modals
3.8 – Preview a Page in UI Builder
4 - Making a Page Dynamic with Data |
4.1 – Event Mapping
4.2 – Work with Data Resources
5 - Theming |
5.1 – Work with Themes
5.2 – Apply a Theme to your Experience
