- Latest 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.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.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.72
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with the guideline version 1.72. For updates in releases 1.64 – 1.70, please switch to the respective version.
Updates for SAP Fiori 3
The SAP Fiori Design Guidelines now incorporate core elements of SAP Fiori 3: product-wide UX consistency rules, designing for intelligent systems, and the new Quartz Light theme.
Key SAP Fiori 3 updates include:
UX Consistency
- Quartz Light Colors
- Theming
- Typography
- Iconography
- Action Placement
- Terminology for Common Actions
- New SAP Fiori Launchpad Shell Bar
- Launchpad Settings
Designing Intelligent Systems
Fully-Revised Design Stencils
We’ve completely revised the entire stencil set to reflect SAP Fiori 3. In addition to Axure RP stencils, we now also offer Sketch design stencils for Mac users.
All topics in the following sections have been updated to reflect the SAP Fiori 3 design and the Quartz Light theme:
- Foundation
- SAP Fiori Launchpad
- Layouts and Floorplans
In upcoming releases, we will successively update the content for the General Concepts and UI Elements sections.
Foundation
Topic | Update | Topic Link |
Content Density (Cozy and Compact) |
Additional section on metrics, moved from the former Grid Layout article (now retired). Measurements for cozy mode were updated. |
Content Density (Cozy and Compact) |
Multi-Device Support |
Additional responsive grid section, moved from the former Grid Layout article (now retired). | Multi-Device Support |
SAP Fiori
|
This article now also covers the overall SAP Fiori Design System and SAP Fiori 3. | SAP Fiori |
Layouts, Floorplans, and Frameworks
Topic | Update | Topic Link |
Grid Layout |
This article has been retired. The content has been moved to the Content Density and Multi-Device Support articles. |
UI Elements
Topic |
Update |
Topic Link |
Analytical Table |
Multi-selection plug-in: Added recommended boundaries for setting selection limits. | Analytical Table |
Avatar |
The avatar can now be used to display non-interactive icons.
A new “placeholder” background color is available for decorative images in the content area. You can now display images with a transparent background. |
Avatar |
Button |
This article has been fully revised to reflect the UX consistency product standard and the different button styles in SAP Fiori 3. | Button |
Combo Box |
The value state message can now wrap longer texts. | Combo Box – Styles |
Formatted Text |
The formatted text control allows you to format longer texts using HTML tags. Note: This new article describes an existing control (available since SAPUI5 version 1.38). |
Formatted Text |
Grid List |
Responsiveness: Additional info on layout options (grid box layout, responsive column layout, custom layout).
Drag and drop: Adapt the size of the drop indicator when dropping items from outside the grid list. New section on designing for performance. |
Grid List |
Grid Table |
Multi-selection plug-in: Added recommended boundaries for setting selection limits. | Grid Table |
List |
New section on designing for performance. | List |
Input Field |
The value state message can now wrap longer texts. | Input Field |
Responsive Table |
New section on designing for performance.
Column headers: Use controls that support wrapping and enable hyphenation. |
Responsive Table |
Table Select Dialog |
New section on resizing and dragging. | Table Select Dialog |
Tree |
New section on designing for performance. | Tree |
Tree Table |
Multi-selection plug-in: Added recommended boundaries for setting selection limits. | Tree Table |
Services and Resources
Topic | Update | Topic Link |
SAP Fiori Design Stencils |
The design stencils have been fully revised to reflect the SAP Fiori 3 design and the new Quartz Light theme. | SAP Fiori Design Stencils – Overview |
for Sketch |
Overview of stencils available for Sketch | Design Stencils for Sketch – Download |
for Axure RP |
Overview of stencils available for Axure RP | Design Stencils for Axure RP – Download |
About Guideline Updates
With each new guideline version, we deliver two types of update:
- Updates to reflect new or changed UI controls available with the latest SAPUI5 release.
- 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.