Vancouver |
Table 8. Components
| Component |
Enhancements |
| Appointment calendar |
In day view, you can do the following:
- Change the slot grid from the default 3 columns to 1 or 2 columns.
- Customize appointment slot titles using alpha numerics and symbols.
|
| Avatar |
Display any existing icon as an avatar icon, including icon component custom images. |
| Checkbox |
- To support denser content, consider configuring labels to align to the left of the component.
- Labels wrap based on the container size.
|
| Dropdown list |
Option to add a small or medium size image to a list item. |
| Filter |
The Filter component Includes the following features:
- Single select and multi-select pill drop-down lists with or without predefined values
- Vertical or horizontal radio buttons with predefined values
- True/false data filters
- Typeahead functionality for multi-select pill drop-down lists
- Radio buttons for single-select pill drop-down lists
|
| Input |
- The Text align property enables users to configure text alignment of placeholder and input text. The text alignment options are Start, Center, and End.
Note: Input URL, Input Phone, and Input
Password support this enhancement. However, avoid configuring text alignment when a decorator is present, such as the phone icon.
- To support denser content, consider configuring labels to align to the left of the component.
- Labels wrap based on the container size.
|
| Input URL |
The align property enables users to configure text alignment of placeholder and input text. The text alignment options are Start, Center, and End. Note: Input URL, Input Phone, and Input Password
support this enhancement. However, avoid configuring text alignment when a decorator is present, such as the phone icon. |
| Progress bar |
The Progress bar animates at different speeds when changing values. The bar starts slowly, speeds up, and then slows down again as it approaches the new value. This animation is disabled if the user has selected the
reduced motion preference on the operating system. |
| Radio buttons |
- To support denser content, consider configuring labels to align to the left of the component.
- Labels wrap based on the container size.
|
| Recommended Actions |
New properties and events have been added to the UI Builder configuration. New properties include the ability for users to group recommendation cards, manage carousel items, and define card dimensions. |
| Select |
- To support denser content, consider configuring labels to align to the left of the component.
- Labels wrap based on the container size.
Auto-complete is activated when a user types into a field and the initial characters match one or more items in the list. Two properties were added for the Vancouver release:
- readonly: Option to make the field read-only to prevent users from modifying the value.
- fieldLayout: Determines whether the labels, field, and slotted content in the Select component are arranged vertically or horizontally.
|
| Split button |
- Automatically inherits the width of its parent container. This behavior is controlled by a property in the CSS. There is no change in functionality.
- The showPresencePattern property is deprecated.
- A flag is added to disable the button and prevent user click interactions.
|
| Tabs |
Properties are now available to do the following:
- Hide the tabs divider
- Define ARIA attributes
Option selected from the overflow tab menu will replace the last tab in the tab bar. |
| Textarea |
- The disableMaxHeight property is added to the Config panel in UI Builder for the component.
- The autoresizeRowsLimit property enables you to configure the maximum number of rows allowed for the component when the autoreresize property is set to
true.
- Labels can be aligned to the left of the component to support denser content.
- Labels wrap based on the container size.
|
| Toggle |
- To support denser content, consider configuring labels to align to the left of the component.
- Labels wrap based on the container size.
|
| Typeahead |
- To support denser content, consider configuring labels to align to the left of the component.
- Labels wrap based on the container size.
|
| Typeahead multi |
- Users can use the Tab key to move to an existing input pill and deselect it using the Backspace or Delete key.
- To support denser content, consider configuring labels to align to the left of the component.
- Labels wrap based on the container size.
|
Table 9. Page Templates
| Template |
Description |
| Record |
- A Record History related list displays a list of changes that have been made to a record.
- The Contextual Sidebar component has been replaced by the Tabs component. However, the general behavior and appearance remain the same.
|
|
Washington DC |
Table 10. 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 11. 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. |
|
Xanadu |
Table 12. Components
| Component |
Enhancements |
| Appointment calendar |
Reflow support in higher browser zoom levels of up to 400% in day and week view. |
| Badge |
Option to enable partial number counts and additional characters, including the plus "+" symbol. |
| Breadcrumbs |
Improved breadcrumb orientation experience with option to enable overflow menu. |
| Calendar |
- Extra content slot in the header to add buttons.
- Column width control in the timeline view.
|
| Checkbox |
Customizable slot after the information button for inserting additional elements. |
| Checklist |
- Additional configuration options like Disabled, Read Only, and Invalid.
- Font size customization.
- Option to configure mandatory field indicator.
- Error notification appears when the user attempts to submit a form with an incomplete required field.
|
| Contextual sidebar |
Improved configuration with vertical tabs structure. |
| Date-time |
- Time zone displays for users.
- Horizontal layout option for date-time input field.
|
| Email composer |
- Improved draft management experience with email footer and side panel action buttons.
- Improved drafting experience with larger compose area and enhancements to save vertical space.
- Option to enable auto-load of most recent draft.
- Option to suppress "Send email" button.
- Support for international characters in email IDs.
|
| Email composer (mini) |
- Improved draft management experience with email footer and side panel action buttons.
- Improved drafting experience with larger compose area and enhancements to save vertical space.
- Option to enable auto-load of most recent draft.
- Option to suppress "Send email" button.
- Support for international characters in email IDs.
|
| Form |
Support for 2 or more forms on a page. |
| Highlighted value |
Improved display of long text with text wrapping functionality. |
| Input |
- Customizable slot after the information button for inserting additional elements.
- Added a caret slot that follows the user's text cursor.
|
| Node map |
In the hierarchical layout:
- Movable nodes in the map.
- Customizable control panel.
- Customizable node connections in new nodes.
- Improved reflow in higher browser zoom levels.
- Support for pausing node map layout refresh (re-layout).
|
| Radio button |
Customizable slot after the information button for inserting additional elements. |
| Related items |
- Show or hide the heading.
- Configure the background color.
- Refresh a specific list along with all other lists in the container.
|
| Select |
Customizable slot after the information button for inserting additional elements. |
| Text area |
- Customizable slot after the information button for inserting additional elements.
- Added a caret slot that follows the user's text cursor.
|
| Toggle |
Customizable slot after the information button for inserting additional elements. |
| Typeahead |
Customizable slot after the information button for inserting additional elements. |
| Typeahead multi |
Customizable slot after the information button for inserting additional elements. |
|
Yokohama |
Table 13. 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 14. 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 15. 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 16. Bundles
| Bundle |
Enhancement |
| Record list |
- Condition builder available in the list header
- If live list is enabled, infinite scrolling is enabled by default
|
|