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.

Sticky header in a table

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.

Not logged in
  • Ghayth Mkhinini   3 months ago

    When you write new in this edition: do you mean the new guidlines edition? or do you mean the new edition of controls/feature as part of the SAPUI5 library? Or maybe both? Sometimes we read new guidelines but for already exisiting SAPUI5 controls and elements.
    A bit more specification is appreciated. Thank you 🙂

    • Andrea Stark   3 months ago

      Hi Ghayth,

      We mean both, the new Guideline version 1.56 which refelcts the latest implementet features with SAPUI5 release 1.56.
      Thanks for your comment and best regards
      Andrea

    • Susanne Wilding   3 months ago

      Hi Ghayth,

      Just to expand on this a little: each version of the design guidelines contains two types of updates. 1) updates for new or changed SAPUI5 controls that impact the SAP Fiori design, and 2) general updates that can be independent the UI5 version. To make this clearer, we’ve now adapted the introduction to the What’s New page. Thanks for the feedback!

      Kind regards,
      Susanne