Product Information
Out Now – SAP Fiori Design Guidelines, Version 1.88
The SAP Fiori design guidelines for web applications have been updated to version 1.88. In addition to the usual content updates, we’ve also revised the guideline navigation and added a new feedback option.
New guidelines
Illustrated messages
The long-anticipated illustrated message control is now available in SAPUI5. You can use it to vastly improve the user experience for empty states by combining a solution-oriented message text with a UX illustration and a call to action.
Illustrated messages for empty states
These three new topics explain why it’s important to design carefully for empty states, how UX illustrations are designed to work across different container and device sizes, and how illustrated messages are structured.
Illustration and message pairs are provided out of the box for standard scenarios (with more to come), so you won’t need to start from scratch. The best practices in the guidelines will help you to tailor them to your own scenarios.
Deleting objects
As part of a series of updates to the guidelines on object handling, there’s now a dedicated topic on deleting objects. It covers the interaction patterns when deletion is triggered from a list report or from an object page.
Expandable text
For responsive tables, lists, and forms, you can now show longer descriptions as an expandable text. To save space, the text truncates automatically after a given number of characters. Users can then expand the entry to see the full text, which appears either inline or in a popover.
Expandable text – collapsed
Expandable text – expanded inline
Expandable text – expanded as popover
Smart controls
With version 1.88, we added guidelines for the existing smart form and smart list controls, which are both supported for OData version 2.
- The smart form can create read-only and editable views of a form using the OData annotations for the smart fields. It also provides a toolbar with a title.
- The smart list is alternative approach for creating lists or trees.
Invisible messages
There’s now a dedicated guideline for the existing invisible message control.
Like the invisible text control, the invisible message control is designed to support users of assistive technologies. The invisible message provides information on dynamic changes to the UI that are otherwise only shown on a visual level. For example, you can use an invisible message to let users know when a result list is shown, or when a multi-level dialog changes its appearance.
Content updates
Responsive table
The responsive table now supports additional keyboard shortcuts when the focus is on a row:
- Space selects an item
- Del triggers the Delete button
- Enter triggers navigation
- F2 triggers the Edit button
In addition, we recommend Enter as a shortcut for Create when adding items, and Ctrl+Comma for opening the personalization dialog.
Situation handling
The guideline for situation handling has been updated to reflect the redesigned “My Situations” app with a flexible column layout.
My Situations app with flexible column layout
There’s also more information on layout details for the situation page, and how to switch between situations if more than one situation occurs for an object or for an item in an object list.
Other content updates
For a full overview of all updates, see What’s New in Guideline Version 1.88.
SAP Fiori design stencils
You can see what’s been updated in the SAP Fiori for web stencils and download the latest versions below:
- Sketch: What’s new in 1.88 | Download version 1.88
- Axure RP: What’s new in 1.88 | Download version 1.88
- Adobe XD: What’s new in 1.88 | Download version 1.88
We’re constantly expanding our stencil library, so be sure to check for the latest download before you start working on a new app design.
Using the guidelines
Improved navigation
Revised navigation menu
In addition, all the top-level menu items now have an introduction for better orientation. For the UI Elements area, the overview also includes a helpful list of all UI element topics.
All guidelines on choosing the right control are now in a separate When to Use section under UI Elements.
When to use which control
New feedback option
You may have noticed the new blue feedback button on the right of the screen. Please let us know if you’re finding the guidelines useful, or if something is wrong or missing. We’ll do our best to follow up and improve the content.
Feedback option
Note: To protect your privacy, any feedback you provide is anonymous, which means we can’t reply to any questions. If you have a specific design question or proposal, please feel free to post your question in the SAP Fiori Community instead.
Very nice to see all these improvements
I can easily see worthy improvements to the user experience coming from the new possibilities the new controls and enhancements offer.
Congratulations on the amazing work!
Hope to see skeleton states in UI5 one day! Loading spinner or busy state is really outdated. For some screens maybe used but putting busy states to all controls should be improved! I believe this will help on UX a lot.
Sample:
https://ant.design/components/skeleton/
sample from FB

Linkedin:
gdrive:
youtube:
Excellent news!
Just one thing: the "object handling" link is pointing to a non-reachable url, not https://experience.sap.com/fiori-design-web/manage-objects/.
Hi Vinicius,
Thanks for the catch! I fixed the link (I'd accidentally inserted the link to a version on an internal server).
Best regards,
Susanne
Great news! The long-anticipated controls would clearly improve user experience.
Thanks!
The illustrators are very nice!
https://experience.sap.com/fiori-design-web/ux-illustrations/
The illustrators are great. Is it possible to include them in the Axure Stencils?
And provide them as separate SVG#s (so we can edit them)?
Thank you!
Ravid
Hi Ravid,
Glad you like the illustrations!
Axure stencils for illustrated messages are already in the making and should be available with the next update. However, there are no plans to publish the SVGs.
Best regards,
Susanne
Hi Ravid,
We've uploaded an updated version of the Axure RP stencils, which now includes illustrated messages.
Check out the updated file here:
https://experience.sap.com/fiori-design-web/design-stencils-for-axure-rp/#download-installation
Best regards,
Susanne