What’s New in Guideline Version 1.96

Intro

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

General Patterns

Topic Update Topic Link
Designing Intelligent Systems A new Intelligence Patterns section explains the two main AI pillars: AI automation and AI augmentation. This replaces the former Application-Specific Patterns section. Designing Intelligent Systems – Intelligence Patterns

Layouts and Floorplans

Layouts

Topic Update Topic Link
Semantic Page Behavior and Interaction: “Initial Focus” section added. Semantic Page – Initial Focus

Floorplans

Topic Update Topic Link
Object Page Floorplan Content Area: You can now hide the title of a section or subsection if it contains a control with the same title (such as a table or chart). This avoids unnecessary redundancies. Object Page Floorplan – Content Area
Wizard Floorplan When to Use Wizard in Modal Dialog added.

Walkthrough Screen: Info on Next Step button added.

Wizard Floorplan

UI Elements

Topic Update Topic Link
Button Developer hint added: Use sap.ui.core.CommandExecution for the button shortcut. Button – Button Shortcut
Combo Box Components: You can add a Clear icon to the combo box.

Styles: The value state message can also be a formatted text.

Guidelines – Option List: Don’t disable items in the option list.

Combo Box
Date Picker Components: Add additional descriptive texts using  ariaDescribedBy.

Behavior and Interaction: Info on Today button added.

Date Picker
Date/Time Picker Behavior and Interaction: Info on Today button added.

Guidelines: Add additional descriptive texts using  ariaDescribedBy.

Date/Time Picker
Date Range Selection Components:  Add additional descriptive texts using  ariaDescribedBy.

Behavior and Interaction: Info on Today button added.

Date Range Selection
Dynamic Date Range  New! New standalone control that offers a choice of absolute and relative dates.

The dynamic date range control is available in addition to the existing dynamic date control, which is only available for the smart filter bar.

Note: The dynamic date range control currently has the SAPUI5 status “experimental” (first available with SAPUI5 version 1.92).

Dynamic Date Range
Formatted Text You can use the following HTML tags to set the text direction explicitly:

  • bdi: Bidirectional isolation of a certain text
  • dir: Explicit text direction of a certain text
Formatted Text
Input Field Properties:

  • Value State Message: The value message text can also be a formatted text.
  • Value Help: App teams can exchange the value help icon.
  • Autocomplete Suggestions:
    • You can set the maximum width of suggestion popover. As a result, the width of the suggestion popover can differ from the width of the input field.
    • The maximum width of the suggestion box is always slightly smaller than the width of the screen or browser window.
  • Tabular Autocomplete: “Pop-in” behavior is now supported for tabular suggestions.
  • Clear: You can add a Clear icon to the input field.
  • Accessibility:  Added property “ariaDescribedBy” for providing additional information for assistive technologies (such as screen readers).
Input Field
List List actions: Disable an action if the number of selected items doesn’t match the action (for example, disable Compare if only one item is selected). List – Enabling/Disabling Actions
Mask Input Components: Add additional descriptive texts using  ariaDescribedBy. Mask Input – Components
Message Handling New section on illustrated messages added. Message Handling – Illustrated Messages
Messaging

  • Message Popover
  • Message Strip
  • Message View
The coloring of the messaging icons has been inverted. The semantic color is now the fill color.

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

Message Popover

Message Strip

Message View

Message Popover Behavior and interaction: If the message popover/view contains only one message that also has message details, the message details page is displayed by default.

Components – List Subsection: New “Last Action” group for messages that result from the finalizing action, but are not related to a specific field.

Message Popover
Message Strip Behavior and Interaction: A link can be added to the message strip. Message Strip – Interactive Behavior
Multi-Combo Box Behavior and Interaction:

  • Additional options for selecting values (keyboard shortcuts, optional Select All checkbox).
  • Clear: You can add a Clear icon to the multi-combo box.

Styles: The value state message can also be a formatted text.

Guidelines:

  • Option List: Don’t disable items in the option list.
  • Width: Wrapping option added.
  • Alternatives for Display Mode:  If a form or table supports both display and edit modes, only use the multi-combo box in edit mode. In display mode, use a bulleted list or a horizontal list with bullet separators.

 

Multi-Combo Box
Multi-Input Field Behavior and Interaction:

  • Adding Tokens: Property for setting width of suggestions dropdown added.
  • Grouping: The suggestion list should have no more than 4 columns. “Pop-in” behavior is now supported for tabular suggestions.
  • Clear: You can add a Clear icon to the multi-input field.

Styles: The value state message can also be a formatted text.

Guidelines: Alternatives for display mode added (bulleted list or a horizontal list with bullet separators).

Multi-Input Field
Planning Calendar Components: Addition of relative views to view switch. Planning Calendar – Components
Responsive Table Layout: The user can now resize columns.

Behavior and Interaction:

Guidelines:

Responsive Table
Select Dialog If you are using the select dialog for filtering, and users can select all items as filters, provide an All option at the top of the list. Select Dialog – Guidelines for List Options
Table Toolbar Title: Hide the item counter if no items are shown.

Guidelines – Disabling Actions: Disable an action if the number of selected items doesn’t match the action (for example, disable Compare if only one item is selected).

Table Toolbar
Text Responsiveness: New section on preserving white space. Text – White Spaces
Text Area Text Area Counter – Basic Interactions: Correction: If the characters typed exceed the limit defined, the text area doesn’t change to a warning state by default. We still recommend displaying a warning state, but this needs to be implemented at app level.

Guidelines: Added: Consider using an expandable text as a display mode equivalent.

Properties: Use the properties ariaDescribedBy and ariaLabelledBy to provide additional information for assistive technologies.

Text Area
Timeline Behavior and Interaction: The timeline supports click events on item level. Timeline – Navigate
Title Styles: A title can also be a link. Developer hint added. Title – Styles
Toolbar Overview Actions and Layout: You can place a title in the toolbar. The alignment of the title (left, center, right) depends on the theme. Toolbar Overview – Actions and Layout
Tree Actions: Disable an action if the number of selected items doesn’t match the action (for example, disable Compare if only one item is selected). Tree – Enabling/Disabling Actions
Upload Set  New! The upload set control replaces the deprecated Upload Collection control (as of SAPUI5 version 1.88). Upload Set
Using Tooltips Usage: Do not use tooltips for:

  • Static UI elements, such as labels
  • Column headers in tables
  • Button shortcuts
Using Tooltips – When Not to Use
Views (Variant Management) Manage Views Dialog: Section added on applying views automatically (Apply Automatically checkbox). Views – Apply Views Automatically

SAP Fiori Elements Framework

Topic Update Topic Link
Terminology for SAP Fiori Elements  New! To support you in communicating with application developers, this article covers:

  • Development terms and what you need to understand about them
  • Design terms that may not be meaningful to some application developers
  • Terms that both application designers and developers use, but for different concepts
Terminology for SAP Fiori Elements
Worklist Sort, Filter, Group, and Column Settings actions are now accessible via the Settings  icon by default. Worklist
Object Page – Header
  • When the header contains:
    • Only a title and a subtitle, the Expand/Collapse    and Pin/Unpin  buttons are not displayed.
    • At least one facet, the buttons are displayed. Also, the header is expanded on initial load and collapses on user scroll.
  • On a mobile phone screen, the header optimizes the screen space when the user scrolls with a summary line instead of the collapsed header with SAP Fiori elements for OData V2.
Object Page – Header
Object Page – Content Area
With SAP Fiori elements V4:
  • You can add an action next to the form header.
  • The default length of the text entry area allows for four lines of text. You can enable growing mode and set a limit for the number of lines that display.
  • Users can upload a file to an object page property and delete it.
Object Page – Content Area
Object Page – Footer Bar
With SAP Fiori elements for OData V2, in the message popover, the messages are grouped by section and table so users can easily locate where they need to take action.
Object Page – Footer Bar
Table Toolbar
  • In a list report table for the object creation action, you can enable default values to prefill the fields for the new object. This is available with with SAP Fiori elements for OData V2 for applications without draft handling, and with SAP Fiori elements for OData V4.
  • In an object page table for the inline creation action, you can enable default values to prefill the fields for the new object with SAP Fiori elements for OData V4.
Table Toolbar
Table Rows

With SAP Fiori elements for OData V4, when you enable the multiple item selection, the Clear All checkbox is enabled by default.

Exceptionally, for a responsive table on an object page with anchor bar mode, the Select All checkbox is enabled by default.

 Table Rows
List

With SAP Fiori elements for OData V2, in a list report with a list of standard or object list items:

  • A chevron icon lets users navigate to the item.
  • A navigation row indicator highlights the list item that the user has navigated to.
List

Designer Toolkit

Topic Update Topic Link
SAP Fiori Design Stencils SAP icon font: Updated to version 4.12

SAP Business Suite icon font: Updated to version 1.075

SAP Fiori Design Stencils – Overview
Design Stencils for Figma What’s new with stencil version 1.94
What’s New with stencil version 1.96

Swapping libraries: A new Swap Library section explains how to apply another library to all components. This can be useful if you want to update your components from an older stencil version to the latest version.

Related Links: Added links to Figma sessions offered through LinkedIn Learning.

Design Stencils for Figma

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.