This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.114.
Look, Feel, and Wording
|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
|Layouts and Floorplans||Clarification added: Never insert a whole floorplan into just the content area of the dynamic page layout.||Page Layouts and Floorplans|
|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|
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||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.
|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.
|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.
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
|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:
||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|
|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.