What’s New

Updated: February 24, 2020
SAPUI5 Version 1.68

What’s New in Guideline Version 1.68

Intro

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

Foundation

Topic Update Topic Link
Belize Colors “Colors” article for Belize renamed to “Belize Colors”.

New color usage section.

Updated resource links and corrections to some color values.

 Belize Colors
Quartz Light Colors  New! New article on the Quartz Light theme introduced with Fiori 3. Quartz Light Colors
Theming The article has been fully revised and now contains more background information, including:

  • Available themes and underlying control sets
  • SAP Fiori theming concept (quick theming, detailed control theming)
  • Theming resources
 Theming
Typography Language Stack and Fallback to System Font: Added the font stack theme parameter to show what fonts are actually used as fallback and to explain the subset version.

Headlines and Font Styles for UI Controls:
Header sizes were updated to reflect the latest typography specification.

 Typography

SAP Fiori Launchpad

Topic Update Topic Link
Launchpad Shell Bar Image updates to reflect the new Quartz Light theme. Launchpad Shell Bar

Layouts, Floorplans, and Frameworks

Layouts

Topic Update Topic Link

Flexible Column Layout

 Correction: The flexible column layout is supported by Fiori elements only if draft handling is used. Scenarios without draft handling are not supported. Flexible Column Layout – SAP Fiori Elements

Floorplans

Topic Update Topic Link

Analytical List Page

 Visual Filter Bar: Additional guidance on choosing suitable filter bar elements based on the number of datasets and filter values. Analytical List Page – Tips for Design Gates – Visual Filter Bar

List Report Floorplan

 Enhanced guidelines for table/chart actions:

  • When to enable/disable/hide actions on the table/chart toolbar.
  • Messaging when only some of the selected items can be processed.
  • Sort, group, and personalization.
 List Report Floorplan – Table/Chart Actions

Worklist Floorplan

 Enhanced guidelines for table/chart actions (as for list report above) Worklist Floorplan – Table Actions

UI Elements

Topic Update Topic Link

Analytical Table

 Additional options for multiple selection to work around existing limitations.

The   icon for Add and Create actions has been replaced by a text button.

 Analytical Table

Dialog

 Additional guidance in the Usage section: Don’t display floorplans inside dialogs. Dialog
Grid Table Additional options for multiple selection to work around existing limitations.

The   icon for Add and Create actions has been replaced by a text button.

 Grid Table
Header Toolbar The   icon for Add and Create actions has been replaced by a text button. Header Toolbar

List

 The   icon for Add and Create actions has been replaced by a text button. List

Responsive Table

 The   icon for Add and Create actions has been replaced by a text button. Responsive Table

Select Dialog

 Text for the positive finalizing action was changed from OK to Select. Select Dialog

Standard List Item

 The standard list item control now supports wrapping for the title and description texts. Standard List Item – Responsiveness

Table Select Dialog

 Text for the positive finalizing action was changed from OK to Select. Table Select Dialog

Table Toolbar

 The   icon for Add and Create actions has been replaced by a text button. Table Toolbar

Tree

 Additional options for multiple selection to work around existing limitations.

Updated guidelines for hierarchy maintenance (drag and drop, filtering, sorting).

The   icon for Add and Create actions has been replaced by a text button.

  Tree

Tree Table

 Additional options for multiple selection to work around existing limitations.

Updated guidelines for hierarchy maintenance (drag and drop, filtering, sorting).

The   icon for Add and Create actions has been replaced by a text button.

  Tree Table

View Settings Dialog

 Guidelines: Information added on giving users the option not to sort, filter, or group items. Use the standard texts:
(Not Sorted)
(Not Filtered)
(Not Grouped)		 View Settings Dialog – Guidelines

Visual Filter Bar

 Filter Title Area: Option to replace the value help with a select popover was added.

Guidelines – Chart Types: Recommended charts for different scenarios were added.

Guidelines: Filter Selection and Scaling Factor sections were added.

 Visual Filter Bar

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.