What’s New

Updated: February 28, 2023
SAPUI5 Version 1.110

What’s New in Guideline Version 1.110

Intro

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

Information
We are currently reviewing our design guideline landscape. During this period, some content in this guideline may not reflect the latest SAPUI5 control implementations. To see the latest implementation status, please see the SAPUI5 samples.

General

Topic Update Topic Link
Topic Versioning The topic versions offered in the dropdown list on the top right of each page are now aligned with the corresponding SAPUI5 versions again.

All interim guideline versions have been replaced by the correct SAPUI5 version (for example, guideline version 2.08 is now shown as 1.108).

 n/a

Look, Feel, and Wording

Topic Update Topic Link
Design Tokens  NEW New article that explains the design tokens SAP provides for color, typography, shadow, and metrics.

Tokens help maintain alignment and consistency in a design system and replace hard-coded values with self-explanatory names that are easy to map to UI components.

The article covers the different types of token, how they are structured, how they relate to theme variables, and how they are connected to style libraries.

 Design Tokens
Situation Handling Framework – UI Text Guidelines The text guidelines for Situation Handling have been fully revised and now cover configuration texts and end user texts for both the standard and extended frameworks. Situation Handling Framework – UI Text Guidelines

General Patterns

Topic Update Topic Link
Message Handling – Processing Multiple Items  NEW When multiple items are selected, it might not be possible to process all of the items at once.

This new guideline outlines the message patterns for the following scenarios:

  • Success: All items were processed successfully
  • Failure: No items can be processed / were processed
  • Partial Processing: Only some items can be processed. Others can’t be processed or require manual validation.
 Message Handling – Processing Multiple Items
Form Field Validation Users can now explicitly validate form content on phone and tablet devices using a Validate button in the footer bar. Validate has the same effect as pressing Enter on a desktop device. Form Field Validation – Behavior on “Enter”
Formatting Time Two points were added to the guidelines:

  • Display information in the user’s timezone.
  • Show the timezone only if required by the use case.
 Formatting Time – Guidelines

Layouts and Floorplans

Topic Update Topic Link
Object Page Floorplan A new message handling section outlines the different messaging options in display and edit modes. Object Page Floorplan – Message Handling
Wizard Floorplan For edit scenarios, you can either offer a wizard or let users edit the object page directly, depending on your use case. Wizard Floorplan – Usage

UI Elements

Topic Update Topic Link
Message Popover

Dialog

 You can now use a message popover within a dialog.
For example, if your dialog contains a scrollable form, a message popover can help visualize issues that are hidden when scrolling.		 Message Popover

Dialog – Messaging within a Dialog
Side Panel  NEW You can now use a side panel to offer additional content relating to the current page. Users open the content panel by clicking actions on the side bar. Side Panel

SAP Fiori Elements Framework

Topic Update Topic Link

List Report – Header

 With SAP Fiori elements for OData V4, you can place a Clear button on the filter bar. List Report – Header
Object Page – Overview With SAP Fiori elements for OData V4, when the object page is not found, the illustrated message “Empty state – Page not found” is displayed. Object Page – Overview
Object Page – Content Area On the object page, by default, variant management is turned on for each table and chart on the page at the control level. You can ask the application development team to turn it off.

With SAP Fiori elements for OData V4, in edit mode, below a text area, you can display the number of characters allowed in it. As the users enter text, that number decreases to show how many characters remain.

 Object Page – Content Area
Table Rows With SAP Fiori elements for OData V2, for object pages in edit mode, you can turn off the automatic creation of empty rows in tables.

Users can enable the automatic creation of empty rows with the Create button.

 Table Rows
Replacing Placeholder Text  NEW Both SAP Fiori elements for OData V2 and SAP Fiori elements for OData V4 define default or “placeholder” text for labels and messages, but it’s often too generic to be meaningful to users.

You can replace the text so users better understand it.

 Replacing Placeholder Text

Designer Toolkit

Topic Update Topic Link
SAP Fiori Design Stencils Updated SAP icon font for the Horizon and Quartz themes:

  • Horizon: 5.03
  • Quartz: 4.15

Updated SAP Business Suite icon font for the Horizon and Quartz themes:

  • Horizon: 2.081
  • Quartz: 1.081
 SAP Fiori Design Stencils
Design Stencils for Figma The stencil library has been updated to version 1.110.

Note: The stencil library may not fully mirror the implementation for a specific SAPUI5 version.

 Design Stencils for Figma – Download and Installation

About Guideline Updates

With each new guideline version, we deliver two types of update:

  • Updates to reflect new or changed UI controls available with SAPUI5.
  • 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.