- 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.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.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.82
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.82.
Designing Intelligent Systems
Topic | Update | Topic Link |
Explainable AI |
Level 1 – Explanation Indicator: Examples added for explanation indicator styles.
Level 2 – Simple Explanation: Updated guidance and examples for the explanation popover. Level 3 – Extended Explanation: New section on the explanation page content. Responsiveness: Updated guidance on responsiveness for extended explanations. |
Explainable AI |
Situation Handling |
Guideline adapted to reflect the change in action label for closing a situation (formerly “Dismiss”, now “Close”). | Situation Handling |
General Concepts
Topic | Update | Topic Link |
Action Placement |
Enhanced examples for the header toolbar and footer toolbar. | Action Placement |
Layouts, Floorplans, & Frameworks
Layouts
Topic | Update | Topic Link |
Dynamic Page |
Dynamic Page Header: More info on the three interaction patterns added (snap on scroll, snap on click, and pin/unpin).
Responsiveness: Advice on text length in collapsed mode added. |
Dynamic Page |
Floorplans
Topic | Update | Topic Link |
List Report Floorplan |
New sections with examples and top tips. | List Report – Examples List Report – Top Tips |
UI Elements
Topic | Update | Topic Link |
Button | You can now display badges on buttons. | Button – Badge |
Date Picker | New info on highlighting special days. | Date Picker – Components |
Grid List | Add Items: Shortcut to trigger Add and Create buttons added. | Grid List – Add Items |
HTML New! |
The HTML control allows app teams to display rich text or embed freestyle HTML in their applications. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls. | HTML |
Icon Tab Bar |
Tabs as Process Steps: Warning concerning the overflow behavior of the tab bar from SAPUI5 version 1.80. The issue will be fixed soon.
Nested Tabs: To enable nested tabs, the maxNestingLevel can be adjusted. Changing the Order of Tabs: A visual indicator helps when repositioning tabs. |
Icon Tab Bar |
Input Field |
Tabular autocomplete: Column headers are now “sticky”. | Input Field – Tabular Autocomplete |
List |
Add Items: Shortcut to triggerAdd and Create buttons added. | List – Add Items |
Message Strip |
Accessibility: Screen reader notification text added. | Message Strip – Accessibility |
Multi-Input Field |
Grouping: Column headers are now “sticky”. | Multi-Input Field – Grouping |
Planning Calendar |
View switch: Now with additional 1 Month view (half-column style).
Appointments: Two appointment types were added (large and automatic). |
Planning Calendar – Components |
Responsive Table |
Actions: Outdated info removed. Shortcut CTRL+Enter to trigger Add and Create buttons added. | Responsive Table – Actions |
Smart Table New! |
New, fully-revised article:
|
Smart Table |
Time Picker |
Style: Description of the five basic value states (regular, information, success, warning, and error) added. | Time Picker |
Services and Resources
Topic | Update | Topic Link |
SAP Fiori Design Stencils |
Updated download files for:
|
SAP Fiori Design Stencils – Overview |
Sketch |
What’s New in Sketch Stencil Version 1.82 | Design Stencils for Sketch |
Axure RP |
What’s New in Axure RP Version 1.82 | Design Stencils for Axure RP |
Adobe XD |
What’s New in Adobe XD Version 1.82 | Design Stencils for Adobe XD |
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 versions 1.81 and 1.82.
- 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.