What’s New

Updated: March 3, 2021
SAPUI5 Version 1.86

What’s New in Guideline Version 1.86

Intro

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

Get Started

Topic Update Topic Link

Best Practices for Designing SAP Fiori Apps  New!

 Are you new to the design process and unsure how to begin? This new article will provide you with all the basic info you need to get off to a good start.

You can find this article on the Get Started overview page.

 Best Practices for Designing SAP Fiori Apps

Foundation

Topic Update Topic Link

Accessibility

 Additional information on what needs to be provided at application level to support accessibility:

 Accessibility

Design-Led Development Process

 The article has been updated to reflect the new process: Explore – Discover – Design – Deliver – Run & Scale. Design-Led Development Process

Quartz Dark Colors

 The lighter information text color #C0E0FA / rgb(192, 224, 250) is no longer available. Quartz Dark Colors – Semantic Colors

Quartz Light Colors

 The color for information texts #053B70 / rgb(5, 59, 112) is no longer available. Quartz Light Colors – Semantic Foreground Colors

Designing Intelligent Systems

Topic Update Topic Link

Designing Intelligent Systems

 Updated general advice on how to approach design for intelligent systems. Designing Intelligent Systems

Recommendations

 New section on content recommendations. This outlines the motivation and criteria for offering additional content artifacts (such as documents, files, links, or videos) to support the user’s decision-making process. Recommendations

General Concepts

Topic Update Topic Link

Which Selection Control Should I Use

 This article has been fully revised to incorporate feedback from designers. Selection Controls – Overview

Layouts, Floorplans, & Frameworks

Layouts

Topic Update Topic Link

Comparison Pattern

 The expand/collapse header and pin/unpin header features work as described in the dynamic page article. Comparison Pattern – Header Area

Floorplans

Topic Update Topic Link

Analytical List Page

 Updated guidance for the initial focus. Analytical List Page – Initial Focus

Initial Page

 Guidance on initial focus was added. Initial Page – Initial Focus

List Report

 Updated guidance for the initial focus. List Report – Initial Focus

Object Page

 Section on the rating indicator facet was updated.

Freestyle object pages: Developer hint on responsiveness in the content area.

 Object Page Floorplan

SAP Fiori Elements (New)

Topic Update Topic Link

SAP Fiori Elements  New!

 A new section of the guidelines about how to design apps developed with Fiori Elements, including:

  • Default settings and available configuration options.
  • Differences between SAP Fiori elements for OData version 2 and SAP Fiori elements for OData version 4.
  • Links to the design guidelines relevant to the features supported.
  • Links to the relevant developer documentation to share with the development team.
 SAP Fiori Elements Overview

UI Elements

Topic Update Topic Link

Checkbox

 Information on edit and display modes added. Checkbox – Properties

Form/Simple Form

 Article sections restructured and information on the column layout added to Responsiveness section. Form/Simple Form – Responsiveness

Icon Tab Bar

 New section for the recently added “Badge” feature. Icon Tab Bar – Badge

Image

 Provide each image with an alternative text containing a description of the visual content. Image – Guidelines

Smart Field  New!

 Comprehensive article on the smart field service available for OData version 2.

  • Supported controls and how they are chosen.
  • Built-in features that come with the smart field.
  • Available options and guidance on how to apply them.
 Smart Field

Value Help Dialog

 Refreshed design to improve user efficiency. The guideline article has been fully revised. Value Help Dialog

View Settings

 Behavior and Interaction / Filtering: “Show Selected Only” section added. Users can toggle the display to show all filters or only the filters that have been selected. View Settings – Show Selected Only

Services and Resources

Topic Update Topic Link

SAP Fiori Design Stencils

 Download for SAP icon font updated to version 4.8. SAP Fiori Design Stencils – Overview

Sketch

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

Axure RP

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

Adobe XD   

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

User Research Method Cards  New!

 Not sure which user research method to use? You can now download a card deck that provides an overview of the 14 most commonly practiced user research methods at SAP and when to apply them. User Research Method Cards

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.