The SAP Fiori Design Guidelines for web applications have been updated. The latest version includes new features implemented with SAPUI5 release 1.56, and numerous updates to the guidelines for existing UI elements and patterns.
New with this edition
UI element states
When should you gray out an input field and when should you hide it? And what exactly is the difference between read-only and display-only elements? A new guideline on UI element states walks you through all the different states a UI element can have and explains when to use each one. There’s also guidance on how the different states can be combined.
Export to spreadsheet
Users often want to work with their SAP Fiori app data in a Microsoft Excel file or other spreadsheet application. There’s now a utility for exporting data from an app to a spreadsheet. You can read more about how to incorporate this feature in your designs in the Export to Spreadsheet article.
New features in UI elements
We’ve also seen some helpful enhancements to UI elements. Responsive tables now come with a “sticky header” option that freezes the header when the user scrolls down.
You can now also balance the column layout in forms. This makes better use of the horizontal space, saving users from scrolling down more than necessary.
For an overview of all new and updated content, take a look at the article What’s New in Guideline Version 1.56.