- 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.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.90
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.90.
Look, Feel, and Wording
Topic | Update | Topic Link |
Theming | Additional resource links for applying custom themes using the UI theme designer. | Theming – Using the UI Theme Designer |
SAP Fiori Launchpad
Topic | Update | Topic Link |
SAP Fiori Launchpad Spaces | Tile lines: Info added
Edit mode: Actions Action Menu, Convert, and Move added |
SAP Fiori Launchpad Spaces |
SAP Fiori Launchpad “My Home” New! | The “My Home” space of the SAP Fiori launchpad serves as the entry point to personalized SAP Fiori apps on mobile and desktop devices. | SAP Fiori Launchpad “My Home” |
General Patterns
Topic | Update | Topic Link |
Complex Objects – Local Flow | Complex objects manage items on subpages. The local flow requires every subpage to be saved separately. | Complex Objects – Local Flow |
User Feedback | Guidelines have been restructured and enhanced. | User Feedback |
Layouts and Floorplans
Floorplans
Topic | Update | Topic Link |
Object Page Floorplan | New section Edit Actions in Display Mode (freestyle apps only).
Forms: Option for 6-column layout added. Loading behavior section moved to Behavior and Interaction. Loading for SAP Fiori Elements uses a skeleton template. |
Object Page Floorplan |
UI Elements
Topic | Update | Topic Link |
Analytical Table (ALV) | Multi-toggle / multi-selection plug-in: Added keyboard shortcut Ctrl+A for selecting/deselecting all items.
Column header: Added keyboard shortcuts for increasing/decreasing the width of a column (Shift+Right, Shift+Left) and for rearranging columns (Ctrl+Left, Ctrl+Right). Single selection: Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout. Multiple selection: Never disable the selection checkbox. Errors and warnings: Use a message strip to indicate table-related errors and warnings. Numbers and units: Amounts with currencies within a single column are now displayed in 72 monospace font. Key identifier: If the text and ID are in one column, you can sort/filter/group by either the text or the ID, but not both. More detailed guidance for adding items. Clarified guidelines for initial sorting. Add, remove, rearrange columns: Offer the shortcut Ctrl+Comma to open the view settings dialog. |
Analytical Table (ALV) |
Feed and Notes | Avatar is now used within feed and notes.
More/Less: Modify “MORE” / “LESS” links to “More / Less” to be consistent with other components. |
Feed and Notes |
Form / Simple Form | Empty state indicator: Enhanced guidance/example
Responsiveness / column layout: You can now use up to 6 columns for size XL (available since SAPUI5 version 1.88). This gives you greater flexibility when organizing the content for larger forms. |
Form / Simple Form |
Grid List | Items: Arrow keys can be used for navigation.
Errors and warnings: Use a message strip to indicate table-related errors and warnings. More detailed guidance on adding items. |
Grid List |
Grid Table | Multi-toggle / multi-selection plug-in: Added keyboard shortcut Ctrl+A for selecting/deselecting all items.
Column header: Added keyboard shortcuts for increasing/decreasing the width of a column (Shift+Right, Shift+Left) and for rearranging columns (Ctrl+Left, Ctrl+Right). Single selection: Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout. Multiple selection: Never disable the selection checkbox. Errors and warnings: Use a message strip to indicate table-related errors and warnings. Numbers and units: Amounts with currencies within a single column are now displayed in 72 monospace font. Key identifier: If the text and ID are in one column, you can sort/filter/group by either the text or the ID, but not both. More detailed guidance for adding items. Clarified guidelines for initial sorting. Add, remove, rearrange columns: Offer the shortcut Ctrl+Comma to open the view settings dialog. |
Grid Table |
Invisible Message | Busy indicator: Screen readers announce when busy indicators start and end. | Invisible Message |
List | Mode:
Errors and warnings: Use a message strip to indicate table-related errors and warnings. View settings: provide individual buttons for sort, filter, group. Follow the tips in this new section, especially for sorting and filtering. More detailed guidance for adding items. |
List |
Message Page | Content aligned with the guidelines for empty states and illustrated messages. | Message Page |
Object Display Components | Object status: New styling of message icons. | Object Display Components |
P13n Dialog | Filter settings: Enhanced info with additional examples. | P13n Dialog – Filter |
Scroll Container New! | The scroll container is an empty area that can be filled with content. Use it when you want to provide a content area that would otherwise be partially or completely hidden. | Scroll Container |
Smart Table | Column header: Sort ascending and sort descending are now two different buttons.
Errors and warnings: Use a message strip to indicate table-related errors and warnings. Amounts with currencies within a single column are now displayed in 72 monospace font. |
Smart Table |
Tree | Selection modes:
Errors and warnings: Use a message strip to indicate table-related errors and warnings. More detailed guidance for adding items. Clarified guidelines for initial sorting. |
Tree |
Tree Table | Column header: The width of the focused column header can be increased/decreased using Shift+Right/Left.
Errors and warnings: Use a message strip to indicate table-related errors and warnings. Amounts with currencies within a single column are now displayed in 72 monospace font. More detailed guidance for adding items. Clarified guidelines for initial sorting. |
Tree Table |
Value Help Dialog | New section on constant parameters. | Value Help Dialog – Constant Parameters |
SAP Fiori Elements Framework
Topic | Update | Topic Link |
Object Page Overview New! | New article on a feature relevant to the overall object page — a message where users confirm they want to navigate away from a draft without saving changes. | Object Page – Overview |
Form Page New! | New article on the form page, a variation on the object page that provides a page for data entry. | Form Page |
List New! | Support of a list with standard list items or object list items in the list report content area with SAP Fiori elements for OData V2. | List |
List Report
Analytical List Page Overview Page Headers on Large Screens |
Header is expanded on large screens when the app loads. | List Report Header |
List Report Header | With SAP Fiori elements for OData V4, the Share in Jam is enabled by default when integration with Jam is configured. | List Report Header |
Object Page Header | With SAP Fiori elements for OData V2, in a draft, the Share action is hidden.
With SAP Fiori elements for OData V4, the object page header now supports the address facet. |
Object Page Header |
Table Types | The object page supports the analytical table in display mode with SAP Fiori elements for OData V4. | Table Types |
Table Toolbar | With SAP Fiori elements for OData V4:
|
Table Toolbar |
Designer Toolkit
Topic | Update | Topic Link |
Sketch |
What’s New in Sketch Stencil Version 1.90 | Design Stencils for Sketch |
Axure RP |
What’s New in Axure RP Stencil Version 1.90 | Design Stencils for Axure RP |
Adobe XD |
What’s New in Adobe XD Stencil Version 1.90 | 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.
- 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.