What’s New in Guideline Version 2.02 (1.102)

Intro

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]

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.

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.	Theming
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: Extra-small (dot) illustration size Illustration styles (illustrative, simple) UX illustrations for creative purposes Creating Illustrations	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.