Updated: October 19, 2022

What’s New in Guideline Version 2.06 (1.106)

Intro

This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 2.06 (SAPUI5 version 1.106).

Information
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.

General Patterns

Topic Update Topic Link
Form Field Validation Additional clarification on how validation is triggered:

  • Focusing out of a field or switching from one field to another manually or using the “Tab” key only validates the field that was previously in focus.
  • Enter triggers validation of the entire form or all forms in the object.
Form Field Validation

UI Elements

Topic Update Topic Link
Message Popover New section on messages relating to table content.

Updated guidance for the message button: The count on the button should indicate the number of messages of the most critical message type (rather than just errors).

Message Popover

SAP Fiori Elements Framework

Topic Update Topic Link
Object Page With SAP Fiori elements for OData V4, in draft-enabled applications, you can now turn off the default messages that warn users of an unsaved object or of unsaved changes to an existing object. The messages are displayed when the user attempts to navigate from the object page to another application.

When you turn off the messages, a draft version of the object is kept for the user to return to later.

Object Page – Overview
Object Page Header With SAP Fiori elements for OData V4, when text is displayed in a color to reflect the criticality of its value and also has a quickview, the text is now displayed underlined, as a link so users can see a quickview is available. Object Page – Header
Object Page Content Area With SAP Fiori elements for OData V2, for draft-enabled applications, users can now trigger the validation of a draft object by pressing the Enter key while their cursor is in a field on the object or subobject page. Object Page – Content Area
Table Features With SAP Fiori elements for OData V4, for the exceptional use cases where application users always work on a desktop with a mouse, tooltips can now be  enabled for the table column header. Table Features
Table Rows With SAP Fiori elements for OData V2, in an object page in create or edit mode, the empty rows added to the grid table and responsive table can now be populated with default values. Table Rows

Designer Toolkit

Topic Update Topic Link
SAP Fiori Design Stencils The SAP Business Suite icon font has been updated. Separate icon font versions are now available for the Quartz theme (version 1.079) and the Horizon theme (version 2.079). SAP Fiori Design Stencils
Design Stencils for Figma With this release we provide a first version of the SAP Fiori design stencils with the Horizon theme (Morning Horizon).

The stencils are based on SAPUI5 with examples from SAP S/4HANA. Separate Figma libraries are available for the cozy and compact formats:

  • S/4HANA Web UI Kit Compact
  • S/4HANA Web UI Kit Cozy

The Horizon theme will be used for all stencil updates from now on. However, you can still download the last Quartz Light stencil version 1.98 here.

Design Stencils for Figma

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.