Product Information
Out Now – SAP Fiori Design Guidelines, Versions 1.78 and 1.80
The latest edition of the SAP Fiori Design Guidelines for web applications is now available, with new content based on SAPUI5 releases 1.78 to 1.80.
New with this edition
Here’s a selection of the topics and features that are new with this edition:
Flexible grid
The new flexible grid article explains how the existing flexible (CSS) grid control works. You can use it as an underlying layer for arranging your content into columns and rows. The layout then adapts automatically to different screen sizes.
Flexible grid layout
Tree toolbar
There’s now a dedicated tree toolbar guideline for actions that apply to a tree or tree table.
Keyboard shortcuts
On desktop devices you can now render keyboard shortcuts for a button as a tooltip.
Button with tooltip for shortcut
Avatar badge
You now have the option to show a badge for clickable avatars. The badge visualizes the action triggered by clicking the avatar, like taking a photo or zooming in.
Avatars with badges
Responsive table
You can configure auto pop-in mode to hide certain columns, rather than moving all columns to the pop-in area.
Icon tab bar
For the icon tab bar you can create hierarchies with sub-tabs or nested tabs.
Icon tab bar with nested tabs
List report
A new Working Modes section describes how to respond when a user makes changes that are inconsistent with the filter criteria.
Visual design
You’ll also notice some small changes to the visual design:
- The asterisk indicating a mandatory field now appears to the right of the field label (formerly on the left).
Mandatory field
- The style of the message icons for error, information, confirmation, and success messages has been adapted.
Latest messaging icons
Updated guidance
Independently of new or changed features, we continually update our design guidance for existing floorplans and UI elements. Some of the topics we’ve addressed include:
Actions in SAP Fiori 3
We’ve enhanced several articles to give you more explicit guidance on where to place actions and how to style them. These include our guidelines for the footer toolbar and the toolbar overview.
Mass editing
The guideline for mass editing now includes explicit text recommendations for different types of input control.
Creating objects
We’ve added new guidance on creating objects in a list report using a dialog, and on creating sub-objects in an object page.
New and updated SAP Fiori design stencils
Over 20 new stencils have been added, including the basic dynamic page layout, the wizard floorplan, and AI recommendations.
You can see what’s been added and changed in the respective stencil sets below:
- Sketch: What’s New in 1.78 | What’s New in 1.80 | Latest Download
- Axure RP: What’s New in 1.78 | What’s New in 1.80 | Latest Download
- Adobe XD: What’s New in 1.78 | What’s New in 1.80 | Latest Download
What else has changed?
For a complete overview of all new and updated content, see What’s New in Guideline Version 1.78 and What’s New in Guideline Version 1.80.
This post originally appeared on SAP User Experience Community.
Great summary! Thanks for sharing, Susanne!