The ServiceNow®
Next Experience Components are the components used to build custom user interfaces. Next Experience Components was enhanced and updated in the Yokohama release.
Next Experience Components highlights for the Yokohama release
- Build rich UI experiences with prebuilt system or custom components. To view the Next Experience Components API reference, usage guidance, and ServiceNow®
UI Builder setup documentation, visit the Developer site Next Experience Components doc.
- Use common web component patterns and principles, such as a JavaScript framework, immutable data, and simple action handlers.
- Reuse components across multiple user interfaces to create a cohesive experience for your end users.
- Use preset property values to configure properties and event handlers automatically for a component so the component is ready to work when you add it to a page. Presets can connect to a controller that acts as a data resource
for the component. For more information, see and .
New in the Yokohama release
Table 1. Components
| Component |
Description |
| Active call |
Handles phone calls as part of the Interaction controls component (ICC). Manages call functions, including actions such as disconnect, mute, hold, record, and transfer. |
| Animation |
Places Lottie animations in Next Experience pages or components created in UI Builder. |
| Dialpad |
Dial a phone number in Workspace. |
| Feedback |
Captures detailed feedback from users for AI products or skills through a series of pre-determined options or free-text responses. |
| Filter group |
Groups up to 3 filter components into a single container with configurable Apply, Clear, and Reset buttons that apply to all filters in the
group. |
| Flyout menu |
Menu that organizes multiple levels of options within a hierarchical structure. |
| Knowledge view |
Embeddable container that renders a Next Experience
Knowledge article view. |
| Loader custom |
Renders custom animations with an optional progress bar and label. |
| Skeleton loader |
Decorative placeholder for generated content. |
Changed in this release
Table 2. Components
| Component |
Enhancement |
| Appointment calendar |
- Select multiple slots
- Add customizable categories for appointment slots
- Hide past and unavailable slots
- Add contextual tags in appointment slots
- Configure number of rows displayed in each slot in the Day and DAYMOBILE views
- Configure container height adjustment
|
| Attachments |
- Option to download all attachments
- Revised delete attachment confirmation popup message
|
| Avatar |
Configure avatar to behave as a button or a link. |
| Calendar |
- DST support with multiple time zones in the Calendar and Timeline views
- Hide header
- Multiple time zones in the Timeline view
- Scroll control for the Calendar and Timeline views
|
| Email composer |
Now Assist generative AI suggestions for all email scenarios, email templates, response templates, and quick messages. |
| Email composer (mini) |
Now Assist generative AI suggestions for all email scenarios, email templates, response templates, and quick messages. |
| Form |
- Configuration panel updates
- Form controller configuration panel updates
|
| Form templates |
- Sort templates alphabetically and by last used.
- New tab for Favorites for you to add and remove templates.
- Larger cards that don't truncate template name and description, and show Last used timestamp.
|
| Highlighted value |
- Medium size variant.
- Custom tooltip property.
|
| iFrame |
Send messages to iframed document. |
| Kanban Board |
- Multi-select in cards
- Configure selecting dependency lines
- Add secondary header
|
| Modeless dialog |
Make the dialog dynamic and automatically resize to fit the content. |
| Node Map |
- Force layout for representing graphs without structure or hierarchy
- Custom popover configuration in Hierarchical, Layered, and Force layouts
- Customizable nodes in non-unified layouts
- Self-referencing nodes denoted with edges looping back to the node
- Export maps in JPG and PNG
- Aggregate or segregate multiple connections between the same nodes
|
| Pill |
Display the selected pill state which doesn't display by default. |
| Quick filter |
- Configure section headers in typeahead dropdown
- Configure footer action button
- Configure placeholder text value for input field
|
| Record lookup |
- Search for contacts by name, phone, or email
- Preview shortlisted results in a paginated form
- Quickly link or unlink a shortlisted contact to a case
- Edit details for a record without accessing the parent record
- Hide record header
- Configure search results
- Render highlighted values in the linked card
- Qualify search results using specific conditions (reference qualifiers)
- Hide fields with empty values
- Hide link button
- Expand or collapse card
|
| Stepper |
- Standardized font size (small or medium) for all steps
- By default, pagination adjusts to display the current selected step
|
Table 3. Data visualizations
| Chart |
Enhancement |
| Bar |
Percent (%) information added to chart tooltips and data table below chart. |
| Bubble |
Percent (%) information added to chart tooltips. |
| Geomap |
Percent (%) information added to chart tooltips and data table below chart. |
| Heatmap |
- Percent (%) information added to chart tooltips and data table below chart.
- When the metric value is set to "Count," show a zero (0) when no data is available.
|
| Pivot table |
- When there's no value in the selected dataset or for the configuration, choose the display format.
- Data sources limit increased from 10 to 15.
|
| Time series |
- Percent (%) information added to chart tooltips and data table below chart.
- Support for business calendars such as Gregorian, fiscal, and any manually added calendar.
- For all chart formats, except "column:"
- When there's no value in the selected dataset or for the configuration, choose the display format.
- For table data sources, when there's no data for a specific time on the chart, show a continuous line without gaps.
- Show a chart and graph data table for easier screen reader access.
- For line, spline, area, and step charts, have a marker show at each data point on the chart including where values are zero (0) or missing.
- For a chart with up to 3 metrics, you can add alternative Group by's for each metric for the user to select from.
- Sorting when data is grouped.
- New Date range option to set the period end date to update automatically to the current date.
|
Table 4. Templates
| Template |
Description |
| Dashboards |
- Pills at the top of the page display any categories assigned to the dashboard
- User avatars at the top of the page indicate real-time editing
|
Table 5. Bundles
| Bundle |
Enhancement |
| Record list |
- Condition builder available in the list header
- If live list is enabled, infinite scrolling is enabled by default
|
Activation information
Next Experience Components is a ServiceNow AI Platform feature that is active by default.