This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.96.
|Designing Intelligent Systems||A new Intelligence Patterns section explains the two main AI pillars: AI automation and AI augmentation. This replaces the former Application-Specific Patterns section.||Designing Intelligent Systems – Intelligence Patterns|
Layouts and Floorplans
|Object Page Floorplan||Content Area: You can now hide the title of a section or subsection if it contains a control with the same title (such as a table or chart). This avoids unnecessary redundancies.||Object Page Floorplan – Content Area|
|Wizard Floorplan||When to Use Wizard in Modal Dialog added.
Walkthrough Screen: Info on Next Step button added.
|Button||Developer hint added: Use
||Button – Button Shortcut|
|Combo Box||Components: You can add a Clear icon to the combo box.
Guidelines – Option List: Don’t disable items in the option list.
|Date Picker||Components: Add additional descriptive texts using
Behavior and Interaction: Info on Today button added.
|Date/Time Picker||Behavior and Interaction: Info on Today button added.
Guidelines: Add additional descriptive texts using
|Date Range Selection||Components: Add additional descriptive texts using
Behavior and Interaction: Info on Today button added.
|Date Range Selection|
|Dynamic Date Range New!||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).
|Dynamic Date Range|
|Formatted Text||You can use the following HTML tags to set the text direction explicitly:
|List||List 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).||List – Enabling/Disabling Actions|
|Mask Input||Components: Add additional descriptive texts using
||Mask Input – Components|
|Message Handling||New section on illustrated messages added.||Message Handling – Illustrated Messages|
||The coloring of the messaging icons has been inverted. The semantic color is now the fill color.
|Message Popover||Behavior and interaction: 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.
|Message Strip||Behavior and Interaction: A link can be added to the message strip.||Message Strip – Interactive Behavior|
|Multi-Combo Box||Behavior and Interaction:
|Multi-Input Field||Behavior and Interaction:
Guidelines: Alternatives for display mode added (bulleted list or a horizontal list with bullet separators).
|Planning Calendar||Components: Addition of relative views to view switch.||Planning Calendar – Components|
|Responsive Table||Layout: The user can now resize columns.
Behavior and Interaction:
|Select Dialog||If you are using the select dialog for filtering, and users can select all items as filters, provide an All option at the top of the list.||Select Dialog – Guidelines for List Options|
|Table Toolbar||Title: 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||Responsiveness: New section on preserving white space.||Text – White Spaces|
|Text Area||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.
Properties: Use the properties
|Timeline||Behavior and Interaction: The timeline supports click events on item level.||Timeline – Navigate|
|Title||Styles: A title can also be a link. Developer hint added.||Title – Styles|
|Toolbar Overview||Actions and Layout: You can place a title in the toolbar. The alignment of the title (left, center, right) depends on the theme.||Toolbar Overview – Actions and Layout|
|Tree||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).||Tree – Enabling/Disabling Actions|
|Upload Set New!||The upload set control replaces the deprecated Upload Collection control (as of SAPUI5 version 1.88).||Upload Set|
|Using Tooltips||Usage: Do not use tooltips for:
||Using Tooltips – When Not to Use|
|Views (Variant Management)||Manage Views Dialog: Section added on applying views automatically (Apply Automatically checkbox).||Views – Apply Views Automatically|
SAP Fiori Elements Framework
|Terminology for SAP Fiori Elements New!||To support you in communicating with application developers, this article covers:
||Terminology for SAP Fiori Elements|
|Worklist||Sort, Filter, Group, and Column Settings actions are now accessible via the Settings icon by default.||Worklist|
|Object Page – Header||
||Object Page – Header|
|Object Page – Content Area||
With SAP Fiori elements V4:
|Object Page – Content Area|
|Object Page – Footer Bar||
With SAP Fiori elements for OData V2, in the message popover, the messages are grouped by section and table so users can easily locate where they need to take action.
|Object Page – Footer Bar|
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:
|SAP Fiori Design Stencils||SAP icon font: Updated to version 4.12
SAP Business Suite icon font: Updated to version 1.075
|SAP Fiori Design Stencils – Overview|
|Design Stencils for Figma||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.
|Design Stencils for Figma|
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.