What’s New

Updated: February 24, 2020
SAPUI5 Version 1.70

What’s New in Guideline Version 1.70

Intro

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

Layouts, Floorplans, and Frameworks

Layouts

Topic Update Topic Link

Object Page Floorplan

 Content Area – Blocks
If you need to show and hide blocks, use a Show More / Show Less toggle button (not a panel container).Global Edit
Don’t add navigation in edit mode if there’s no anchor bar in display mode and the header contains only a few editable fields.		 Object Page Floorplan

UI Elements

Topic Update Topic Link

Avatar

 Initials can now have 3 letters.

You can replace the icon avatar with a custom icon. Use this option to display the most suitable icon for your use case.

You can now set the placeholder background color to one of 10 accent colors, or let the system assign it randomly.

An optional border is now available.

 Avatar

Breadcrumb

 App teams can now define the style of the separator between the breadcrumb links. Breadcrumb – Styles

Date Picker

 The month and year views can now be used separately as a month picker and year picker.

An additional year ranges view has been added to help select a year more quickly.

You can now add a footer toolbar to the date picker. However, this is not recommended for most use cases.

 Date Picker
Grid List Only use grid list items for the grid list, and not other types of list item (such as the standard list item).

In multiple selection mode, users can now use Shift+click to select a range.

 Grid List

List

 In multiple selection mode, users can now use Shift+click to select a range. List – Selection Mode

Panel

 Usage: Panels are not allowed in the content area of an object page. Panel – Usage

Quick View

 You can now define a fallback icon that is displayed when the intended image or icon can’t be loaded. Quick View – Layout

Responsive Table

 In multiple selection mode, users can now use Shift+click to select a range. Responsive Table – Select

Search

 Section on responsiveness was updated to reflect improved support for tablet and phone. Search – Responsiveness

Select

 The dropdown area has now a maximum width of 600 px to avoid over-wide dropdowns.

Text within the option list can now wrap to multiple lines.

 Select – Width

Select Dialog

 You now have the option to let users resize and drag the dialog.

New feature for remembered selection: In single-select dialogs, clicking the remembered item again closes the dialog. The user no longer needs to click Cancel.

 Select Dialog

Single Planning Calendar

 The single planning calendar now offers a month view.

You now have the option to set working hours, hide non-working hours, and let users toggle between working hours and the full day view.

 Single Planning Calendar

Switch

 Article was reworked to reflect the new switch type that can be built with sap.m.text + sap.m.objectstatus.

Note that for localization reasons, text is not allowed inside the switch.

 Switch

Tree

 In multiple selection mode, users can now use Shift+click to select a range. Tree – Selection Modes

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.