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.