What’s New

Updated: April 7, 2020
SAPUI5 Version 1.74

What’s New in Guideline Version 1.74

Intro

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

Foundation

Topic Update Topic Link

Quartz Dark Colors    New!

 SAP Quartz Dark is an additional SAP Fiori theme designed for low-light environments. Quartz Dark Colors

Theming

 SAP Quartz Dark theme was added. Theming

Layouts, Floorplans, and Frameworks

Topic Update Topic Link

Flexible Column Layout

 Multi-selection in master-detail scenarios: You can now use a “navigated” indicator to show which item is currently open in the master list. Flexible Column Layout – Navigation Indicator

List Report Floorplan

 Additional guidance on filters: Always provide default values for mandatory filter fields. List Report – Header Content – Filters

Responsive Spacing System
New!

 Explains how responsive padding and style sheet classes are used to control padding between elements that are common to all SAP Fiori interfaces. Responsive Spacing System

UI Elements

Topic Update Topic Link

Analytical Table

 Multi-selection plug-in: improved messaging when the number of items selected exceeds the limit.

Multi-selection in master-detail scenarios: You can now use a “navigated” indicator to show which item is currently open.

 Analytical Table – Multiple Selection

Analytical Table – Actions

Avatar

 sap.f.avatar moved to the sap.m.library. Avatar

Avatar Group   New!

 New control for visualizing a group of people, such as a team or project team. Avatar Group

Busy Dialog

 Components: You can also give the busy dialog a title if you need to provide more context. Busy Dialog – Components

Button

 This article now also covers the menu button (the former menu button article has been retired).

A new toolbar rule has been added to the menu button guidelines (button styling).

 Button

Calendar   New!

 

 New guideline article for the existing calendar control. Calendar

Color Palette

 You can now opt to display the user’s 5 most recent colors.

Existing options are also described in more detail (select the default color, open a color picker dialog).

 Color Palette – Components

Color Palette Popover

 You can now opt to display the user’s 5 most recent colors. Color Palette Popover – Components

Date Range Selection

 Added option for users to confirm the date using OK/Cancel buttons. Date Range Selection – Date Range Picker

Date/Time Picker

 Where relevant, offer an option to select a timezone. Date/Time Picker – Time Zone

Filter Bar

 Additional guidance for default values: Always provide default values for mandatory filter fields.

The section on filter/input controls has been revised. Always use the simplest input control that will work for your use case.

 Filter Bar

Grid Table

 Multi-selection plug-in: improved messaging when the number of items selected exceeds the limit.

Multi-selection in master-detail scenarios: You can now use a “navigated” indicator to show which item is currently open.

 Grid Table – Multiple Selection

Grid Table – Actions

List

 Swipe is now available in both directions and can reveal different actions per direction.

Multi-selection in master-detail scenarios: You can now use a “navigated” indicator to show which item is currently open.

 List

Message Popover

 Messages in the list are now grouped by the section and subsection on the UI.

The message button no longer shows a count. It’s now a semantic button that indicates the message type of the most critical message in the list.

 Message Popover

Message View

 Messages in the view are now grouped by the section and subsection on the UI. Message View

Responsive Table

 The responsive table now shows a specific “no data” text if a user has hidden all columns.

Multi-selection in master-detail scenarios: You can now use a “navigated” indicator to show which item is currently open.

Responsiveness: No matter how the table is configured, at least one column stays in tabular layout, even on narrow screens.

Added “highlight” indicator at line item level.

Additional hint on when not to use “merge duplicates”.

 Responsive Table

Standard List Item

 New Components section was added to the article. Standard List Item – Components

Time Picker

 Where relevant, offer an option to select a timezone. Time Picker – Time Zone

Tree

 Multi-selection in master-detail scenarios: You can now use a “navigated” indicator to show which item is currently open.

Added “highlight” indicator at line item level.

 Tree

Tree Table

 Multi-selection plug-in: improved messaging when the number of items selected exceeds the limit.

Multi-selection in master-detail scenarios: You can now use a “navigated” indicator to show which item is currently open.

 Tree Table

Value Help Dialog

 Updated guidance: The advanced search should be collapsed when the user opens the value help dialog. Value Help Dialog – Advanced Search

Services and Resources

Topic Update Topic Link

SAP Fiori Design Stencils

 The design stencils have been updated to reflect SAPUI5 version 1.74, and several new stencils have been added:

 SAP Fiori Design Stencils – Overview

Design Stencils for Sketch – Download

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.