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 and Adaptiveness

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.