What’s New in Guideline Version 1.124

Intro

This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.124.

AI and Joule Design

Topic	Update	Topic Link
Recommendations	We are no longer using confidence levels for recommendations.	Recommendations

UI Elements – SAPUI5

Topic

Update

Topic Link

List

Planning Calendar

Single Planning Calendar

Tree

Drag and Drop: To comply with the new WCAG 2.2 accessibility standard, these controls must offer an alternative to the drag and drop feature.

List

Planning Calendar

Single Planning Calendar

Tree

Object Display Components

Spacing: If the display component is interactive, ensure minimum spacing of 24 x 24 px around the display component. This space should not overlap or intersect with the target areas of any other components. The minimum target size is required to comply with the WCAG 2.2 accessibility standard.

Object Display Components

UI Elements – Web Components

Topic	Update	Topic Link
Color Picker NEW	Guideline for the web component implementation of the color picker.	Color Picker
States NEW	We’ve added interaction design foundation guidelines for the following states: Component states Focus states Interaction states Selection states In addition, there’s a new article on how states can be combined. You can access all the guidelines on states via the States overview topic, including the existing Value States guideline.	States (overview) Component States Focus States Interaction States Selection States State Combinations
Text NEW	Guideline for the web component implementation of the text component. Note: The guideline describes the target design. The web component doesn’t yet offer all the specified features.	Text

SAP Fiori Elements Framework

Topic

Update

Topic Link

Table Features

A generic context menu is activated by default and cannot be deactivated for:

All table types with SAP Fiori elements for OData V2
All table types except the tree table, with SAP Fiori elements for OData V4

The generic context menu generally behaves like the standard context menu described in the articles for each table type.

The context of the menu can be a single row or multiple selected rows.

The following action types are available on the generic context menu:

All toolbar actions that become active only if rows are selected

Developers call them “bounded toolbar actions” or “context-dependent actions.”

The “Open in New Tab or Window” action

It allows up to 10 items to be opened in separate tabs or windows depending on the user’s browser settings.

Similar to the standard context menu, if a control inside a row is the “click target”, and the control also provides a context menu, the control menu “wins”.

Table Features (SAP Fiori Elements) – Generic Context Menu

Designer Toolkit

Topic	Update	Topic Link
Download Fonts	SAP icon font: Download files were updated to version 5.8 (Horizon theme) and 4.20 (Quartz theme).	Download Fonts
SAP S/4HANNA Web UI Kit	The SAP S/4HANA Web UI Kit is now published via the Figma Community. The kit includes both cozy and compact form factors.	SAP S/4HANA Web UI Kit

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 or SAP Web Components.
Ongoing updates on how to best apply the SAP Fiori design (such as patterns, 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.