What’s New

Updated: September 1, 2020
SAPUI5 Version 1.78

What’s New in Guideline Version 1.78

Intro

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

General Concepts

Topic Update Topic Link

App Finder

 Behavior and Interaction: New Adding Apps to a Page section for SAP Fiori launchpad spaces. App Finder – Adding Apps to a Page

SAP Fiori Launchpad Spaces

 Sections: Now with info on the Recently Added Apps section for apps selected in the app finder. SAP Fiori Launchpad Spaces – Recently Added Apps

Layouts, Floorplans, & Frameworks

Layouts

Topic Update Topic Link

Letterboxing

 Added guidance on when to apply letterboxing to an application, and when to enable it for a single page. Letterboxing – Guidelines

Floorplans

Topic Update Topic Link

List Report Floorplan

 Working Modes: New section on handling cases where user edits impact the filter results.

Table/Chart Actions: From version 1.78, users can add/create new items at list report level using a dialog.

 List Report Floorplan

 

Object Page Floorplan

 The default width of the plain text facet is now 320 px (formerly 300 px).

Key value facet: Title is mandatory.

Subsections: Option to hide the subsection title if it contains a table or chart with the same title.

 Object Page Floorplan

Frameworks

Topic Update Topic Link

Block Layout
Side Navigation

 Both articles have been reworked and adapted to SAP Fiori 3. Block Layout
Side Navigation

UI Elements

Topic Update Topic Link

Avatar

 An avatar can now have an optional badge with an icon. Avatar – Badge

Color Picker
Color Picker Popover

 Info added: Default color prior to user selection is white, but can be adapted by the app team. Color Picker – Layout
Color Picker Popover – Layout

Dynamic Date

 A new time period “Today -X/+Y” is now available in the dynamic date range. This allows users to include X days before today, and Y days after today. Dynamic Date

Filter Bar

 Intro: Added info on filter bar vs. smart filter bar.

Live Update/Manual Update: Live update mode is no longer recommended as default for all use cases. Instead, optimize the default mode for your specific use case.

 Filter Bar

Flexible Grid  New!

 New guideline for the existing flexible (css) grid control. This allows you to divide a layout into multiple columns and rows in which you can place UI elements. Flexible Grid

Footer Toolbar

 A section on app-specific actions was added.

The Styles section was updated to cover the different button styles.

 Footer Toolbar

Infobar

 New section on active and non-active infobar states. Infobar – States

Icon Tab Bar

 Responsiveness: New overflow behavior.

New section on hierarchies, with sub-tabs and nesting.

 Icon Tab Bar

Form/Simple Form
Input Field
Label
UI Element States

 Article updated to reflect the new position of the asterisk for a mandatory field (now after the label instead of before it). Form/Simple Form – Guidelines
Input Field – Required
Label – Types
UI Element States – Required

Micro Process Flow

 New guideline: Always replace the default icons with icons that fit your use case. Do not use the former status icons. Micro Process Flow

Multi-Combo Box

 Reviewing tokens: Single tokens that exceed the width of the input field are truncated. Multi-Combo Box – Reviewing Tokens

Multi-Input Field

 Reviewing tokens: Single tokens that exceed the width of the input field are truncated. Multi-Input Field – Reviewing Tokens

Responsive Table

 Responsiveness: Auto pop-in mode now also allows you to hide columns (instead of moving all columns to the pop-in). Responsive Table – Responsiveness

Rich Text Editor

 Responsiveness: Updated info on the use of the rich text editor on mobile devices.

New Mobile Theme section outlining the limitations of the TinyMCE mobile theme.

 Rich Text Editor

Search (Field)

 3 search properties were added for cases where a search is triggered after the user changes the value of a field. Search Properties

Smart Filter Bar

 Article was renamed from “Smart Filter Bar Annotations” to “Smart Filter Bar”.

A Guidelines section was added and numerous cross-references updated.

Live update mode is no longer recommended as default for all use cases.

 Smart Filter Bar

Table Toolbar

 Components: Now includes an image showing all possible toolbar components in the correct order.

Guidelines: New section for the Maximize/Minimize button.

 Table Toolbar

Toolbar Overview

 Additional guidance on the button styles used in toolbars.

Types: Tree toolbar was added.

 Toolbar Overview

Tree Toolbar  New!

 New article for the toolbar that appears above a tree or tree table. Tree Toolbar

Services and Resources

Topic Update Topic Link

SAP Fiori Design Stencils

 SAP Fiori Design Stencils – Overview

Sketch

 What’s New in Sketch Stencil Version 1.78 Design Stencils for Sketch

Axure RP

 What’s New in Axure RP Stencil Version 1.78 Design Stencils for Axure RP

Adobe XD   

 What’s New in Adobe XD Stencil Version 1.78 Design Stencils for Adobe XD

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 versions 1.77 and 1.78.
  • 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.