- 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.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.112
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.112.
General Patterns
Topic | Update | Topic Link |
Forward | The Forward pattern has been deprecated as of guideline version 1.112.
If you want to allow users to forward an object to other users, use one of the standard Share functions, such as Send Email. SAP S/4HANA only: |
n/a |
Using Tooltips
Wrapping and Truncating Text |
SAP S/4HANA only: You can opt to offer tooltips for column headers in tables. |
Using Tooltips |
Layouts and Floorplans
Topic | Update | Topic Link |
Overview Page | Disclaimer added: integration cards can’t be used in the overview page floorplan. | Overview Page – Cards |
UI Elements
Topic | Update | Topic Link |
Grid Table Table Overview |
The grid table no longer supports grouping. | Grid Table |
Lightbox | If the image can’t be loaded, the lightbox control now shows an illustrated message instead of a message page. | Lightbox – Error Handling |
Message Page | The message page has been deprecated. Use an illustrated message instead. | n/a |
Side Panel | When to Use: Updated use cases:
Icon tabs: Icon tabs in the side panel don’t support semantic colors. Images were adapted accordingly. |
Side Panel |
Smart Table | SAP S/4HANA only: Tooltips are available by default for smart table column headers. |
Smart Table – Column Headers |
SAP Fiori Elements Framework
Topic | Update | Topic Link |
List Report Header | With SAP Fiori elements for OData V4, the Share menu includes Chat in Microsoft Teams, when the required settings have been made by the system administrators of SAP S/4HANA Cloud.
This menu item opens a separate window where users can directly share a link to a business application in the SAP S/4HANA Cloud system with co-workers. |
List Report Header (SAP Fiori Elements) |
Object Page Header | With SAP Fiori elements for OData V4:
This menu item opens a separate window where users can directly share a link to a business application in the SAP S/4HANA Cloud system with co-workers. With SAP Fiori elements for OData V2, when the user clicks an image in the avatar control, it expands in a lightbox control. |
Object Page Header (SAP Fiori Elements) |
Table Toolbar | Now, SAP Fiori elements for OData V4, like SAP Fiori elements for OData V2, allows you to place a copy action button in the table toolbar to let the user to create a new object with the same data as the current object. | Table Toolbar (SAP Fiori Elements) |
Table Features | Now SAP Fiori elements for OData V2, like SAP Fiori elements for OData V4, displays a message when users select the Select All checkbox in the header a responsive table: “Only the first n of the items you selected were added to the selection,” where “n” equals the number of items loaded on the interface. | Table Features (SAP Fiori Elements) |
Table Rows |
Now SAP Fiori elements for OData V4, like SAP Fiori elements for OData V2, allows you to turn off the automatic creation of empty rows for grid tables and responsive tables in the object page. This option is for tables whose maintenance mostly requires updating data in existing rows. If the users want to create additional rows, the Create button lets them enable the automatic creation of two empty rows. |
Table Rows (SAP Fiori Elements) |
Designer Toolkit
Topic | Update | Topic Link |
SAP Fiori Design Stencils | SAP icon font: Download files updated to version 5.04 (Horizon theme) and 4.16 (Quartz theme).
SAP Business Suite icon font: Download file updated to version 2.083 (Horizon theme) and 1.083 (Quartz theme). |
SAP Fiori Design Stencils |
Design Stencils for Figma | The stencil library has been updated to version 1.112.
Note: The stencil library may not fully mirror the implementation for a specific SAPUI5 version. |
Design Stencils for Figma – Download and Installation |
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.