UI Builder glossary

Learn about the terms and concepts that are unique to UI Builder (UIB).

Actions

Actions are a part of the ServiceNow® platform. Actions in UI Builder are specifically activity on a page or within a page component. Events and event handlers are used to add actions. For example, add a button component to a page and then add an event handler to apply an action for the button, such as opening a web page.

App shell

App shells are the static elements of a web experience (for example, the header, footer, and menu navigation) that stays with the end user as they navigate throughout the experience. App shells are primarily used and supported in Workspace and Portal experiences.

Bind

See Data binding.

Branding

See Theme.

Cascading style sheets (CSS)

Cascading style sheets are a Web standard style sheet language. In UI Builder, CSS is used to change the visual style of a component or page in a workspace or portal experience. For example, add a background color to a page or container component.

See also CSS custom properties.

Client script

Client-side JavaScript that interacts with components and client state parameters on a page. Client scripts are mapped to events and event handlers in UI Builder. For example, on a list component, add buttons with a client script to toggle between open and closed records in the list. Add client scripts using the Now Code Editor, which is integrated into UI Builder.

Client state parameter

Page variables that are defined for a page to store a piece of data (a client state) only for that page. For example, create three client state parameters to store the input needed to create a record and specify when to refresh the list. Page variables can be updated using client scripts and events to make a page dynamic.

Component

Use the UI Builder library of components to build pages. Components have an interface that an end user can view and interact with. Components can talk to each other through events and properties. Commonly used components include Heading, Image, List, Form, and Button.

Component formula editor

Use to bind or change formulas. Enter text, data bindings, or formulas. The editor supports logical, arithmetic, comparison, negation, and functional transform types.

Component ID

Used to reference a component when adding a script or binding data to the component. A component ID is automatically created (based on the component label) when you add a component to a page, but the component ID can be edited.

Component presets

Use to apply predefined configuration values and event mappings to components. Presets apply prebuilt configurations to component properties and events handlers. Presets are only available for certain components.

Component properties

Available in the Configuration panel and used to configure a component. Each component has unique properties. Component properties are specified within each tab on the Configuration panel: Config, Style, and Event. Some components have presets available. Use the component presets to set component properties automatically.

Composite data resources

Combine multiple data resources, for example a GraphQL and a Transform, into a single reusable data resource.

Configurable workspace

New way of working that replaced the classic environment forms and lists. Configurable Workspaces were introduced before the Next Experience UI, but opened in a separate browser tab.

Controllers

A type of data resource that includes data and event logic and enables component presets. Controllers are added automatically when using a page template. There are two types of controllers:

• Data controllers contain data resources and can be manually added to a page
• UI controllers are added to pages when using page templates and can't be added manually. Creating controllers isn't supported currently.

CSS

See Cascading style sheets.

CSS custom properties

Next Experience customer CSS properties that can be used for theming.

Data binding

Process of associating data (from tables, records, or other elements on the page) with a UI element that displays information.

Data resources

Act as a mediator between the page and the server. Data resources fetch data to populate a component and they update server data based on user interactions. Data resource types include Controller (Data controllers and UI controllers), GraphQL, Transform, Client state, Composite, and REST.

Data visualization

Chart or graph, for example, Single score or Column graph, to view data. Data visualizations can be configured to display different data depending on the viewer.

Entity View Action Mapper (EVAM)

Application that standardizes how different data sources are displayed in cards and lists. UI Builder uses EVAM data sources to show information in a component as a card grid view or as a list of information.

Event

See UI Builder event.

Event handler

Action performed when an event is triggered on a component, page, or data resource.

Event mapping

Process of identifying an event handler to run when an event happens. Add a single or multiple event handlers to a component, page, or data resource event.

Flexbox

A one-dimensional page layout system in UI Builder. Allows for content or components to be added to a page by row (left-to-right or right-to-left) or by column (up/down or down/up).

GraphQL

Open-source query language for APIs. In UI Builder, GraphQL data resources execute GraphQL queries and mutations.

iFrame

HTML element that loads another HTML page within the document.

Layout

(Pre-Vancouver release) Controls how components are arranged within a container. After adding a component to a container, the layout can be configured in more advanced ways, such as using Grid (Flexbox is the default layout).

(Vancouver and later releases) Element that can be added to a page to arrange components.

Macroponent

Core data structure that drives UI Builder pages. Fields contain JSON that builds the page.

Map events

See Event mapping.

Modal

A page overlay that prevents the user from using the rest of the page until an action is performed. For example, if a user selects a button component that deletes a record, a modal can be added to ask for confirmation of the action.

Notification

Communication (email, short message service, notification, or push notification) sent from a ServiceNow instance to inform a user that something happened.

Now Code Editor

A rich-text editor that supports CSS, HTML, JavaScript, XML, and JSON. Use Now Code Editor to change UI configuration, data resource configuration, styles, events, client-side scripts, and server-side scripts in Next Experience UI Builder components.

Page

See UI Builder page.

Page collection

Group of pages that can be reused in experiences within tabs or modals.

Popover

A page overlay that enables users to continue using the rest of the page. Popovers can be configured just like UI Builder pages with text, components, images, fields, and menu items.

Presets

See Component presets.

Repeater

Component that acts as a basic loop that repeats the data you provide in multiple components. Repeaters use an array or an array of objects. Repeaters bind values to a data array property. For example, [{"task": "A"},{"task": "B"}], repeats the content inside it two times.

Tabs

Component that displays a horizontal or vertical tab menu for navigating between different sets of data.

Template (page)

Predefined values to populate a UI Builder page. Use a template to build pages faster.

Theme

The visual style of all UI Builder pages in an experience, including primary colors, secondary colors, logos, and fonts.

Transform

Type of data resource that uses a script to transform input data into another format. Specify the properties in JSON format.

UI Builder

Web interface builder that enables developers to build new pages or customize existing pages using Next Experience UI Framework components.

UI Builder event

Action a user takes (such as selecting a button) or an occurrence that happens on a page. Most UI Builder components, pages, and data resources have default-associated events. Use event handlers with the events to add additional actions to pages.

UI Builder page

Collection of column layouts, columns, and components. Create or customize multiple UI Builder pages for workspace and portal experiences.

Variant

Version of a UI Builder page with access controlled by role or condition. Create variants of pages to target experiences for different audiences. For example, create a home page for agents and a variant for managers at the same URL. Alternatively, create a page variant that users see under different conditions.

Viewport

Specialized component that enables you to extend your experience without needing to own the parent page in UI Builder. You can work with viewports in three ways: Add a viewport component to a page, add a viewport-enabled tab to a page, or add a viewport to the Contextual sidebar component.

Workspace

Targeted experience for a type of application user. Includes components that enable a user to interact with the application.