Intro

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

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

General Concepts

Action Placement

Additional guidance: Use only one emphasized button per toolbar and never mix emphasized and semantic buttons.

For more information, see Action Placement.

Wrapping and Truncating Text

Additional hint not to use tooltips to show the full text when a text is truncated.

For more information, see Wrapping and Truncating Text – Use of Truncation.

UI Elements

Updates for Multiple UI Elements

Button Style

Use only one emphasized button per toolbar and never mix emphasized and semantic buttons.

For more information, see:

Updates for Individual UI Elements

Form / Simple Form

  • A new Input Assistance section indicates how to offer system recommendations.
  • All images have been updated to reflect the new font “72” and the updated label color for display mode (#666666).

For more information, see Form / Simple Form.

Generic Tag  New!

The generic tag displays complementary information related to the current page, such as KPIs and situations.

For more information, see Generic Tag.

Input Field

For more information, see Input Field.

Multi-Combo Box

When the multi-combo box is used for filtering, the user can select or deselect all items using the keyboard shortcuts Ctrl+A / Ctrl+Shift+A.

For more information, see Multi-Combo Box in a Filter Scenario.

Multi-Input Field

The autocomplete behavior has been enhanced.

For more information, see Multi-Input Field.

Progress Indicator

You can now use the new “information” value state with the progress indicator.

For more information, see Progress Indicator – Styles.

Select

The select control can now display icons in front of each option. This can help users identify options more easily.

For more information, see Select – Option List.

Select Dialog

Correction: “Column list items” was removed as an option for the content area. Column list items are not supported for the select dialog.

For more information, see Select Dialog.

Single Planning Calendar  New!

The single planning calendar is a new control for scheduling. It displays the calendar of a single person or resource over a day, work week, or week. Users can view the details of appointments, create new appointments, and delete appointments.

Tile

The tile header and subtitle now support language-specific hyphenation.

For more information, see Tile.

Toolbar Overview

Additional information on the use of emphasized and semantic buttons.

For more information, see Toolbar Overview – Styles and Toolbar Overview – Order of Buttons.