What’s New

Updated: November 11, 2020
SAPUI5 Version 1.82

What’s New in Guideline Version 1.82

Intro

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

Designing Intelligent Systems

Topic Update Topic Link

Explainable AI

 Level 1 – Explanation Indicator: Examples added for explanation indicator styles.

Level 2 – Simple Explanation: Updated guidance and examples for the explanation popover.

Level 3 – Extended Explanation: New section on the explanation page content.

Responsiveness: Updated guidance on responsiveness for extended explanations.

 Explainable AI

Situation Handling

 Guideline adapted to reflect the change in action label for closing a situation (formerly “Dismiss”, now “Close”). Situation Handling

General Concepts

Topic Update Topic Link

Action Placement

 Enhanced examples for the header toolbar and footer toolbar. Action Placement

Layouts, Floorplans, & Frameworks

Layouts

Topic Update Topic Link

Dynamic Page

 Dynamic Page Header: More info on the three interaction patterns added (snap on scroll, snap on click, and pin/unpin).

Responsiveness: Advice on text length in collapsed mode added.

 Dynamic Page

Floorplans

Topic Update Topic Link

List Report Floorplan

 New sections with examples and top tips. List Report – Examples
List Report – Top Tips

UI Elements

Topic Update Topic Link
Button You can now display badges on buttons. Button – Badge
Date Picker New info on highlighting special days. Date Picker – Components
Grid List Add Items: Shortcut to trigger Add and Create buttons added. Grid List – Add Items

HTML  New!

 The HTML control allows app teams to display rich text or embed freestyle HTML in their applications. This helps to cover use cases that would otherwise not be possible with standard SAP Fiori controls. HTML

Icon Tab Bar

 Tabs as Process Steps: Warning concerning the overflow behavior of the tab bar from SAPUI5 version 1.80. The issue will be fixed soon.

Nested Tabs: To enable nested tabs, the maxNestingLevel can be adjusted.

Changing the Order of Tabs: A visual indicator helps when repositioning tabs.

 Icon Tab Bar

Input Field

 Tabular autocomplete: Column headers are now “sticky”. Input Field – Tabular Autocomplete

List

 Add Items: Shortcut to triggerAdd and Create buttons added. List – Add Items

Message Strip

 Accessibility: Screen reader notification text added. Message Strip – Accessibility

Multi-Input Field

 Grouping: Column headers are now “sticky”. Multi-Input Field – Grouping

Planning Calendar

 View switch: Now with additional 1 Month view (half-column style).

Appointments: Two appointment types were added (large and automatic).

 Planning Calendar – Components

Responsive Table

 Actions: Outdated info removed. Shortcut CTRL+Enter to trigger Add and Create buttons added. Responsive Table – Actions

Smart Table  New!

 New, fully-revised article:

  • Replaces the old (outdated) Smart Table article and includes all updates since guideline version 1.52.
  • Focuses on the options available with the smart table, with cross-references to the specific control articles.
  • Comprehensive guidelines and developer hints.
 Smart Table

Time Picker

 Style: Description of the five basic value states (regular, information, success, warning, and error) added. Time Picker

Services and Resources

Topic Update Topic Link

SAP Fiori Design Stencils

 Updated download files for:

  • SAP icon font (version 4.7)
  • SAP Business Suite icon font (version 1.065)
 SAP Fiori Design Stencils – Overview

Sketch

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

Axure RP

 What’s New in Axure RP Version 1.82 Design Stencils for Axure RP

Adobe XD   

 What’s New in Adobe XD Version 1.82 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.81 and 1.82.
  • 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.