What’s New in Guideline Version 1.66

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: 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: 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. A read-only option is now supported.	Select
Single Planning Calendar	Responsiveness: 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”. 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”. 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.