Components

Gives users the ability to reveal and hide relevant sections of content in collapsible categories. NOTE: This component is only available for use in code and will not appear in UI Builder.

Accordion item to use within an accordion. NOTE: This component is only available for use in code and will not appear in UI Builder.

Contains buttons and menu items that let users interact with and take actions on a page. The actions in the component collapse into an overflow menu when the container shrinks. Action bar buttons and menu items communicate primary and secondary calls to action to the user. This enables the user to interact with pages in a variety of ways.

Native Voice Controls is for managing phone calls, fully integrated with the customer's preferred CCaaS provider.

Show the list of changes made to a record (journal fields, emails, and attachments)

Compose allows users to create new journal entries for the activity stream

Adds modeless dialog functionality to Activity Stream Compose configurations to allow journal field and email editors to pop out and in.

Agent assist provides a list of resources related to an open record’s short description to assist the user in task resolution.

Provides a list of resources related to an open record’s short description to assist the user in task resolution.

Provides a way for agents to chat with customers. Agents can send and receive messages as well as documents and image files.

A container that organizes AI-generated summary information in a simple format, with options for users to refine and utilize the generated content. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

A notification that can be optionally dismissed

A list of alerts which can be dismissed or collapsed into a group.

Analytics QA component

Animated sparkle icon used to indicate an entry point for a Now Assist flow or event.

Places Lottie animations in Next Experience pages or components created in UI Builder

Use to view, book, and manage appointments by day or week, depending on the amount of appointment slots. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Enables a user to add, preview, download, or remove attachments from a related record. This component appears in the standard record page's contextual sidebar.

Provides controls for playing and downloading audio files

A graphical representation of a user, depicting an image, initials, or anonymous icon

Numeric badge that indicates a total count

Part of the data visualization consolidated component. Presents data as vertical or horizontal bars. In general, use horizontal bars to graph nominal data, and use vertical bars to graph ordinal data.

Provides insight into datasets, including key data points like the minimum, lower quartile, median, upper quartile, and maximum. The box plot component also indicates any outliers and their values, if the dataset is symmetrical, how tightly the dataset is grouped, and if and how the dataset is skewed. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Creates a set of breadcrumbs which allows users to keep track and maintain awareness of their locations

Part of the data visualization consolidated component. Plots data points on X and Y axes and uses a third aggregate dimension to define bubble size. Bubble reports can use numeric values to define the X and Y axes, and an aggregate value to determine the size of each bubble.

Button with a background color

Button with no background color or border

An actionable icon in a circular format

Iconic buttons use an icon instead of text to convey an action

Button used to toggle between two states; stateful buttons only display an icon and don't support other elements, such as labels

A full featured calendar component with month, week, day, and timeline views. Purely presentational, this component requires the consumer to fetch their own data

Calendar tool for planning and organizing events that also provides information on the dynamic filter conditions applied to the calendar; these filter conditions display in a panel opened from the contextual sidebar of a calendar.

Generic canvas footer that supports common use causes via chrome_footer page property configuration and UXF data brokers via AppShellUI macroponent.

A multi-level menu component in App Shell that handles primary navigation A11y - Axe Test only

A card subcomponent that enables the user to take action via one or more buttons

A container for specific information in a simple, easily scannable format

A card subcomponent for visually separating sections within a card

A card subcomponent that supports multiple headings and action buttons or menus

Controls the visibility of sensitive card data within a PCI-compliant container. Supports uploading and viewing documents through secure iframes. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Footer subcomponent for custom cards

An interactive display tool that cycles through more than one content item in the same space Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

A text label with animated transitions

Use to configure and display catalog items on a page or in an experience. Enables users to explore, search, and find items by browsing through available catalogs, categories, and catalog items.

A component to render a Catalog Item and order/submit/request the Catalog Item. This works for Record Producer and Standard Catalog Item

The catalog wizard component can be used to create multi-step wizard-like experiences for information intake. A Composite Record Producer (CRP) is the backbone of this component which can be used to insert data into multiple related tables.

An interactive control for indicating an affirmative, negative, or indeterminate choice

A list of items attached to checkboxes that can be selected or deselected independently and can display links to related information

A helper element for expandable / collapsible sections

A simple box, typically used to group similar content or subcomponents

The color picker component is a multi-view, configurable color library that can be used to select and save colors.

A color library that can be used to search for, select, and save colors. Hexcodes, RGB, and HSL values are accepted, and custom colors can be used.

Used to compare content side-by-side by highlighting the differences between the original and changed content; can also be used to edit or translate the changed content in place.

Builds a condition statement of contextually generated fields that can be used to create filters, administer surveys, and control access to records

Notifies the user when a flow, such as a request or task, is complete; the confirmation message can provide the user with key information and actions to take related to the flow

Use to create a card that shows a user’s name and avatar, and optional information such as their job title, and contact information

A simple box that is used to group components and organize page layout in UI Builder

Uses a node and tree structure to combine and organize data. Content tree provides an expandable and selectable tree with configurable options to include elements such as identifiers, highlighted values, chevrons, text, icons, and dividers.

Use for placing theme-able inline Scalable Vector Graphics (SVG)s in Next Experience pages or components created in UI Builder

Temporary panel that floats over other content to provide contextual help and information when a user selects a triggering element

A component for customer activity feed. It displays customer's activity feed in a timeline manner and provides facets and date range filters to filter the feed. This component is only available with the Customer Central plugin installed.

Component that shows tiles for all the Platform Analytics dashboards that the viewer can access. These include dashboards migrated from Core UI in Compatibility Mode. The tiles show the title and creator of the dashboard, and also whether it is certified across the company or bookmarked by the viewer. Viewers can filter the dashboards by name, bookmark, certification, or whether they created it. The Overview also has functionality for creating new dashboards.

A single, scrollable row of cards containing actions that provide access to either a larger data set or to individual records

Display different types of content on a page

The base component for rendering all visualization types.

A form control that enables users to input or select a date, time, or date and time value.

A form control that enables users to select a range of dates and times.

Displays a single data measure against a semi-circle dial used to represent linear, preferably progressive values. The semi-circle dial represents the “whole” range of possible values, from minimum to maximum, against which the measure as a portion of the whole is represented by a filled color.

Enables users to provide an electronic signature for documents or other artifacts; the signature can be drawn or typed

Displays the main details (fields) of a given record in a table.

Displays view-only record content to a user in portal pages and applications, using a configurable accordion

This component shows documents onscreen without having to download them.

Macroponent for integrating Document Intelligence (DocIntel) into UIB workflows. It is effectively a thin wrapper around our DocIntel React app.

Domain filter allows users to filter data in your dashboards by domains in a domain-separated instance. Domain filters enable the user to see data associated with one or more domains. The filters can apply to both tables and indicators in a Now® Experience or dashboard. Detailed documentation could be found here. Domain filters are available on instances with domain separation enabled. For more information, see Domain separation for service providers.

A dropdown menu that allows user to select one or more values.

The list portion of a dropdown that displays hidden content that’s revealed through a trigger from a dropdown button.

Component for composing an email and sending it to a selected customer. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Renders the email composer in smaller spaces and within another component, such as in a side panel on a record page. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Renders quick messages in the email composer side panel; this component is for use in Workspace only.

A method for previewing an email before sending it to users within an experience.

A message that displays when there is no information or incomplete details to show in a dedicated space; optionally, the component can show an illustration and action buttons

Captures detailed feedback from users for AI products or skills through a series of pre-determined options or free-text responses.

Component to display a Google map with markers to help to visually identify locations of people, tasks, and objects; data rendered on the map comes from the Map markers property This component is only available with the Field Service Management Configurable Dispatcher Workspace plugin installed.

Component for displaying additional content for an object in a popover in the field service pages This component is only available with the Field Service Management Configurable Dispatcher Workspace plugin installed.

Filter component is a pillar with different choice options that lets users filter data on the page. Use in dashboards or pages with embedded analytics.

Menu that organizes multiple levels of options within a hierarchical structure.

The form bundle which contains the form component prewired with the form controller.

Adds an avatar when another user is viewing the record at the same time. If 2 other users are viewing the record, their avatars are both displayed. If more than 2 are present, the first 2 user avatars are displayed with a third overflow trigger “avatar”.

Templates simplify the process of submitting new records by populating fields automatically.

A planning tool that enables users to track work items, goals, or objectives. This component has a dependency on the sn-datagrid component. This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Shows where a single value lies across a range from minimum to maximum expected values. Set colored data ranges to help users understand progress.

Shows a visual representation of the geographical distribution of data for a world, country, region, or state. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

The Grouped Button component combines related buttons in a unified layout, emphasizing their relationship and collective purpose.

Displays heading text in multiple sizes

Shows the relationship between two table fields or indicator breakdowns as a spectrum of shading between two colors. As the user moves along the axes, the changes in color reveal patterns in the value of one or both fields or breakdowns.

A colored label with an optional icon to indicate status

Graphic symbol that represents an object or an item

Presence indicator icon used to show availability of a user.

Used to define and configure customer features, applications, or components that are not built using the Now® Experience UI Framework so that agents and customers can use them within a workspace or portal.

Multi-size set of illustrations loaded on-demand

Displays a static image

Organizes indicators in a list format to provide users with scannable information and direct access to indicators

Form element for basic user input in the form of text, values, or symbols

Form element for passwords that accepts input in the form of text, values, or symbols with validation

Form input for phone number text, including country and other identifying codes

Accepts hyperlinks as input for entering and editing web addresses

Reusable kanban board component used with drag and drop feature. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Dials numbers to make outbound phone calls and enters numbers for the Interactive Voice Response (IVR) menu options.

Displays the contents of an article.

Analyzes KPI (key performance indicator) trends and associated records by analyzing data with filters, setting targets and thresholds, and evaluating through KPI signals

Displays current, past, and future key performance indicator targets in a card view; can be used to create new targets and edit existing targets

A label-value pair used to show secondary and tertiary information that only displays horizontally (inline)

A label-value pair used to show secondary and tertiary information that displays vertically where column or horizontal space is limited.

Displays labels and their values side-by-side with a space between them for visual distinction; tabbed label values are used for primary information in situations with limited horizontal space

Group of subcomponents that provides a structured set of links and other useful elements to enable users to navigate to different resources

A link set group component is a collection of link set that provide an interactive reference to a resource.

Interactive, in-product list of records from a database table that enables users to navigate, filter, and access data. now-record-list-connected has moved to maint only in the Zurich release. Any existing experiences that are using this components will continue to work. Any new experiences looking to use the list component should use the new record list bundle instead (called Record List in the UIB toolbox). The record list bundle supports all features supported in now-record-list-connected. This was done as part of an effort to reduce the number of lists in the UIB toolbox to help cognitive load for page authors.

Interactive component that shows data related to a database table in the context of a form to analyze data, prioritize work, and view and navigate collections of records related to a parent record. now-record-list-connected-related has moved to maint only in the Zurich release. Any existing experiences that are using this component will continue to work. Any new experiences looking to use the list component should use the new record list bundle instead (called Record List in the UIB toolbox) with the list type set to Related. The record list bundle supports all features supported in now-record-list-connected-related. This was done as part of an effort to limit the number of lists in the UIB toolbox to help reduce cognitive load for page authors.

Interactive component that shows an in-product list of records from a database table that displays a reduced set of features, allowing the simple list to fit in small spaces. now-record-list-connected-snapshot has moved to maint only in the Zurich release. Any existing experiences that are using this component will continue to work. Any new experiences looking to use the list component should use the new record list bundle instead (called Record List in the UIB toolbox) with the list type set to Simple. The record list bundle supports all features supported in now-record-list-connected-snapshot. This was done as part of an effort to limit the number of lists in the UIB toolbox to help reduce cognitive load for page authors.

A menu that gives you the ability to navigate between lists

An animated spinner to indicate a loading state

A loader that renders a Lottie animation with an optional progress bar and label.

Logs a user into their account, allows users to self-register for an account, and provides password recovery

A component that can be used to lookup a record on any table in card format. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Message framework that can include text, images, and actions for use cases such as empty states and confirmation messages

This component renders the mfa-setup component on the page.

A mini calendar where you can select a date

A modal dialog that overlays and temporarily disables underlying content to provide information or ask for a decision from the user.

A window that appears as an overlay, enabling users to interact with both the main content and window content

Gives users the option to leave feedback on content, such as community posts, blog posts, and knowledge articles, or to reply to other user's content; users can indicate if the content was helpful, or if they liked the post

A map used to illustrate connections between concepts, tasks, or groups. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

Reusable UI component Now Assist context menu

Code editor component for JavaScript, JSON, CSS, XML and HTML languages

Provides controls for navigating backward and forward through content distributed across multiple pages

[To be deprecated in San Diego and replaced by now-vis-pie which will use the new PAR data framework] Pie and donut charts are circular charts that display collected values as proportionally sized segments that represent a whole; donut charts have an open center that you can use to display the sum of all the slices of data in the chart.

Part of the data visualization consolidated component. Pie and donut charts are circular and display collected values as proportionally sized segments that represent a whole; donut charts have an open center that you can use to display the sum of all the slices of data in the chart

Dynamic or predefined UI element that sorts, filters, or tags content; a pill can contain information such as an input, action, or attribute

This is a pill list component for displaying a collection of pills/tags.

Presents aggregate data broken down by multiple dimensions in a single table. A pivot table can automatically sort, count, and sum up data stored in tables and display the summarized data

Displays all running Playbooks for a specified parent record. Only available when the Playbook Experience store app is installed.

Displays the activities in a vertical orientation for a stage selected by the user in the stage picker (horizontal view only).

Displays selected playbook stage activities in a stacked or focused view and the actions available to perform

Packages all playbook modals into a single component that can be added to a UI Builder page for fast and easy integration with playbook custom layouts - currently includes Cancel Playbook and Add Optional Activity modals

Displays playbook stages in a vertical or horizontal orientation and is used to select a stage to view and update its activities

Builds a condition statement of contextually generated fields that can be used to create filters, administer surveys, and control access to records.

Map you can use to visualize the steps in a process.

Linear indicator that provides feedback about an ongoing, user-initiated process; a progress bar shows a user how much of the total process is complete

Light condition builder that enables users to create multiple filters quickly from a data source in the page. Select the best subset of those filters as a default list for your users. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

An interactive control for selecting a single input from a group of mutually exclusive choices

Provides a list of recommendations that are relevant to a record

Displays a list of recommended actions to an agent, based on the context of the current record. This component requires installation of the Recommended Actions for Customer Service application

A header containing basic information about the record in a scannable format.

A list component bundle using a dedicated controller to configure list actions such as sorting, filtering, and grouping; the record list is a component bundle containing a list header with action buttons, a list of records from a table, and a pagination control for navigating list pages.

A tab container with a Details tab and related lists for a record page

Tags allow users to assign categories to records.

Generic component to view related content like most helpful articles, most viewed blogs, catalog items, etc.

Displays two content slots, one on the left and one on the right, that users can resize horizontally and vertically; optionally, the component can display an action bar that enables users to set which panes display

Ribbon is a container that can hold one or more ribbon widget sub-components. The ribbon can be configured to include 1 or more widgets. The Ribbon contains settings to have it expanded or collapsed by default.

Renders custom HTML

An interactable component which enables the planning personas to plan and track their roadmap intuitively.

Lets users select a visualization previously created in Visualization Designer.

Schedule Recurrence Component provide powerful tools for automating and managing repetitive tasks. For Recurrence components may be fixed via App shells through DEF0674808 , DEF0674804 (Z) UXF made their changes and merge it but it will be available only from A release We have done changes at our end but waiting for UXF to release theres.

When searching, lets users quickly narrow down search results by clicking on the metadata value based on the current search results

Enables users to search and provide suggestions.

Use to present a scrollable list view of search results that the user can filter in place and select for detailed views of search result card content

A form control that provides a dropdown of options for a user to select from

A container that slides in from the edge of the screen to present related content or actions, intended for mobile experiences.

Single score is a type of the data visualization component that displays a single measurement as a number. You can add a sparkline and supporting information if the data is appropriate.

A timer that uses a highlighted value to show the status of a task Service Level Agreement (SLA), including when it is late.

A button variation that provides a primary action and a dropdown panel with related actions

Panel to display 2 components side-by-side (50%,50%) or stacked (100%,100%)

Star Rating Component

Tabular navigation component that helps users visualize and interact with a multi-step process

Text that can be styled with CSS

Enables search users to quickly narrow down results based on the filter tabs you define and to sort those search results based on filters and fields you specify

Horizontal or vertical tab menu for navigating between tabbed content. For information on a version of this tabs component that's available in the UIB toolbox, see documentation for the Tab set component.

Horizontal or vertical tab menu for navigating between tabbed content.

A template card aimed at displaying a summary of an assist record

Attachment template cards are best used to show a file has been or will be added to a record.

Provides a summary view of a task, workflow, or event that enables a user to quickly take actions without going into those specific objects

A text link is a stylized element of text that is linked to another resource

Allows user to enter text within a larger area. Textarea input fields are used in forms and other use cases which require multi-line user input

Shows events/stages in chronological order on a timeline

Part of the data visualization consolidated component. Presents data as a time series: Line, Area, Spline, Step, Column, and Scatter.

Changes the state of a single setting to on or off; a toggle consists of a handle, a track, and a label

Descriptive text that appears when the user hovers over or tabs to an element.

Form element for text input with a dropdown to show relevant or suggested values and highlights matching values as the user enters characters into the input field

Form element for text input with a dropdown that allows selection of multiple items; shows matching items as a user enters characters in the input field and displays selected items as pills

Enables users to view conversion rates in aggregate user behavior to uncover the reasons behind success or failure of a user flow. This visualization only works with User Experience Analytics data. Note: This document describes the latest component functionality. Go to the store to make sure you have the latest version of the component.

A bordered container for charts etc. Comes with slots to accommodate child content, header tooltip and right-hand side content. This component is only available with the Conversational Analytics application installed from the ServiceNow Store.

Workflow Studio Create Assets Wrapper Accessibility completed in DEP0034270 Achieve component WCAG 2.1AA for sn-ws-asset-creation-wrapper

Includes two components: sn-component-workspace-global-search-typeahead sn-component-workspace-global-search-tab