Updated: June 30, 2021

What’s New in Guideline Version 1.90

Intro

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

Look, Feel, and Wording

Topic Update Topic Link
Theming Additional resource links for applying custom themes using the UI theme designer. Theming – Using the UI Theme Designer

SAP Fiori Launchpad

Topic Update Topic Link
SAP Fiori Launchpad Spaces Tile lines: Info added

Edit mode: Actions Action Menu, Convert, and Move added

SAP Fiori Launchpad Spaces
SAP Fiori Launchpad “My Home”  New! The “My Home” space of the SAP Fiori launchpad serves as the entry point to personalized SAP Fiori apps on mobile and desktop devices. SAP Fiori Launchpad “My Home”

General Patterns

Topic Update Topic Link
Complex Objects  – Local Flow   Complex objects manage items on subpages. The local flow requires every subpage to be saved separately. Complex Objects – Local Flow
User Feedback Guidelines have been restructured and enhanced. User Feedback

Layouts and Floorplans

Floorplans

Topic Update Topic Link
Object Page Floorplan New section Edit Actions in Display Mode (freestyle apps only).

Forms: Option for 6-column layout added.

Loading behavior section moved to Behavior and Interaction. Loading for SAP Fiori Elements uses a skeleton template.

Object Page Floorplan

UI Elements

Topic Update Topic Link
Analytical Table (ALV) Multi-toggle / multi-selection plug-in: Added keyboard shortcut Ctrl+A for selecting/deselecting all items.

Column header: Added keyboard shortcuts for increasing/decreasing the width of a column (Shift+Right, Shift+Left) and for rearranging columns (Ctrl+Left, Ctrl+Right).

Single selection: Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.

Multiple selection: Never disable the selection checkbox.

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

Numbers and units: Amounts with currencies within a single column are now displayed in 72 monospace font.

Key identifier: If the text and ID are in one column, you can sort/filter/group by either the text or the ID, but not both.

More detailed guidance for adding items.

Clarified guidelines for initial sorting.

Add, remove, rearrange columns: Offer the shortcut Ctrl+Comma to open the view settings dialog.

Analytical Table (ALV)
Feed and Notes Avatar is now used within feed and notes.

More/Less: Modify “MORE” / “LESS” links to “More / Less” to be consistent with other components.

Feed and Notes
Form / Simple Form Empty state indicator: Enhanced guidance/example

Responsiveness / column layout: You can now use up to 6 columns for size XL (available since SAPUI5 version 1.88). This gives you greater flexibility when organizing the content for larger forms.​

Form /  Simple Form
Grid List Items: Arrow keys can be used for navigation.

Select:

  • Never disable the selection checkbox.
  • Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.
  • Updated guidelines (box).

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

More detailed guidance on adding items.

Grid List
Grid Table Multi-toggle / multi-selection plug-in: Added keyboard shortcut Ctrl+A for selecting/deselecting all items.

Column header: Added keyboard shortcuts for increasing/decreasing the width of a column (Shift+Right, Shift+Left) and for rearranging columns (Ctrl+Left, Ctrl+Right).

Single selection: Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.

Multiple selection: Never disable the selection checkbox.

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

Numbers and units: Amounts with currencies within a single column are now displayed in 72 monospace font.

Key identifier: If the text and ID are in one column, you can sort/filter/group by either the text or the ID, but not both.

More detailed guidance for adding items.

Clarified guidelines for initial sorting.

Add, remove, rearrange columns: Offer the shortcut Ctrl+Comma to open the view settings dialog.

Grid Table
Invisible Message Busy indicator: Screen readers announce when busy indicators start and end. Invisible Message
List Mode:

  • Users can (de)select all items using Ctrl+A. Select All should (de)select all items that the user can reach by scrolling.
  • Never disable the select checkbox.
  • Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.
  • Updated guidelines (box)

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

View settings: provide individual buttons for sort, filter, group. Follow the tips in this new section, especially for sorting and filtering.

More detailed guidance for adding items.

List
Message Page Content aligned with the guidelines for empty states and illustrated messages. Message Page
Object Display Components Object status: New styling of message icons.

Inverted visualization of object number

Object Display Components
P13n Dialog Filter settings: Enhanced info with additional examples. P13n Dialog – Filter
Scroll Container  New! The scroll container is an empty area that can be filled with content. Use it when you want to provide a content area that would otherwise be partially or completely hidden. Scroll Container
Smart Table Column header: Sort ascending and sort descending are now two different buttons.

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

Amounts with currencies within a single column are now displayed in 72 monospace font.

Smart Table
Tree Selection modes:

  • Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.
  • Users can (de)select all items using Ctrl+A.
  • Never disable the selection checkbox.
  • Updated guidelines (box).

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

More detailed guidance for adding items.

Clarified guidelines for initial sorting.

Tree
Tree Table Column header: The width of the focused column header can be increased/decreased using Shift+Right/Left.

Selection modes:

  • Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.
  • Never disable the selection checkbox.

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

Amounts with currencies within a single column are now displayed in 72 monospace font.

More detailed guidance for adding items.

Clarified guidelines for initial sorting.

Tree Table
Value Help Dialog New section on constant parameters. Value Help Dialog – Constant Parameters

SAP Fiori Elements Framework

Topic Update Topic Link
Object Page Overview  New! New article on a feature relevant to the overall object page — a message where users confirm they want to navigate away from a draft without saving changes. Object Page – Overview
Form Page  New! New article on the form page, a variation on the object page that provides a page for data entry. Form Page
List  New! Support of a list with standard list items or object list items in the list report content area with SAP Fiori elements for OData V2. List
List Report

Analytical List Page

Overview Page Headers on Large Screens

Header is expanded on large screens when the app loads. List Report Header
List Report Header With SAP Fiori elements for OData V4, the Share in Jam is enabled by default when integration with Jam is configured. List Report Header
Object Page Header With SAP Fiori elements for OData V2, in a draft, the Share action is hidden.

With SAP Fiori elements for OData V4, the object page header now supports the address facet.

Object Page Header
Table Types The object page supports the analytical table in display mode with SAP Fiori elements for OData V4. Table Types
Table Toolbar With SAP Fiori elements for OData V4:

  • Table personalization no longer requires variant management.
  • Export to Spreadsheet also exports custom columns.
Table Toolbar

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.