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:

• Label
• Text
• Title

New “Information” Value State

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

• Combo Box
• Date Picker
• Date/Time Picker
• Date Range Selection
• Input Field
• Multi-Combo Box
• Multi-Input Field
• Radio Button
• Select
• Step Input
• Text Area
• Time Picker

Micro Charts – Improved Responsiveness

Responsiveness for the following micro charts has been improved:

• Area Micro Chart
• Column Micro Chart
• Line Micro Chart

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

• You can now connect shapes in a Gantt chart to represent the relationship between two activities.
  For more information, see Relationship Creation.
• A new setting for creating ad hoc lines was added to the settings for the global toolbar.

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

• The multi-combo box now supports a two-column layout and grouping in the option list.
• Overflow handling for tokens was added.
  For more information, see Multi-Combo Box – Reviewing Tokens.

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

Services and Resources

Design Stencils

• Minor updates to the Axure RP stencils to reflect release 1.60

For more information, see Design Stencils.