- 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.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.68
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with the guideline version 1.68.
Foundation
Topic | Update | Topic Link |
Belize Colors | “Colors” article for Belize renamed to “Belize Colors”.
New color usage section. Updated resource links and corrections to some color values. |
Belize Colors |
Quartz Light Colors New! | New article on the Quartz Light theme introduced with Fiori 3. | Quartz Light Colors |
Theming | The article has been fully revised and now contains more background information, including:
|
Theming |
Typography | Language Stack and Fallback to System Font: Added the font stack theme parameter to show what fonts are actually used as fallback and to explain the subset version.
Headlines and Font Styles for UI Controls: |
Typography |
SAP Fiori Launchpad
Topic | Update | Topic Link |
Launchpad Shell Bar | Image updates to reflect the new Quartz Light theme. | Launchpad Shell Bar |
Layouts, Floorplans, and Frameworks
Layouts
Topic | Update | Topic Link |
Flexible Column Layout |
Correction: The flexible column layout is supported by Fiori elements only if draft handling is used. Scenarios without draft handling are not supported. | Flexible Column Layout – SAP Fiori Elements |
Floorplans
Topic | Update | Topic Link |
Analytical List Page
|
Visual Filter Bar: Additional guidance on choosing suitable filter bar elements based on the number of datasets and filter values. | Analytical List Page – Tips for Design Gates – Visual Filter Bar |
List Report Floorplan |
Enhanced guidelines for table/chart actions:
|
List Report Floorplan – Table/Chart Actions |
Worklist Floorplan |
Enhanced guidelines for table/chart actions (as for list report above) | Worklist Floorplan – Table Actions |
UI Elements
Topic | Update | Topic Link |
Analytical Table |
Additional options for multiple selection to work around existing limitations.
The icon for Add and Create actions has been replaced by a text button. |
Analytical Table |
Dialog |
Additional guidance in the Usage section: Don’t display floorplans inside dialogs. | Dialog |
Grid Table | Additional options for multiple selection to work around existing limitations.
The icon for Add and Create actions has been replaced by a text button. |
Grid Table |
Header Toolbar | The icon for Add and Create actions has been replaced by a text button. | Header Toolbar |
List |
The icon for Add and Create actions has been replaced by a text button. | List |
Responsive Table |
The icon for Add and Create actions has been replaced by a text button. | Responsive Table |
Select Dialog |
Text for the positive finalizing action was changed from OK to Select. | Select Dialog |
Standard List Item |
The standard list item control now supports wrapping for the title and description texts. | Standard List Item – Responsiveness |
Table Select Dialog |
Text for the positive finalizing action was changed from OK to Select. | Table Select Dialog |
Table Toolbar |
The icon for Add and Create actions has been replaced by a text button. | Table Toolbar |
Tree |
Additional options for multiple selection to work around existing limitations.
Updated guidelines for hierarchy maintenance (drag and drop, filtering, sorting). The icon for Add and Create actions has been replaced by a text button. |
Tree |
Tree Table |
Additional options for multiple selection to work around existing limitations.
Updated guidelines for hierarchy maintenance (drag and drop, filtering, sorting). The icon for Add and Create actions has been replaced by a text button. |
Tree Table |
View Settings Dialog |
Guidelines: Information added on giving users the option not to sort, filter, or group items. Use the standard texts: (Not Sorted) (Not Filtered) (Not Grouped) |
View Settings Dialog – Guidelines |
Visual Filter Bar |
Filter Title Area: Option to replace the value help with a select popover was added.
Guidelines – Chart Types: Recommended charts for different scenarios were added. Guidelines: Filter Selection and Scaling Factor sections were added. |
Visual Filter Bar |
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.