What’s New in Guideline Version 1.114

Intro

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

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.

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 button, step 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.