Out Now – SAP Fiori Design Guidelines Version 1.74

The SAP Fiori Design Guidelines for web applications have been updated. The latest version covers new features implemented with SAPUI5 releases 1.73 and 1.74, as well as updates to the guidelines for existing UI elements and patterns.

New with this edition

Quartz Dark colors

Quartz Dark is our new theme for low-light environments. The article outlines the different types of color usage and the corresponding Quartz Dark colors, as well as accessibility considerations.

Avatar group

You can now visualize teams and other groups using the avatar group control. This new guideline walks you through the options for displaying the members of both small and larger groups.

Different visualizations for an avatar group

Responsive spacing system

A new topic about responsive spacing explains how responsive padding and style sheet classes are used to control padding between elements that are common to all SAP Fiori interfaces.

Updated guidelines for UI elements

We’ve also updated the guidelines for numerous UI elements. Here’s a selection of new features you might find useful.

Indicator for “opened” item

You can now enable a “navigated” indicator for tables and lists to mark the item that was last opened. This is typically required for master-detail scenarios, and is supported for both tables and lists.

“Navigated” indicator for an item (PC Lock) in a responsive table

Color palette – recent colors

The color palette and color palette popover can now display the user’s 5 most recent colors.

Color palette popover with the 5 most recent colors

Swipe actions for lists

You can now offer swipe actions in lists. Different actions can be shown for swipe right and swipe left.

Example: Swipe right to approve an item

Highlight items in responsive tables

In responsive tables, you now have an option to highlight items.

Highlight indicator in a responsive table

New and updated SAP Fiori design stencils

We’re still busy expanding our stencil libraries for Sketch and Axure RP. New stencils for UI elements include the responsive table, message box, multi-combo box, and date picker. We’ve also added stencils for the flexible column layout and overview page floorplans. For a list of all updated stencils, see What’s New in Sketch Stencil Version 1.74 and What’s New in Axure RP Stencil Version 1.74.

What else is new?

For a complete overview of all new and updated content with this guideline version, see What’s New in Guideline Version 1.74.

This post originally appeared at https://experience.sap.com/news/out-now-sap-fiori-design-guidelines-version-1-74/ and https://medium.com/sap-design/out-now-sap-fiori-design-guidelines-version-1-74-bfa78b7cc5ab.