What’s New

Updated: August 28, 2020
SAPUI5 Version 1.76

What’s New in Guideline Version 1.76

Intro

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

Foundation

Topic Update Topic Link

Accessibility in SAP Fiori  New!

 This new article provides an overview of key accessibility requirements. Learn what comes out of the box with the SAPUI5 framework, and what you need to consider when you design and develop SAP Fiori apps. Accessibility in SAP Fiori

Belize Colors

 3 indication colors were added (indication colors 6, 7, and 8). Belize Colors – Indication Colors

Quartz Dark Colors

Quartz Light Colors

 Labels for primary colors 1,3, and 4 have been updated to better explain their use.

3 indication colors were added (indication colors 6, 7, and 8).

 Quartz Dark Colors

Quartz Light Colors

Designing Intelligent Systems

Topic Update Topic Link

User Feedback  New!

 This new article takes a conceptual look at incorporating a user feedback loop to improve the software. It outlines the feedback cycle, and explores the different parameters for collecting feedback. It also contains a useful set of basic questions to help you get started. User Feedback

General Concepts

Topic Update Topic Link

How To Use Semantic Colors / Industry-Specific Colors

 3 new industry-specific colors (indication colors) are now available. How To Use Semantic Colors / Industry-Specific Colors

Mass Editing

 New section on mass editing in SAP Fiori elements. Mass Editing with SAP Fiori Elements

SAP Fiori Launchpad – Overview

 New section on launchpad spaces. SAP Fiori Launchpad Overview – Spaces

SAP Fiori Launchpad Spaces  New!

 As of SAPUI5 version 1.75, you can use the new launchpad spaces.

A space serves as an entry point for a business role and is set to replace the launchpad home page with a later release.

 SAP Fiori Launchpad Spaces

Layouts, Floorplans, and Frameworks

Layouts

Topic Update Topic Link

Dynamic Page Layout

 Pinning the header content: As soon as the header takes up more than 60% of the screen real estate, the header is collapsed automatically.

Header title components: Input field was added (used for initial page floorplan).

 Dynamic Page Layout

Flexible Column Layout

 Recommendation added: when the user resizes the screen, set the scroll position to the item currently open in the details column. Flexible Column Layout – Scroll Position

Floorplans

Topic Update Topic Link

List Report Flooprlan

 The guidance for variant management was adapted to allow a second variant at control level for specific cases only.

Guidelines: New section on sticky behavior.

 List Report Floorplan

Worklist Floorplan

 Updated guidance: Ensure sticky behavior for the tab bar, table toolbar, and table columns. Worklist Floorplan – Page Content

UI Elements

Topic Update Topic Link

Analytical Table

 Highlighted items: You can now use the extended color set to highlight rows, including industry-specific colors (indication colors).

Additional guidelines for actions:

 Analytical Table

Chart Toolbar

 The article has been adapted to reflect the latest guidelines for buttons and action placement. Chart Toolbar

Combo Box

 Additonal information on selecting a value:

  • Developer hint added for the showitems API.
  • Autocomplete: The type-ahead feature is not available for Android devices.
 Combo Box

Filter Bar

 Collapsed filter bar: Status text “Filtered By: None” changed to “Not Filtered”. Filter Bar

Grid List

 Highlighted items: You can now use the extended color set to highlight rows, including industry-specific colors (indication colors).

Additional guidelines for actions:

  • Enabling/disabling actions: Enable actions that are independent of the selected items.
  • Inline actions: Hide actions in the table row if they can’t be applied to the item.
  Grid List

Grid Table

 Highlighted items: You can now use the extended color set to highlight rows, including industry-specific colors (indication colors).

Additional guidelines for actions:

Link

 New link type “link with icon” was added. Link – Link with Icon

List

 Enabling/disabling actions: Enable actions that are independent of the selected items.

Highlighted items: You can now use the extended color set to highlight rows, including industry-specific colors (indication colors).

Multi-Combo Box

 Selecting a value: Developer hint added for the showitems API.

Filtering the option list: The type-ahead feature is not available for Android devices.

 Multi-Combo Box

Multi-Input Field

 Adding a token: The type-ahead feature is not available for Android devices. Multi-Input Field

Object Display Components

 This article has been fully revised, and now offers more comprehensive guidance for the object status. Object Display Components

Responsive Table

 Responsiveness: New auto pop-in behavior.

Highlighted items: You can now use the extended color set to highlight rows, including industry-specific colors (indication colors).

Additional guidelines for actions:

  • Enabling/disabling actions: Enable actions that are independent of the selected items.
  • Inline actions: Hide actions in the table row if they can’t be applied to the item.
 Responsive Table

Table Toolbar

 The article has been adapted to reflect the latest guidelines for buttons and action placement. It now also includes an overview images with all possible actions in the correct order. Table Toolbar

Tree

 Highlighted items: You can now use the extended color set to highlight rows, including industry-specific colors (indication colors).

Enabling/disabling actions: Enable actions that are independent of the selected items.

 Tree

Tree Table

 Highlighted items: You can now use the extended color set to highlight rows, including industry-specific colors (indication colors).

Additional guidelines for actions:

  • Enabling/disabling actions: Enable actions that are independent of the selected items.
  • Inline actions for line items: Hide actions in the table row if they can’t be applied to the item.
 Tree Table

View Settings Dialog

 Additional guidance on usage. We recommend using individual dialogs for sort/filter/group instead of the combined dialog. View Settings Dialog – Usage

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.76 Design Stencils for Sketch – Download

Axure RP

 What’s New in Axure RP Stencil Version 1.76 Design Stencils for Axure RP – Download

Adobe XD   New!  

 As of release 1.76, we also provide design stencils for Adobe XD.
Available stencils		 Design Stencils for Adobe XD – Download

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.75 and 1.76.
  • 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.