Intro

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

Look, Feel, and Wording

Topic Update Topic Link
UI Text Guidelines for SAP Fiori Clarified use cases for quotes in messages and descriptions. UI Text Guidelines for SAP Fiori Apps – Quotation Marks

General Patterns

Topic Update Topic Link
Complex Objects – Global Flow (Create, Edit) Topic reworked and aligned with the guideline for the local flow. Complex Objects – Global Flow (Create, Edit)
Complex Objects – Local Flow (Create, Edit) Global vs. Local Flow section added. Complex Objects – Local Flow (Create, Edit)
Mass Edit Simplified labels for presets:

< Keep values > : keep existing choices
< Clear values > : clear all entries
< Leave blank > : leave fields empty (only appears if none of the selected items have existing values)

Mass Edit
Navigation Various updates throughout the article. Navigation

UI Elements

Topic Update Topic Link
Calendar Card  New! The calendar card is an interactive calendar with a chronological list of appointments for the selected day. It is a type of integration card. Calendar Card
Calendar Date Interval New When to Use section.

Components section added.

Behavior and interaction: Section on navigation by year interval added.

Examples added.

Calendar Date Interval
Card  New! Cards can be used to launch an app or navigate to page content.

Note: This article relates to the SAPUI5 integration cards, which are technically distinct from the cards embedded in the overview page. Integration cards are not yet available for SAP S/4HANA.

Card
Chart Toolbar Content has been rearranged/enhanced to align with the other toolbar guidelines. Chart Toolbar
Color Palette Behavior and Interaction: info on the liveChange event added. Color Palette – Behavior and Interaction
Color Palette Popover Behavior and Interaction: info on the liveChange event added. Color Palette Popover – Behavior and Interaction
Expandable Text Behavior and Interaction: info on Empty State added. Expandable Text – Empty State 
Export to Spreadsheet The export now supports a percentage format.

For date/time fields, app teams can now opt to export the local time (from the SAP Fiori launchpad) instead of UTC.

Export to Spreadsheet – Content Formatting
Icon Tab Bar Responsiveness: The icon tab bar now supports a second overflow mode with buttons on both sides of the control.

Tabs as process steps: Don’t use the triple-chevron icon in the anchor bar of an object page.

Changing the order of tabs: Don’t enable tab reordering if tabs are being used for anchor bar navigation.

Icon Tab Bar
Image The guideline has been fully revised and now provides more details on usage, behavior, and screen reader support. Image
Message Box The coloring of the messaging icons used in the message box has been inverted. The semantic color is now the fill color.

Old style:
Old message icon style
New style:
New message icon style

Message Box
Multi-Input Field Adding tokens: Width of the suggestions dropdown can exceed the width of the input field, but not the width of the browser window/screen.

Reviewing tokens: To select tokens, click/tap the token or use Space to select the focused token.

Using value help: You can now change the value help icon to better indicate the type of data in the field.

Grouping: Tabular suggestions can now make use of the responsive table/pop-in behavior.

Styles: Value state texts can now contain links.

Guidelines: In display mode, show the token texts separated by bullet points. Use an overflow if the list exceeds 1 line.

Multi-Input Field
Quick View The quick view now supports the avatar control. Quick View – Layout
Rating Indicator Visual mode event added. Rating Indicator – Properties
Select Usage: Recommended number of items revised from max. 12 items to 2-8 items.

Option list:

  • Do not disable values in the option list.
  • To prevent translation issues, don’t use (None) to indicate that no items have been selected. Use (Not Selected), (No Values Selected) or other suitable and translatable text instead.
Select
Text Guidelines section added. Text – Guidelines
Time Picker The guideline has been fully revised to reflect the new design of the time picker. Time Picker
UI Element States Control states: Additional guidance and examples for enabling/disabling and displaying/hiding UI elements.

Value states: The default state (= no value state applied) has been renamed from “neutral” to “none” (as used in the SAPUI5 APIs).

Added general guidance on the initial focus position.

UI Element States

SAP Fiori Elements Framework

Topic Update Topic Link

List Report Header

The pin feature is enabled only when the list report contains a responsive table, and not when the list report contains the grid table and analytical tables that don’t allow scrolling. List Report Header

List Report Content Area

For list reports with multiple views, you can enable creation of business objects via a dialog with SAP Fiori elements for OData V2. List Report Content Area

Object Page

By default, users receive an unsaved changes message when they navigate away from a draft of the main object page. Object Page – Overview

Object Page Header

With SAP Fiori elements for OData V4:

With SAP Fiori elements for OData V2, by default a link in the header now displays both the text and ID.

Object Page Header

Object Page Content Area

  • Groups in a form that have no fields are not displayed in the interface.
  • With SAP Fiori elements for OData V2, by default a link in the content area now displays both the text and ID.
Object Page Content Area

Table Toolbar

With SAP Fiori elements for OData V4:

  • You can chose to display the row count next to the table title or hide the table title.
  • For both the list report and the object page, you can display a table with multiple views and display the row count on the segmented buttons or tabs. In this case, the table title does not display the row count.

With SAP Fiori elements for OData V2, you can enable object creation from the list report multiple view layout, in addition to the simple content layout.

Table Toolbar

Table Features

  • In a responsive table, the values from columns assigned high importance are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
  • With SAP Fiori elements for OData V2, you can set a growing threshold, that is, the number of rows that display on initial load and that display additionally when the user clicks More.
Table Features

Designer Toolkit

Topic Update Topic Link
SAP Fiori Design Stencils Font 72: 72 font families for desktop and web updated.

Icon font: Updated to version 4.10.

Business Suite icon font: Updated to version 1.073.

SAP Fiori Design Stencils – Overview

Figma  New!

We now provide SAP Fiori design stencils for Figma, along with corresponding Quartz Light styles.

In the future, all new SAP Fiori design stencils will be provided for Figma only.

Design Stencils for Figma

Sketch
Axure RP
Adobe XD

The stencil files for Sketch, Axure RP, and Adobe XD are no longer being updated.

However, the existing stencil files for guideline version 1.90 and below will remain available.

Design Stencils for Sketch

Design Stencils for Axure RP

Design Stencils for Adobe XD

Using Figma Stencils with Other Design Tools  New!

How to transfer SAP Fiori design stencils from Figma to Sketch, Axure RP, and Adobe XD (no Figma license is needed). Using Figma Stencils with Other Design Tools

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.