What’s New in Guideline Version 1.96
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.96.
[internal_only]
Get Started
[/internal_only]
General Patterns
Layouts and Floorplans
Layouts
Floorplans
UI Elements
sap.ui.core.CommandExecution for the button shortcut.Components: You can add a
icon to the combo box.
Styles: The value state message can also be a formatted text.
Guidelines – Option List: Don’t disable items in the option list.
: Add additional descriptive texts using
ariaDescribedBy
.
Behavior and Interaction: Info on Today button added.
: Add additional descriptive texts using
ariaDescribedBy
.
Behavior and Interaction: Info on Today button added.
New standalone control that offers a choice of absolute and relative dates.
The dynamic date range control is available in addition to the existing dynamic date control, which is only available for the smart filter bar.
Note: The dynamic date range control currently has the SAPUI5 status “experimental” (first available with SAPUI5 version 1.92).
You can use the following HTML tags to set the text direction explicitly:
bdi: Bidirectional isolation of a certain textdir: Explicit text direction of a certain text
Properties:
- Value State Message: The value message text can also be a formatted text.
- Value Help: App teams can exchange the value help icon.
- Autocomplete Suggestions:
- You can set the maximum width of suggestion popover. As a result, the width of the suggestion popover can differ from the width of the input field.
- The maximum width of the suggestion box is always slightly smaller than the width of the screen or browser window.
- Tabular Autocomplete: “Pop-in” behavior is now supported for tabular suggestions.
- Clear: You can add a Clear icon to the input field.
- Accessibility: Added property “ariaDescribedBy” for providing additional information for assistive technologies (such as screen readers).
ariaDescribedBy.Messaging
- Message Popover
- Message Strip
- Message View
The coloring of the messaging icons has been inverted. The semantic color is now the fill color.
Old style:
New style:
: If the message popover/view contains only one message that also has message details, the message details page is displayed by default.
Components – List Subsection: New “Last Action” group for messages that result from the finalizing action, but are not related to a specific field.
Behavior and Interaction:
- Additional options for selecting values (keyboard shortcuts, optional Select All checkbox).
- Clear: You can add a Clear icon to the multi-combo box.
Styles: The value state message can also be a formatted text.
Guidelines:
- Option List: Don’t disable items in the option list.
- Width: Wrapping option added.
- Alternatives for Display Mode: If a form or table supports both display and edit modes, only use the multi-combo box in edit mode. In display mode, use a bulleted list or a horizontal list with bullet separators.
Behavior and Interaction:
- Adding Tokens: Property for setting width of suggestions dropdown added.
- Grouping: The suggestion list should have no more than 4 columns. “Pop-in” behavior is now supported for tabular suggestions.
- Clear: You can add a Clear icon to the multi-input field.
Styles: The value state message can also be a formatted text.
Guidelines: Alternatives for display mode added (bulleted list or a horizontal list with bullet separators).
: The user can now resize columns.
Behavior and Interaction:
- Select behavior – multiple selection: Clear All checkbox option added.
- New Column Header Level section, with details on how users can resize columns and how the other columns adapt.
Guidelines:
- Selection: When to use Select All and Clear All checkboxes in multiple selection mode.
- Columns – Best Practices: More details on the settings for column width (pixels/rem, percentage, auto layout) and the implications when a column is resized.
- Column Headers – Best Practices: How to handle wrapping and truncation in column headers.
: Hide the item counter if no items are shown.
Guidelines – Disabling Actions: Disable an action if the number of selected items doesn’t match the action (for example, disable Compare if only one item is selected).
Text Area Counter – Basic Interactions
: Correction: If the characters typed exceed the limit defined, the text area doesn’t change to a warning state by default. We still recommend displaying a warning state, but this needs to be implemented at app level.
Guidelines: Added: Consider using an expandable text as a display mode equivalent.
Properties: Use the properties ariaDescribedBy and ariaLabelledBy to provide additional information for assistive technologies.
Usage: Do not use tooltips for:
- Static UI elements, such as labels
- Column headers in tables
- Button shortcuts
SAP Fiori Elements Framework
To support you in communicating with application developers, this article covers:
- Development terms and what you need to understand about them
- Design terms that may not be meaningful to some application developers
- Terms that both application designers and developers use, but for different concepts
- When the header contains:
- Only a title and a subtitle, the Expand/Collapse and Pin/Unpin buttons are not displayed.
- At least one facet, the buttons are displayed. Also, the header is expanded on initial load and collapses on user scroll.
- On a mobile phone screen, the header optimizes the screen space when the user scrolls with a summary line instead of the collapsed header with SAP Fiori elements for OData V2.
With SAP Fiori elements V4:
- You can add an action next to the form header.
- The default length of the text entry area allows for four lines of text. You can enable growing mode and set a limit for the number of lines that display.
- Users can upload a file to an object page property and delete it.
- [internal_only]For the internal-only mass edit feature, by default, the Edit dialog contains all the currently visible fields. The application development team can now override the default and configure the fields to display in the Edit dialog.[/internal_only]
- In a list report table for the object creation action, you can enable default values to prefill the fields for the new object. This is available with with SAP Fiori elements for OData V2 for applications without draft handling, and with SAP Fiori elements for OData V4.
- In an object page table for the inline creation action, you can enable default values to prefill the fields for the new object with SAP Fiori elements for OData V4.
With SAP Fiori elements for OData V4, when you enable the multiple item selection, the Clear All checkbox is enabled by default.
Exceptionally, for a responsive table on an object page with anchor bar mode, the Select All checkbox is enabled by default.
With SAP Fiori elements for OData V2, in a list report with a list of standard or object list items:
- A chevron icon lets users navigate to the item.
- A navigation row indicator highlights the list item that the user has navigated to.
[internal_only]
Designer Toolkit
Figma libraries: Clarified how libraries are organized and
.
Style library: The library for Quartz Light colors has changed:
- Old library: Quartz Light Colors [FG Styles]
- New library: Quart Light Colors MASTER [Resource]
Please switch to the new library to always get the latest updates to the Quartz Light theme.
- Updated link to the Figma onboarding session. For easier consumption, this has now been broken down into several steps.
- Added link to the new modular Figma training deck for beginners and advanced users.
Swapping libraries: A new Swap Library section explains how to apply another library to all components. This can be useful if you want to update your components from an older stencil version to the latest version.
Related Links: Added links to Figma sessions offered through LinkedIn Learning.
The final Figma stencils for SAPUI5 version 1.96 will be announced in the SAP Fiori Design Newsletter. In the meantime, you can use the file Latest Fiori Web Stencils (Work in Progress) to get the latest updates.
[/internal_only][external_only]
Designer Toolkit
What’s new with stencil version 1.94
\
What’s New with stencil version 1.96
Swapping libraries: A new Swap Library section explains how to apply another library to all components. This can be useful if you want to update your components from an older stencil version to the latest version.
Related Links: Added links to Figma sessions offered through LinkedIn Learning.
[/external_only]
About Guideline Updates
With each new guideline version, we deliver two types of update:
- Updates to reflect new or changed UI controls available with SAPUI5.
- Ongoing updates on how to best apply the SAP Fiori design (such as overarching concepts, floorplans, and additional decision support). These updates are introduced with a given guideline version, but are not necessarily dependent on a specific SAPUI5 version.
Note: Our policy is to update only the latest guideline version. If you are working with an earlier SAPUI5 release, also consider checking out the most recent guideline version to get the latest general guidance.