What’s New in Guideline Version 1.84

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

[internal_only]

General Concepts

Topic
Update
Topic Link

Barcode Scanning

The

Barcode Scanning

article has been deprecated.

SAP plans to remove the underlying SAP Fiori Client app from the Apple App Store and Google Play Store in the first quarter of 2021. For details, see Sunset of SAP Fiori Client.


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

Designs for flat tiles added (available in UI5, planned for SAP Fiori launchpad with release 2105).

Tile

[/internal_only][external_only]

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

[/external_only]

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

Services and Resources

[internal_only]

Topic
Update
Topic Link

SAP Fiori Client

The

SAP Fiori Client

article has been deprecated.

SAP plans to remove the SAP Fiori Client app from the Apple App Store and Google Play Store in the first quarter of 2021. For details, see Sunset of SAP Fiori Client.


SAP Fiori Design Stencils

To ensure greater consistency with the UI5 implementation, stencils are published with a time lag of one SAPUI5 release.

Updated stencils for version 1.84 will be announced in the SAP Fiori Design Newsletter.

SAP Fiori Design Stencils – Overview

Design Stencils for Sketch

Design Stencils for Axure RP

Design Stencils for Adobe XD

[/internal_only][external_only]

[/external_only]

About Guideline Updates

With each new guideline version, we deliver two types of update:

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.