Intro

This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.80.

General – Icon Updates

The following icon updates are being implemented across all standard SAP Fiori controls:

Remove/Close Icon

The Remove/Close icon has been updated to comply with SAP’s Product Standard for UX Consistency.

Use Old Icon New Icon
Remove/Close Remove/Close - Old Icon Remove/Close - New Icon

Message Icons

In response to user feedback, we have also updated some of the message icons.

Use Old Icon New Icon
Message Icon – Error Error Message - Old Icon Error Message - New Icon
Message Icon – Success Success Message - Old Icon Success Message - New Icon
Message Icon – Confirmation Confirmation Message - Old Icon Confirmation Message - New Icon
Message Icon – Info Info Message - Old Icon Info Message - New Icon

Note: The message icon  for warnings is still the same.


Warning
During the transition, some controls/guidelines/stencils may not yet be showing the latest icons.

General Concepts

Topic Update Topic Link

Mass Editing

We recommend using specific texts wherever possible for the mass editing variants:

Mass Editing

Layouts, Floorplans, & Frameworks

Layouts

Topic Update Topic Link

Dynamic Page Layout

Desktop-centric tables: A new developer hint was added for the property fitContent. Dynamic Page Layout

Floorplans

Topic Update Topic Link

Object Page Floorplan

Form Facet: Label-text pair was added.

Create and Edit Subobjects: New guidance on creating subobjects inline.

Forms: Information on how to use the UI.Importance annotation was added.

Object Page Floorplan

Tool Development

Topic Update Topic Link

Side Navigation

The article has been fully restructured for easier understanding. Side Navigation

UI Elements

Topic Update Topic Link

Button

New feature added for showing the keyboard shortcut for an action as a tooltip. Button Shortcut

Label

Label Placement section added. Label Placement

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 versions 1.79 and 1.80.
  • 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.