---
sourceDocument: Yokohama Release Notes
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/release-notes

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Release Notes

ft:clusterId :

    - rn

bundleId :

    - rn


---

# Next Experience Components release notes

# Next Experience Components release notes {#ariaid-title1}

Release version: Yokohama  
Updated January 30, 2025  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 minutes to read  
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 {#component-rn__component-rn-highlights}

* 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](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?releases[]=washingtondc&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades).
* 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 [Automatically configure components using presets](https://www.servicenow.com/docs/access?context=presets&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US) and [Bind data to UI Builder pages using controllers (advanced feature)](https://www.servicenow.com/docs/access?context=controllers&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US).
{#component-rn__ul_qhh_q44_s1c}

## New in the Yokohama release {#component-rn__component-rn-new-features}

{#component-rn__table_xlb_cfg_zcc__entry__2}

| 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. |
[Table 1. Components]

{#component-rn__table_xlb_cfg_zcc}

## Changed in this release {#component-rn__component-rn-changed-features}

{#component-rn__table_qvp_xdg_zcd__entry__2}

| 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 {#component-rn__ul_sfn_sn5_4dc} |
| Attachments | * Option to download all attachments * Revised delete attachment confirmation popup message {#component-rn__ul_j13_jfg_pdc} |
| 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 {#component-rn__ul_p22_4yl_qdc} |
| 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 {#component-rn__ul_nh4_rfg_pdc} |
| 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. {#component-rn__ul_bzp_vfg_pdc} |
| Highlighted value | * Medium size variant. * Custom tooltip property. {#component-rn__ul_owp_lyg_ldc} |
| iFrame | Send messages to iframed document. |
| Kanban Board | * Multi-select in cards * Configure selecting dependency lines * Add secondary header {#component-rn__ul_xkx_b3m_qdc} |
| 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 {#component-rn__ul_ibn_f45_4dc} |
| 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 {#component-rn__ul_vtf_cgg_pdc} |
| 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 {#component-rn__ul_gwg_lgg_pdc} |
| Stepper | * Standardized font size (small or medium) for all steps * By default, pagination adjusts to display the current selected step {#component-rn__ul_ehz_tdb_pdc} |
[Table 2. Components]

{#component-rn__table_qvp_xdg_zcd} {#component-rn__table_eqq_1fg_zch__entry__2}

| 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. {#component-rn__ul_t5k_gzv_ldc} |
| 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. {#component-rn__ul_dby_gsg_pdc} |
| 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. {#component-rn__ul_vlr_gcw_ldc} * 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. {#component-rn__ul_l52_4wv_ldc} |
[Table 3. Data visualizations]

{#component-rn__table_eqq_1fg_zch} {#component-rn__table_y2f_x1z_4dc__entry__2}

| 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 {#component-rn__ul_wh3_lyk_ydc} |
[Table 4. Templates]

{#component-rn__table_y2f_x1z_4dc} {#component-rn__table_cr1_bfg_zce__entry__2}

| Bundle | Enhancement |
|-|-|
| Record list | * Condition builder available in the list header * If live list is enabled, infinite scrolling is enabled by default {#component-rn__ul_azt_jdz_4dc} |
[Table 5. Bundles]

{#component-rn__table_cr1_bfg_zce}

## Activation information {#component-rn__component-rn-activation}

Next Experience Components is a ServiceNow AI Platform feature that is active by default.{#component-rn__component-rn-activation-1}

## Accessibility information {#component-rn__component-rn-accessibility}

For Next Experience Components accessibility conformance, refer to the ServiceNow
[Horizon site Components section](https://horizon.servicenow.com/workspace/components).{#component-rn__component-rn-accessibility-1}

## Related ServiceNow applications and features {#component-rn__component-rn-related-apps}

[UI Builder](https://www.servicenow.com/docs/access?context=ui-builder-overview&version=yokohama&pubname=yokohama-application-development&ft:locale=en-US)
:   UI Builder is a low-code tool that enables you to build pages for workspace and portal web-based experiences.

[Configurable Workspace UI](https://www.servicenow.com/docs/access?context=workspace-landing-page&version=yokohama&pubname=yokohama-platform-user-interface&ft:locale=en-US)
:   Use components to build custom workspace experiences for agents who solve internal or external customer issues.