Intro

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

Foundation

Topic Update Topic Link
Colors New color palette for indication colors. Colors

SAP Fiori Launchpad

Topic Update Topic Link
Enterprise Search New section on creating search models. Creation of Search Models
Launchpad Overview With Fiori 3, the viewport has been removed.

Notifications and the functions from the former Me Area are now accessed from the shell bar, via the new user menu.

SAP Fiori Launchpad Overview
Launchpad Home Page Viewport section was removed. SAP Fiori Launchpad Home Page
Launchpad Shell Bar New shell structure for Fiori 3.

The shell bar now supports consistent placement of all components across all SAP products.

Launchpad Shell Bar
Launchpad Services The Me Area has been replaced by the user menu. SAP Fiori Launchpad Services
Notifications Notifcations are now accessed via the shell bar. Notifications

General Concepts

Topic Update Topic Link
How to Use Semantic Colors / Industry-Specific Colors New section on industry-specific colors.

You can use industry-specific colors if the meanings associated with the standard semantic colors differ from the conventions for your business.

How to Use Semantic Colors / Industry-Specific Colors
Wrapping and Truncating Text If a text, title, or label wraps in the middle of a word, there are now at least 3 characters before and after wrapping. This prevents just one or two characters from “hanging” at the start or end of a line. Wrapping and Truncating Text

Layouts, Floorplans, and Frameworks

Topic Update Topic Link
Comparison Pattern
New!
New page layout for displaying information from multiple items side by side. Comparison Pattern
Dynamic Page Layout Responsiveness and adaptiveness: On smartphones, you can now show a summary line instead of the expand/collapse header feature to save vertical space. Dynamic Page Layout – Responsiveness
Flexible Column Layout Additional guidance on the interaction when the user:

  • Selects a different item
  • Deletes an item
  • Applies a filter to one of the columns
  • Navigates using tabs/anchors
Flexible Column Layout – Content Interaction
List Report Floorplan New Search section was added.

Header Content section was revised.

Images were adapted to reflect that the live update mode (without the Go button) is the default mode for the filter bar.

 List Report Floorplan
Object Page Floorplan Key value facet: Larger value texts are now possible using new properties for the object status and object number (freestyle object pages only).

The Contacts section was removed. From release 1.66, contacts can be displayed using the grid list.

Tables: Guidance was added on embedding analytical tables, grid tables, or tree tables within an object page. To avoid multiple vertical scroll bars, these tables should always have their own tab on the object page.

 Object Page Floorplan
Tool Development: Tool Header This article has been fully revised to reflect the current implementation version available in the Demo Kit, changes based on Fiori 3 concepts, and tool-specific requirements of the product standard for UX consistency. Tool Header

UI Elements

Topic Update Topic Link
Analytical Table (ALV)

 

Row highlighting:

  • New “industry specific” color palette is now supported.
  • Always provide a corresponding text to explain why an item is highlighted.

Enabling/disabling actions: Additional guidance on when to enable/disable toolbar buttons, based on the current selection.

Analytical Table (ALV)
Avatar The fallback behavior for missing images has been updated. Avatar – Fallback Behavior for Missing Images
Carousel The carousel can now display more than one item at a time. Carousel
Combo Box Suggestions can now be grouped. Combo Box
Date Picker Responsiveness and Adaptiveness: Clicking the icon now opens the full screen popover, while clicking the in the input area opens the regular popover. Date Picker
Delta Micro Chart The delta micro chart control now supports different sizes for improved responsiveness (L, M, S, XS). Delta Micro Chart – Responsiveness
Filter Bar Images were adapted to reflect that the live update mode (without the Go button) is the default mode for the filter bar. Filter Bar
Harvey Ball Micro Chart The Harvey Ball micro chart control now supports different sizes for improved responsiveness (L, M, S, XS). Harvey Ball Micro Chart – Responsiveness
Grid List
New!
The grid list is an alternative view to a list or table. Instead of being displayed in rows, items are shown using images, charts, object cards, or other formats that benefit from more height (but less width). You can use a grid list to display a set of contact cards, for example. Grid List
Grid Table Row highlighting:

  • New “industry specific” color palette is now supported.
  • Always provide a corresponding text to explain why an item is highlighted.

Enabling/disabling actions: Additional guidance on when to enable/disable toolbar buttons, based on the current selection.

Grid Table
Input Field It is now possible to group suggestions.

Information on autocomplete has been consolidated in the Autocomplete Suggestions section.

Input Field
Label Additional note on hyphenation: If hyphenation is switched on, it is applied for all languages. Label – Hyphenation
List Row highlighting:

  • New “industry specific” color palette is now supported.
  • Always provide a corresponding text to explain why an item is highlighted.

Enabling/disabling actions: Additional guidance on when to enable/disable toolbar buttons, based on the current selection.

List
Multi-Input Field New section on grouping suggestions in multi-input fields. Multi-Input Field – Grouping
Object Display Components Inverted visualization is now available for the object status.

A larger font can be used for the object status and object number in headers.

Object Display Components
Radial Micro Chart The radial micro chart control now supports different sizes for improved responsiveness (L, M, S, XS). Radial Micro Chart – Responsiveness
Responsive Table Row highlighting:

  • New “industry specific” color palette is now supported.
  • Always provide a corresponding text to explain why an item is highlighted.

Enabling/disabling actions: Additional guidance on when to enable/disable toolbar buttons, based on the current selection.

Numbers and units: Option to display the unit of measurement in the column header (in certain cases).

Responsive Table
Select Value state texts can now be displayed within the select dropdown.

read-only option is now supported.

Select
Single Planning Calendar Responsiveness and Adaptiveness: The control is now responsive, and cozy density mode is supported.

Drag and drop is now available.

App developers can now create a custom view with a specific number of columns.

Images were updated to reflect the latest visual design for appointments.

Single Planning Calendar
Table Toolbar Additional guidance on when to enable/disable toolbar buttons, based on the current selection. Table Toolbar – Guidelines
Text Information on wrapping and hyphenation is now consolidated under “Responsiveness and Adaptiveness”.

Note on hyphenation: If hyphenation is switched on, it is applied for all languages.

Text
Tile Note on hyphenation: If hyphenation is switched on, it is applied for all languages. Tile – Texts in the Header Area
Title Information on wrapping and hyphenation is now consolidated under “Responsiveness and Adaptiveness”.

Note on hyphenation: If hyphenation is switched on, it is applied for all languages.

Title
Toolbar Overview Additional explanations in the Styles and Order of Buttons sections. Toolbar Overview
Tree Row highlighting:

  • New “industry specific” color palette is now supported.
  • Always provide a corresponding text to explain why an item is highlighted.

Enabling/disabling actions: Additional guidance on when to enable/disable toolbar buttons, based on the current selection.

Tree
Tree Table
  • Row highlighting:
    • New “industry specific” color palette is now supported.
    • Always provide a corresponding text to explain why an item is highlighted.
  • Enabling/disabling actions: Additional guidance on when to enable/disable toolbar buttons, based on the current selection.
Tree Table

About Guideline Updates

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

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