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.

General Patterns

Topic	Update	Topic Link
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

Layouts

Topic	Update	Topic Link
Semantic Page	Behavior and Interaction: “Initial Focus” section added.	Semantic Page – Initial Focus

Floorplans

Topic

Update

Topic Link

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.

Wizard Floorplan

UI Elements

Topic	Update	Topic Link
Button	Developer hint added: Use `sap.ui.core.CommandExecution` for the button shortcut.	Button – Button Shortcut
Combo Box	Components: You can add a Clear 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.	Combo Box
Date Picker	Components: Add additional descriptive texts using `ariaDescribedBy`. Behavior and Interaction: Info on Today button added.	Date Picker
Date/Time Picker	Behavior and Interaction: Info on Today button added. Guidelines: Add additional descriptive texts using `ariaDescribedBy`.	Date/Time Picker
Date Range Selection	Components: Add additional descriptive texts using `ariaDescribedBy`. 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: `bdi`: Bidirectional isolation of a certain text `dir`: Explicit text direction of a certain text	Formatted Text
Input Field	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).	Input Field
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 `ariaDescribedBy`.	Mask Input – Components
Message Handling	New section on illustrated messages added.	Message Handling – Illustrated Messages
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:	Message Popover Message Strip Message View
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 Popover
Message Strip	Behavior and Interaction: A link can be added to the message strip.	Message Strip – Interactive Behavior
Multi-Combo Box	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.	Multi-Combo Box
Multi-Input Field	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).	Multi-Input Field
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 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.	Responsive Table
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).	Table Toolbar
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. 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.	Text Area
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: Static UI elements, such as labels Column headers in tables Button shortcuts	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

Topic	Update	Topic Link
Terminology for SAP Fiori Elements New!	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	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	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.	Object Page – Header
Object Page – Content Area	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.	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
Table Toolbar	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.	Table Toolbar
Table Rows	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.	Table Rows
List	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.	List

Designer Toolkit

Topic

Update

Topic Link

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.