What’s New

Updated: March 1, 2020
SAPUI5 Version 1.72

What’s New in Guideline Version 1.72

Intro

This article provides an overview of the updates to the SAP Fiori web design guidelines with the guideline version 1.72. For updates in releases 1.64 – 1.70, please switch to the respective version.

Updates for SAP Fiori 3

The SAP Fiori Design Guidelines now incorporate core elements of SAP Fiori 3: product-wide UX consistency rules, designing for intelligent systems, and the new Quartz Light theme.

Key SAP Fiori 3 updates include:

UX Consistency

Designing Intelligent Systems

Fully-Revised Design Stencils

We’ve completely revised the entire stencil set to reflect SAP Fiori 3. In addition to Axure RP stencils, we now also offer Sketch design stencils for Mac users.

All topics in the following sections have been updated to reflect the SAP Fiori 3 design and the Quartz Light theme:

  • Foundation
  • SAP Fiori Launchpad
  • Layouts and Floorplans

In upcoming releases, we will successively update the content for the General Concepts and UI Elements sections.

Foundation

Topic Update Topic Link

Content Density (Cozy and Compact)

Additional section on metrics, moved from the former Grid Layout article (now retired).

Measurements for cozy mode were updated.

 Content Density (Cozy and Compact)

Multi-Device Support

 Additional responsive grid section, moved from the former Grid Layout article (now retired). Multi-Device Support

SAP Fiori

 This article now also covers the overall SAP Fiori Design System and SAP Fiori 3. SAP Fiori

Layouts, Floorplans, and Frameworks

Topic Update Topic Link

Grid Layout

 This article has been retired. The content has been moved to the Content Density and Multi-Device Support articles.

UI Elements

Topic

Update

Topic Link

Analytical Table

 Multi-selection plug-in: Added recommended boundaries for setting selection limits. Analytical Table

Avatar

 The avatar can now be used to display non-interactive icons.

A new “placeholder” background color is available for decorative images in the content area.

You can now display images with a transparent background.

 Avatar

Button

 This article has been fully revised to reflect the UX consistency product standard and the different button styles in SAP Fiori 3. Button

Combo Box

 The value state message can now wrap longer texts. Combo Box – Styles

Formatted Text

The formatted text control allows you to format longer texts using HTML tags.

Note: This new article describes an existing control (available since SAPUI5 version 1.38).

 Formatted Text

Grid List

 Responsiveness: Additional info on layout options (grid box layout, responsive column layout, custom layout).

Drag and drop: Adapt the size of the drop indicator when dropping items from outside the grid list.

New section on designing for performance.

 Grid List

Grid Table

 Multi-selection plug-in: Added recommended boundaries for setting selection limits. Grid Table

List

 New section on designing for performance. List

Input Field

 The value state message can now wrap longer texts. Input Field

Responsive Table

 New section on designing for performance.

Column headers: Use controls that support wrapping and enable hyphenation.

 Responsive Table

Table Select Dialog

 New section on resizing and dragging. Table Select Dialog

Tree

 New section on designing for performance. Tree

Tree Table

 Multi-selection plug-in: Added recommended boundaries for setting selection limits. Tree Table

Services and Resources

Topic Update Topic Link

SAP Fiori Design Stencils

 The design stencils have been fully revised to reflect the SAP Fiori 3 design and the new Quartz Light theme. SAP Fiori Design Stencils – Overview

for Sketch

 Overview of stencils available for Sketch Design Stencils for Sketch – Download

for Axure RP

 Overview of stencils available for Axure RP Design Stencils for Axure RP – Download

About Guideline Updates

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

  • Updates to reflect new or changed UI controls available with the latest SAPUI5 release.
  • 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.