This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.88.
|Revised Guideline Navigation Structure||To accommodate a growing number of topics and in response to reader feedback, we have restructured the left-hand navigation tree for the guidelines.
For details of the changes, see Updated Navigation Structure for Guideline Version 1.88.
|Navigating the Guidelines|
|Navigating the Guidelines||The former Get Started article has been renamed to Navigating the Guidelines and updated to reflect the new guideline navigation structure.||Navigating the Guidelines|
|Why Design Guidelines?||The former Beginner’s Guide to the Design Guidelines topic has been renamed to Why Design Guidelines? and now appears directly under Get Started in the navigation menu.||Why Design Guidelines?|
Look, Feel, and Wording
|Look, Feel, and Wording New!||Overview topic for the Look, Feel, and Wording section.||Look, Feel, and Wording|
|UX Illustrations New!||UX illustrations are visual elements that can be paired with a text to make content more relatable and easier to understand. In SAPUI5, illustrations can be used in illustrated messages for empty states. Learn about the role of illustrations, the different illustration sizes, and best practices for using them.||UX Illustrations|
|Delete Objects New!||Dedicated topic that outlines the deletion flows for 4 scenarios:
|Draft Handling||New section for the “Keep Draft” dialog. When leaving a page in edit mode, the user can decide whether to keep or discard the current draft.||Draft Handling – “Keep Draft” Dialog|
|Empty States New!||Empty states are situations where there is no content to display. This new article looks at the different types of empty states and the basic design pattern. There’s also guidance on how to best construct messages and combine message and image elements to engender a positive user experience.||Empty States|
|General Patterns New!||Overview topic for the General Patterns section.||General Patterns|
|Simple Objects (Create, Edit)||Article restructured and rewritten.||Simple Objects (Create, Edit)|
|Situation Handling||The redesigned “My Situations” app now uses the flexible column layout to incorporate situations from various business scenarios.
Layout details were added for the situation page, including the content of the situation page header, situation details, solution proposals, and related actions.
New Switching Situations section with guidance on how to use the interactive situation icon and the corresponding situation pop over.
Layouts and Floorplans
|Layouts and Floorplans New!||New overview topic that outlines how layouts and floorplans are used to build application pages.||Layouts and Floorplans|
|Object Page Floorplan||Forms: Use one form per subsection, updated guidance for action placement.
|When to Use Which Floorplan New!||Quick feature overview of the different floorplan types and when to use each one.||When to Use Which Floorplan|
|Wizard Floorplan||New developer hint: Change the height of the wizard in the code to “auto”.
Otherwise, the wizard will use its own scrollbar instead of using the dynamic page scrollbar.
|Wizard Floorplan – Dynamic Page|
|Calendar||Legend: Use consistent highlight colors across a product area.||Calendar – Legend|
|Expandable Text New!||The expandable text control provides access to truncated texts.||Expandable Text|
|Form / Simple Form||Guidance on action placement added.
Expand/collapse: Avoid using expand/collapse behavior in forms.
|Form / Simple Form|
|Export to Spreadsheet||Implement the shortcut Shift+Ctrl+E for the Export As… function.||Export to Spreadsheet – Menu Button|
|Illustrated Message New!||The new illustrated message control allows you to use a combination of message text and UX illustration. Its primary use case is to improve the user experience for empty states.||Illustrated Message|
|Invisible Message New!||New article on when to use the existing invisible message control. The control provides information to users of assistive technologies when dynamic changes are only shown on a visual level (for example, when a search result list appears).||Invisible Message|
|Link||Link with icon: Icon is supportive only. A tooltip is not required.||Link – Link with Icon|
|Message Box||Delete confirmation: If several objects are being deleted, don’t include the object ID and description in the message.||Message Box – Confirmation for Delete|
|Planning Calendar||Legend: Use consistent highlight colors across a product area.||Planning Calendar – Legend|
|Responsive Table||Updates on keyboard shortcuts:
Select: For single selection master-detail scenarios, always use “single selection master” mode. “Single selection left mode” is not recommended.
Selection: Never disable the selection checkbox.
Columns: Additional guidance on optimizing the column width for tables that have only a few columns.
Drag and Drop: App teams must provide corresponding keyboard support.
Add Items: Additional guidance on item states (new, recent, added).
Sort: Ensure that tables are sorted meaningfully when they first load.
|Single Planning Calendar||Legend section was added.||Single Planning Calendar – Legend|
|Smart Field||Validation for combo boxes: You can now check if the value entered is available in the drop-down list.
Do not use the
|Smart Form New!||New guideline topic for the existing smart form control.||Smart Form|
|Smart List New!||New guideline topic for the existing smart list control.||Smart List|
|Smart Table||Terminology for properties has been adapted to distinguish between OData properties (OData entity property) and SAPUI5 properties (property).
The Show Details/Hide Details section has been enhanced and examples added.
Additional limitations on use of the Maximize/Minimize feature for showing tables in full screen mode.
App-Specific Actions: Guidance on toolbar border design added.
Responsiveness: Developer hint added.
|UI Elements||New overview topic for UI elements. Includes a link list of all UI elements, grouped by category for easier scanning/searching.||UI Elements|
|Variant Management||Save View Dialog: Apply Automatically option is not recommended if the selection is likely to result in long loading times.||Variant Management – Save View Dialog|
SAP Fiori Elements Framework
|Object Page Header||You can enable actions that navigate the user to another page or application based on the value of a specific field.||Object Page Header – Conditional Navigation Actions|
|Object Page Content Area||You can add dynamic side content to the right of an object page subsection.
Conditional navigation actions: In the toolbar for an object page form, you can enable actions that navigate the user to another page or application based on the value of a specific field.
|Object Page Content Area|
|Object Page Footer Bar||Apply action: Now, when a subobject is open in the flexible column layout with three columns, the Apply action closes the column with the subobject and returns the user to the object page.
Message popover button: The message button now conforms to design guidelines in the following ways:
|Object Page Footer Bar|
|Table Types||You can now add an analytical table to a list report.||Table Types – Intro|
|Table Toolbar||You can enable actions that navigate the user to another page or application based on the value of a specific field.||Table Toolbar – Conditional Navigation Actions|
|Table Features||Column width: The content of a table column determines its width. You can change this.
|Conditional navigation actions: You can enable actions that navigate the user to another page or application based on the value of a specific field.
Avatar and other images: You can set tooltip text to display when the focus is on the avatar.
|Designer Toolkit New!||Overview topic for the Designer Toolkit section.||Designer Toolkit|
|SAP Fiori Design Stencils||SAP icon font download updated to version 4.9.
Font 72: New download links for Font 72 monospace (desktop and web).
|SAP Fiori Design Stencils – Overview|
|Sketch||What’s New in Sketch Stencil Version 1.88||Design Stencils for Sketch|
|Axure RP||What’s New in Axure RP Stencil Version 1.88||Design Stencils for Axure RP|
|Adobe XD||What’s New in Adobe XD Stencil Version 1.88||Design Stencils for Adobe XD|
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.