Next Experience Components release notes

  • Release version: Washingtondc
  • Updated February 1, 2024
  • 8 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 Washington DC release.

    Next Experience Components highlights for the Washington DC 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 Automatically configure components using presets and Bind data to UI Builder pages using controllers (advanced feature).
    • Upgraded components for accessibility. For more information, see the Accessibility information section in these release notes.

    New in the Washington DC release

    Table 1. Components
    Component Description
    Color selector 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.
    Related Items Information related to a case record displayed with cards in the side panel and categorized in an expandable accordion. Optionally, the user can display the data as a full-featured list with sorting and filtering capabilities.
    Table 2. Page templates
    Template Description
    Confirm Publish Modal Modal used as a page template that enables Knowledge Management users to publish articles to the Knowledge Base.
    Record page vertical Page template used to manage related lists and UI pages on a record page within groups. This page template contains preset values that make the page work without requiring complex configuration.
    Retire Confirmation Modal Modal used as a page template that enables Knowledge Management users to retire obsolete articles from the knowledge base and select replacement articles.
    Standard List Page template built with a record list bundle and a list menu contained in a resizable panes component, all with preset configuration values. Users can export records in different formats and share custom lists with other users. The List Controller used in this page template contains configurable properties.
    Table 3. Bundles
    Bundle Description
    Record list The record list bundle is a combination of components that include a list header, list body, and pagination component. This new iteration of the list component includes preset configuration values and a list controller.

    Changed in this release

    Table 4. Components
    Component Enhancements
    Activity Stream
    • Hide the discard draft, pop-out button, create email, and view drafts buttons.
    • Change the send email button style from primary to secondary.
    • Display email subject when there are multiple modeless dialogs or when they are minimized.
    • Insert email template and insert KB link with modeless dialog.
    Attachments New property for defining the maximum allowable size for an attachment.
    Date - Time Default time [initialTime] property that sets the default start time for the component. If not set, the time defaults to midnight.
    Date-Time-interval Customize the range of dates to display on the calendar using a relative date time picker.
    Dropdown Added a configurable label property.
    Email Composer
    • Attach Knowledge articles inline or as PDFs using Agent assist.
    • Auto-save drafts, discard drafts, save, and create drafts.
    • Improved page design density.
    • Added support for Modeless dialog experience.
    Email Composer (mini)
    • Attach Knowledge articles inline or as PDFs using Agent assist.
    • Auto-save drafts, discard drafts, save, and create drafts.
    • Improved page design density.
    • Support for Modeless dialog experience.
    Heading
    • Font header sizes decreased in Workspace to increase data density.
    • Hero heading size alternative to primary for users who still prefer the original, larger heading size.
    Icon Use custom icons in any standard image format. Custom icons aren’t added to the library on the instance and aren’t cached.
    Image Use custom images in any standard image format. Custom icons aren't added to the library on the instance and aren't cached.
    Input AI Indicator signals to users when a form field uses AI recommendations and provides more information about AI functionality.
    Kanban board
    • Enable dependency lines to indicate relationships between cards on the board.
    • Show the swimlane header in the row.
    List selector
    • Popovers triggered from items in the Available items and Selected items lists display details of the current record. You can configure the content of the popovers and select the items that show the trigger icon.
    • Select how the component is displayed. The choices are as follows:
      • Compact
      • 2 panels
      • Dotwalk (default)
    • Prevent users from reordering items in the Selected Items list.
    • Reveal all hidden controls inside the component.
    Modeless dialog
    • Define the header text that wraps to 2 lines and truncates after the second line.
    • Replace the initial variant color type with a primary or secondary type that adds color to the heading.
    • Add a button icon that triggers an action in the optional button slot.
    • Change where the modeless dialog appears when triggered by a user. By default it appears in the center, but you can have the dialog appear in the top left or right, or bottom left or right.
    • Use keyboard shortcuts to move the dialog up, down, left, and right.
    Recommended Actions
    • Configurable panel title and tab headings.
    • Configurable tab order.
    • New Search tab that contains a search input field and cards for search results.
    • History moved from a tab to a new panel triggered from an iconic button.
    • Background color for hint text and an icon in the search results cards.
    Resizable panes Keyboard key combination to change the layout to only left pane, both panes, and only right pane.
    Select AI Indicator to signals to users when a form field uses AI recommendations and provides more information about AI functionality.
    Textarea AI Indicator to signal to users when a form field uses AI recommendations and to provide more information about AI functionality.
    Typeahead AI Indicator to signal to users when a form field uses AI recommendations and to provide more information about AI functionality.
    Typeahead-multi AI Indicator to signal to users when a form field uses AI recommendations and to provide more information about AI functionality.
    Table 5. Data visualization charts
    Chart Enhancement
    Bar visualization Pareto type of bar visualization. A Pareto chart is similar to the vertical bar chart, but it also includes a line graph. A Pareto chart displays vertical bars that represent individual values (frequency or cost) in descending order, and a line with data points that represent the cumulative total. The Pareto chart also marks the 80% point on the y-axis with a horizontal line, which the user can hide.
    Indicator scorecard visualization
    • Latest score bar that you can display for a graphical representation of the most recent indicator score. A blue bar for score of 1 or above, an orange bar for -1 and below, and no bar for 0 (zero) score. Score value displays upon hover.
    • Maximum number of groups can be specified (1-20).
    • Only breakdowns can be specified to be shown, and then you can also show all groups for the first breakdown.
    Time series visualization Date range picker that adds a date range drop-down that the user can use to change quickly the time range displayed to one of the predefined date ranges.

    Activation information

    Next Experience Components is a ServiceNow AI Platform feature that is active by default.

    Accessibility information

    The following accessibility enhancements were made to the Next Experience Components in the Washington DC release.
    Support for magnification software and screen readers

    The following Next Experience Components were updated to match programmatic labels to visual labels. This enhancement provides improved support for ZoomText (a type of magnification software) and other types of Assistive Technology (for example, screen readers).

    This enhancement supports users with cognitive and physical disabilities, such as low vision or mobility limitations, who use the ServiceNow platform.
    • Agent chat [sn-agent-chat]
    • Agent inbox [sn-agent-inbox]
    • Canvas tabs [sn-canvas-tabs]
    • Chat input [sn-chat-input]
    • Chat mention suggestion [sn-chat-mention-suggestion]
    • Checklist [now-checklist]
    • Date time calendar [now-date-time-calendar]
    • Document viewer [sn-document-viewer]
    • Drag and drop [sn-drag-and-drop]
    • Field select [sn-record-field-list-reorder-list]
    • List selector [sn-list-selector]
    • Notification setting popover content [notification-setting-popover-content]
    • Presence popover content [sn-presence-popover-content]
    Support for reflow

    The following components were updated to support reflow, which enables pages and content to be zoomed up to 400% through your browser settings without loss of content or functionality. Additionally, content can be enlarged without scrolling in two dimensions at a width equivalent to 320 CSS pixels or a height equivalent to 256 CSS pixels.

    This enhancement helps users with low vision or who have trouble seeing web content in a browser due to monitor size, device type, poor lighting, or other situations. Reflow can be turned off with a system property for instances, experiences, and pages. See Reflow for Configurable Workspace for details.

    • Action bar [now-record-common-uiactionbar]
    • Agent chat [sn-agent-chat]
    • Appointment calendar [now-appointment-calendar]
    • Bar chart [now-vis-bar]
    • Bubble visualization [now-vis-bubble-wrapper]
    • Calendar [now-calendar]
    • Carousel [sn-carousel]
    • Checklist [now-checklist]
    • Contact card [sn-contact-card]
    • Content tree [now-content-tree]
    • Contextual sidebar [now-contectual-sidebar]
    • Customer activity [sn-customer-activity]
    • Date range picker [now-date-range-picker]
    • Dial chart [now-vis-dial]
    • Document display [sn-document-display]
    • Document intelligence [sn-docintel-iframe]
    • Express list [sn-itom-aiops-list]
    • Filter [now-filter]
    • Form [now-record-form-selection-column-layout]
    • Gauge chart [now-vis-gauge]
    • Geomap visualization [now-vis-geomap-wrapper]
    • Heatmap visualization [now-vis-heatmap-wrapper]
    • ITOM Metric Explorer [sn-itom-metric-explorer]
    • Kanban board [now-visual-board]
    • Knowledge blocks [sn-knowledge-blocks-connected-uib]
    • Knowledge content [sn-knowledge-content]
    • List selector [sn-list-selector]
    • Pagination control [now-pagination]
    • Pie/donut visualization [now-vis-pie-wrapper]
    • Pivot table visualization [sn-multipivot]
    • Playbook activity viewer [now-playbook-activity-viewer]
    • Playbook experience [now-playbook-experience-connected]
    • Playbook modals [now-playbook-modals]
    • Playbook stage picker [now-playbook-stage-picker]
    • Service Health Dashboard New [sn-itom-service-dashboard]
    • Single score [now-score-advanced]
    • Timeseries visualization [now-vis-timeseries-wrapper]
    Support for speech-to-text
    The following Next Experience Components were updated to match visual labels to their accessible labels. If the accessible label is different from the visual label, speech-to-text software can't identify and activate the interactive element. Matched visual and accessible labels enable speech-to-text software, such as Dragon Naturally Speaking, to identify these components in the user interface rather than doing a slow grid-based navigation offered by the speech-to-text assistant technologies.
    • Dropdown [now-dropdown]
    • Input [now-input]
    • Record list [now-record-list]
    • Record number [now-record-number]
    • Text link [now-text-link]
    • Toggle [now-toggle]
    • Typeahead [now-typeahead]
    • Typeahead multi [now-typeahead-multi]
    General accessibility enhancements
    The following components were updated to meet internationally recognized accessibility standards.
    • Appointment calendar [now-appointment-calendar]
    • Calendar [now-calendar]
    • Checklist [now-checklist]
    • Contact card [sn-contact-card]
    • Content tree [now-content-tree]
    • Kanban [now-visual-board]
    • Playbook activity picker [now-playbook-activity-picker]
    • Radio group [now-radio-group]

    Related ServiceNow applications and features

    UI Builder
    UI Builder is a low-code tool that enables users to build pages for workspace and portal web-based experiences.
    Configurable Workspace UI
    Use components to build custom workspace experiences for agents who solve internal or external customer issues.