This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 2.02 (SAPUI5 version 1.102).
internal_only]Versions 2.04 and 2.06 will be delivered together in October.[/internal_only]
Look, Feel, and Wording
|Iconography – Horizon New!||Icon set for the new Horizon theme.||Iconography – Horizon|
|Morning Horizon Colors New!||Colors for the new Horizon theme.||Morning Horizon Colors|
|Evening Horizon Colors New!||Horizon theme for working in low-light environments.||Evening Horizon Colors|
|Theming||Horizon theme added.
Section on detailed theming updated.
|Typography – Horizon New!||SAP’s 72 font has been updated for the Horizon theme. This is reflected in a dedicated Horizon typography article with additional/updated sections:||Typography – Horizon|
|UX Illustrations||Examples updated to reflect the Horizon theme.
The following sections were added:
|UI Text Guidelines for SAP Fiori Apps||Combined date/time fields: Don’t use separate fields for the date and time in SAP S/4HANA apps. Use the date/time timestamp instead.||UI Text Guidelines for SAP Fiori Apps – Date/Time Fields|
|Draft Handling||Updated decision dialog when the user navigates away from the edit page after making changes. The dialog offers 3 options: create/save the object, keep the draft, or discard the draft.
Updated draft/saved version switch.
|Form Field Validation||Behavior and interaction: New section on connected fields||Form Field Validation – Connected Fields|
SAP Fiori Elements Framework
|List Report Header||List Report Header|
|Object Page Overview||Object Page Overview|
|Object Page Header||
With SAP Fiori elements for OData V2, when a form field contains no value, it displays the empty state indicator (–).
|Object Page Header|
|Object Page Footer||In applications with draft handling, in edit mode, the Discard Draft action button is displayed by default. It lets users leave the object page record without saving the changes they’ve made in a draft version of the object.
Custom keyboard shortcuts are available for application-specific actions.
|Object Page Footer|
|Table Toolbar||Custom keyboard shortcuts are available for application-specific actions.
In applications with draft handling, the mass edit is available in responsive and grid tables:
With SAP Fiori elements for OData V2, a copy action button is now available.
|Table Features||With SAP Fiori elements for OData V2, in the list report, analytical page, and object page, you can set a custom message to display in the message strip above the table.|
|Table Rows||Responsive and grid tables in the object page can automatically display two empty rows in the create and edit modes. The user can enter data in the rows for subobjects.
The two empty rows let the user choose between entering data for one column at a time or for one row at a time.
When the user enters data in a field in one row and moves the focus away, a new row is displayed automatically.
You can enable the feature at the table level in draft-enabled applications.
|SAP Fiori Design Stencils||Font 72: Desktop and web versions updated.
SAP Icon Font: 3 different font sets are now available for download:
SAP Business Suite icon font: Updated to version 1.078
|SAP Fiori Design Stencils|
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.