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:
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.
There’s now a dedicated tree toolbar guideline for actions that apply to a tree or tree table.
On desktop devices you can now render keyboard shortcuts for a button as a tooltip.
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.
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.
A new Working Modes section describes how to respond when a user makes changes that are inconsistent with the filter criteria.
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).
- The style of the message icons for error, information, confirmation, and success messages has been adapted.
Latest messaging icons
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
The guideline for mass editing now includes explicit text recommendations for different types of input control.
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