- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
What’s New in Guideline Version 1.120
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.120.
Look, Feel, and Wording
Topic | Update | Topic Link |
Situation Handling Framework – UI Text Guidelines | Section on naming for templates and triggers updated. | Situation Handling Framework – UI Text Guidelines |
Designing Intelligent Systems
Topic | Update | Topic Link |
NEW Designing for Generative AI | Introduction to application design for generative AI, including:
|
Designing for Generative AI |
NEW Design Principles for Generative AI | Building on existing SAP guidelines, we’ve identified five design principles for generative AI. Each principle is translated into key features and behaviors we can build into our apps. | Design Principles for Generative AI |
NEW Building Trust in Generative AI | Outlines the factors that influence user trust in AI-generated content and the steps we can take to build trust into our products. | Building Trust in Generative AI |
NEW AI Design Glossary | Explains key AI terms in the following areas:
|
AI Design Glossary |
NEW Helpful Links on SAP AI | A curated collection of links to get you ramped up on AI design at SAP. | Helpful Links on SAP AI |
NEW Get In Touch With Us | Share your feedback with SAP’s AI design team and join our SAP User Research Panel. | Get In Touch With Us |
General Patterns
Topic | Update | Topic Link |
Content Density (Cozy and Compact) |
Guidelines added for hybrid devices. | Content Density – Guidelines |
Draft Handling | While the users are changing a business entity, the draft is saved every 20 seconds.
To incorporate changes into the active business entity or saved version, the user still needs to click the Save button. |
Draft Handling |
Export to Spreadsheet | The Export As dialog now contains select controls for the:
For the cloud destination, the primary action label in the dialog is “Export To…” and opens a cloud file browser where users choose the target location for the exported file through a remote repository. |
Export to Spreadsheet – Export As Dialog |
Message Handling – Processing Multiple Items | After partial processing, when one or more items have been excluded from processing and one or more backend errors have occurred during processing, the summary message view dialog includes:
|
Message Handling – Processing Multiple Items – Partial Processing |
UI Elements – SAPUI5
Topic | Update | Topic Link |
Input Field | Don’t use the “value help only” option. This can result in inconsistencies for screen reader users. | Input Field – Value Help |
Message Toast | For accessibility purposes, the user can keep the message toast onscreen with the following keyboard shortcuts:
|
Message Toast – Behavior and Interaction – Choreography |
UI Elements – SAP Web Components
Interaction Design Foundations
Topic | Update | Topic Link |
Value States NEW | Foundation guideline for all components. | Value States |
Wrapping and Truncation NEW | Foundation guideline for all components.
|
Wrapping and Truncation |
Components
Topic | Update | Topic Link |
Bar NEW | New web component guideline. | Bar |
Breadcrumbs NEW | New web component guideline. | Breadcrumbs |
Busy Indicator | Don’t display a busy indicator text if the busy indicator is used where space is limited. | Busy Indicator – Anatomy |
Color Palette NEW | New web component guideline. | Color Palette |
Color Palette Popover NEW | New web component guideline. | Color Palette Popover |
Date Range Picker NEW | New web component guideline. | Date Range Picker |
Date/Time Picker | New web component guideline. | Date/Time Picker |
Icon NEW | New web component guideline. | Icon |
Illustrated Message NEW |
New web component guideline. |
Illustrated Message |
Menu Button NEW |
New web component guideline for the menu button. |
Menu Button |
Rating Indicator NEW |
New web component guideline. |
Rating Indicator |
Segmented Button |
Added variants and behavior for selection modes:
Updated interaction design specification (version 1.1) |
Segmented Button |
Text Area NEW | New web component guideline. | Text Area |
Tree NEW | New web component guideline. | Tree |
Toolbar NEW | New web component guideline. | Toolbar |
SAP Fiori Elements Framework
Topic | Update | Topic Link |
List Report Content Area | For both the simple content layout and multiple view layout, the creation of cards for the Insights section of My Home in SAP S/4HANA Cloud is supported, when My Home in SAP S/4HANA Cloud has been enabled. The Add Card to Insights option automatically appears in the overflow toolbar of the table in list report. You can turn off this feature.
With SAP Fiori elements for OData V4 these restrictions apply for the Insights cards:
|
List Report Content Area (SAP Fiori Elements) |
List Report Header | With Save as Tile, users can now save a dynamic tile for results shown after they have filtered for a relative date value, such as today or this year. | List Report Header (SAP Fiori Elements) – Save as Tile |
Table Features | With SAP Fiori elements for OData V4, you can ask the application developers to ensure the width of table columns is adjusted to the contents of both the column and the column header. | Table Features (SAP Fiori Elements) – Column Width |
Table Rows | With both versions of SAP Fiori elements:
With SAP Fiori elements for OData V2, a draft for a once empty row is saved after the users have shifted their focus away from the input field in the row and an interval of 20 seconds has passed. With SAP Fiori elements for OData V4, for tables in object pages, the multi-input fields are now editable. |
Table Rows (SAP Fiori Elements) |
Table Toolbar | With both versions of SAP Fiori elements:
You can ask the application development team to turn the option off.
Users can select a range of cells with key combinations, or with their mouse by clicking and holding the mouse button while they select the cells. With SAP Fiori elements for OData V2, by default, for all table types, when at least one filter is set, an infobar is displayed to summarize the filter criteria applied to the table data. |
Table Toolbar (SAP Fiori Elements) |
Designer Toolkit
Topic | Update | Topic Link |
Designer Toolkit | We’ve restructured/renamed the following topics in the Designer Toolkit section of the navigation menu:
|
Download Fonts |
Download Fonts | Font 72: The font files have been extended to include Cyrillic characters for Bulgarian.
SAP icon font: Download files were updated to version 5.7 (Horizon theme) and 4.19 (Quartz theme). |
Download Fonts |
SAP S/4HANA Web UI Kit | New UI Kit version (02/2024) | 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 new/updated design guidelines for SAP web components.
- 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.