Updated: September 2, 2022

What’s New in Guideline Version 2.02 (1.102)


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]

We are currently reviewing our design guideline landscape. During this period, some content in this guideline may not reflect the latest SAPUI5 control implementations. To see the latest implementation status, please see the SAPUI5 samples.

Look, Feel, and Wording

Topic Update Topic Link
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:

  • Headline style
    • 72 Bold for headlines
    • 72 Black for main titles
  • 72 font styles
    Additional font styles have been added to 72, such as 72 Semibold.
  • Line Height
    New section on when to use which line height.
Typography – Horizon
UX Illustrations Examples updated to reflect the Horizon theme.

The following sections were added:

UX Illustrations
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

General Patterns

Topic Update Topic Link
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.

Adapted terminology:

  • Term Save is reserved for the finalizing action (transferring the draft content to the saved version).
  • Info message in footer: Draft saved -> Draft updated
  • Negative path action in the footer bar when creating/editing an object: Cancel -> Discard
Draft Handling
Form Field Validation Behavior and interaction: New section on connected fields Form Field Validation – Connected Fields

UI Elements

Topic Update Topic Link
Message Popover Added paragraph on navigation to a sub-object or an external page. Message Popover – Navigation to the Relevant Field

SAP Fiori Elements Framework

Topic Update Topic Link
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:

  • In the list report with both versions of SAP Fiori elements.
  • In the object page with SAP Fiori elements for OData V4

With SAP Fiori elements for OData V2, a copy action button is now available.

Table Toolbar
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.

 Table Rows

Designer Toolkit

Topic Update Topic Link
SAP Fiori Design Stencils Font 72: Desktop and web versions updated.

SAP Icon Font: 3 different font sets are now available for download:

  • Version 5.02: New SAP icon font, based on the Horizon theme.
  • Version 4.14: Latest version of the existing SAP icon fonts, based on the Quartz theme. Cannot be installed alongside the Horizon icon font.
  • Version 4 preview: Latest Quartz icon font for use alongside the new Horizon icon font.

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.