Intro

This article provides an overview of the topics that have been added or changed with the guideline version 1.60.

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

  • Updates to reflect new or changed UI controls available with the corresponding SAPUI5 version (SAPUI5 Version 1.60).
  • 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.

Foundation

Colors

A new semantic color has been added for the “information” value state.

For more information, see Colors – Semantic Colors.

General Concepts

Export to Spreadsheet

The guideline for the triggering button has been enhanced. With the updated design, users can export the table with the default settings, or open a dialog to set specific export parameters.

This feature is relevant for the following UI elements:

  • Responsive Table
  • Analytical Table
  • Grid Table
  • Tree Table
  • Tree
  • List

For more information, see Export to Spreadsheet – Menu Button.

How to Use Semantic Colors

A section was added to explain the use of the new semantic color for “information”.

For more information, see How to Use Semantic Colors – Information.

Situation Handling

Article was revised to provide clearer guidance on the purpose and usage of the situations concept.

For more information, see Situation Handling.

UI Element States

A section was added to explain the use of the new value state for “information”.

For more information, see UI Element States.

Layouts, Floorplans, and Frameworks

Layouts

Dynamic Page Layout

  • We have replaced the term “visual indicator” with the term “expand/collapse header feature”.
  • The expand/collapse header feature is no longer mandatory (to allow for cases where the feature is obsolete).

For more information, see Dynamic Page Layout.

Flexible Column Layout

Behavior and Interaction: Updated guidance for apps that start with one or more full screen pages.

For more information, see Flexible Column Layout.

UI Elements

Updates for Multiple UI Elements

Hyphenation

The following controls now support language-specific hyphenation:

New “Information” Value State

You can now use the new “information” value state with the following controls:

Micro Charts – Improved Responsiveness

Responsiveness for the following micro charts has been improved:


Updates for Individual UI Elements

Color Palette  New!

Lets users pick between 2 and 15 predefined colors.

For more information, see Color Palette.

Color Palette Popover  New!

Lets users pick from between 2 and 15 predefined colors, or specify any other color using a color picker.

For more information, see Color Palette Popover.

Color Picker  New!

Lets users pick any color.

For more information, see Color Picker.

Color Picker Popover  New!

Offers a color picker within a popover.

For more information, see Color Picker Popover.

Column Micro Chart

Column micro charts now support bar labels.

For more information, see Column Micro Chart.

Filter Bar

A section was added on the options for saving new filter variants.

For more information, see Saving a New Variant.

Gantt Chart

Grid Table

  • Paste: Apps can now catch the browser paste event and get the clipboard data (for example, to add new rows).
    For more information, see Paste.

Icon Tab Bar

The guidance for the use of semantic colors was updated.

For more information, see Icon Tab Bar – Colors.

Line Micro Chart

  • The line micro chart now supports up to 3 lines.
  • You can now display a label for the threshold value.

For more information, see Line Micro Chart.

Multi-Combo Box

Multi-Input Field

Overflow handling for tokens was added.

For more information, see Multi-Input Field – Reviewing Tokens.

Responsive Table

  • Responsiveness can now be defined for the parent container, and not only based on the screen-width.
    For more information, see Responsiveness and Adaptiveness.
  • Paste: Apps can now catch the browser paste event and get the clipboard data (for example, to add new rows).
    For more information, see Paste.

Search

A default delay has been built into the live search to improve performance and enhance the user experience.

For more information, see Search – Types.