Updated: July 13, 2023

What’s New in Guideline Version 1.114


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

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.

Look, Feel, and Wording

Topic Update Topic Link
Design Tokens Added description of the token type, which specifies the type of value associated with a design token (for example, font-size or font-family). Design Tokens – Parts of a Token

Layouts and Floorplans

Topic Update Topic Link
Layouts and Floorplans Clarification added: Never insert a whole floorplan into just the content area of the dynamic page layout. Page Layouts and Floorplans

UI Elements

Topic Update Topic Link
Analytical Table Item states: Highlight a row with errors in all use cases – for example when the field is visible in the row in edit mode. Analytical Table – Item States
Date Range Selection

Alternative triggers: In addition to the date range input field, you can set a button or link to trigger the date range selection popover.

Date Range Selection – Alternative Triggers
Planning Calendar Users can select more than one appointment by pressing the Ctrl/Cmd key when they click the appointments. Planning Calendar
Quick View When a field is empty, the “–” character shows. Quick View
Responsive Table The responsive behavior is optional. If it is not used, the responsive table minimizes all visible columns until they are no longer readable. The visibility of columns also reflects the priority assigned to them. Responsive Table
Select Dialog

Don’t use the selection option (None) at the beginning of the list. If you need to indicate that no option has been selected or allow users to not choose an option, use a specific text instead, such as (Not Selected) or (No Values Selected).

Select Dialog – List Options
Single Planning Calendar

You can set the day that displays as the first day of the week in the week and month views. If no value is set, the default of the user’s locale is applied.

To make appointments easier to read, you can implement zoom behavior using the buttonstep input, or slider controls.

Single Planning Calendar
Table Toolbar The guideline for the ordering of the business actions has been updated. Their order is not “fixed”. Instead, you can order them according to their importance for the use case.

Exception: Always place the Paste button last in the business action group.

Table Toolbar
Time Picker The new Now icon button sets the time to the current time.

Users can open the time picker from a button or link, as well as from the time input field.

Time Picker
Tree Item states: Highlight a row with errors in all use cases – for example when the field is visible in the row in edit mode. Tree – Item States
Value Help Dialog On the Define Conditions tab, conditions can also be selected using a combo box.

  • For Boolean attributes, the operator dropdown is disabled by default and the combo box is used instead.
  • If the possible values for a condition are fixed, you can choose to use a combo box instead of the operator list.

When users copy and paste multiple values in the area for defining conditions and there is no vertical space for the conditions, vertical scrolling is added to the top of the dialog.

Value Help Dialog

SAP Fiori Elements Framework

Topic Update Topic Link
Object Page – Content Area With SAP Fiori elements for OData V4, views for each table and chart on the page are no longer enabled by default. Application developers can enable views for:

  • All the tables and charts on the page
  • Individual tables and charts
Object Page – Content Area – Views for Tables and Charts
Table Features You can freeze the first columns of an analytical table, grid table, or tree table so that they always remain visible when the users scroll the table horizontally. You specify the number of columns. Table Features – Freezing Columns
Table Rows With SAP Fiori elements for OData V4, for use cases where certain fields become relevant only after object creation, you can disable the fields in the empty rows so they are read-only at creation time and become editable afterwards. Table Rows – Empty Rows

Designer Toolkit

Topic Update Topic Link
Design Stencils for Figma The stencil library has been updated to version 1.114.

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.