Intro

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

Foundation

Topic Update Topic Link

Iconography

Several resource and documentation links added. Iconography – Resources

Quartz Light Colors

Quartz Dark Colors

Semantic colors: “Information text” color added. Quartz Light – Semantic Colors
Quartz Dark – Semantic Colors

Typography

Headlines and font styles for UI controls:

  • Additional information on regular use of font weight.
  • KPI numbers or custom display text sizes may have individually-specified sizes and font weights depending on the control component or application context.
Typography – Headlines and Font Styles for UI Controls

General Concepts

Topic Update Topic Link

Formatting Numbers

Entire article reviewed and restructured. Some new examples.  Formatting Numbers

Manage Objects – Create, Edit, Delete

Article revised and simplified to provide:

  • A clearer overview of the differences between simple and complex objects.
  • Improved guidance on when to use which patterns for creating, editing, and deleting objects.

Further examples will be added in upcoming guideline versions.

Manage Objects: Create, Edit, Delete

SAP Fiori Launchpad – Notifications

Various smaller updates to reflect the latest behavior and interactions. Notifications

SAP Fiori Launchpad – Tile

Notation for tile dimensions adapted:

  • 1×1 tiles are now referred to as 2×2 tiles
  • 2×1 tiles are now 4×2 tiles
Tile

Layouts, Floorplans, & Frameworks

Floorplans

Topic Update Topic Link

Analytical List Page

New section on the initial app focus. Analytical List Page – Initial Focus

List Report Floorplan

New section on the initial app focus. List Report Floorplan – Initial Focus

Overview Page

New section on the initial app focus. Overview Page – Initial Focus

Wizard Floorplan

Anchor and Tab Bar Navigation: Addition of the tab mode as an alternative to the anchor bar.
New section on the initial app focus.
Wizard Floorplan

Worklist Floorplan

New section on the initial app focus. Worklist Floorplan – Initial Focus

UI Elements

Topic Update Topic Link

Generic Tag

The error state for KPIs pops up when the KPI cannot be properly displayed. Generic Tag – Generic Tag for KPIs

Progress Indicator

Text truncation: Long texts in the progress indicator truncate. The full text is available in an information popover. Progress Indicator – Text Truncation

Smart Link  New!

The smart link topic has been re-introduced to the guideline (last included for version 1.52). Content has been adapted to reflect the latest behavior. Smart Link

Standard List Item

Components: Section reworked, title information added.
Examples: Examples of standard list items added.
Standard List Item

Tree Table

Add Items: The shortcut CTRL+ENTER triggers the Add and Create buttons. Tree Table – Add Items

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.83 and 1.84.
  • 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.