Monday, 03 May 2021 13:21

Out Now – SAP Fiori Design Guidelines, Version 1.88

Written by Susanne Wilding
Rate this item
(0 votes)
“© 2020. SAP SE or an SAP affiliate company. All rights reserved.” “Used with permission of SAP SE”

The SAP Fiori design guidelines for web applications have been updated to version 1.88. In addition to the usual content updates, we’ve also revised the guideline navigation and added a new feedback function.

Illustrated messages

The long-anticipated illustrated message control is now available in SAPUI5. You can use it to vastly improve the user experience for empty states by combining a solution-oriented message text with a UX illustration and a call to action.


Illustrated messages for empty states

These three new topics explain why it’s important to design carefully for empty states, how UX illustrations are designed to work across different container and device sizes, and how illustrated messages are structured.

Illustration and message pairs are provided out of the box for standard scenarios (with more to come), so you won’t need to start from scratch. The best practices in the guidelines will help you to tailor them to your own scenarios.

Deleting objects

As part of a series of updates to the guidelines on object handling, there’s now a dedicated topic on deleting objects. It covers the interaction patterns when deletion is triggered from a list report or from an object page.

Expandable text

For responsive tables, lists, and forms, you can now show longer descriptions as an expandable text. To save space, the text truncates automatically after a given number of characters. Users can then expand the entry to see the full text, which appears either inline or in a popover.


Expandable text – collapsed


Expandable text – expanded inline


Expandable text – expanded as popover

Smart controls

With version 1.88, we added guidelines for the existing smart form and smart list controls, which are both supported for OData version 2.

  • The smart form can create read-only and editable views of a form using the OData annotations for the smart fields. It also provides a toolbar with a title.
  • The smart list is alternative approach for creating lists or trees.

Invisible messages

There’s now a dedicated guideline for the existing invisible message control.

Like the invisible text control, the invisible message control is designed to support users of assistive technologies. The invisible message provides information on dynamic changes to the UI that are otherwise only shown on

Continue reading here
Read 86 times

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.