SAP Fiori Design Guidelines — Version 1.82 Available

We’ve updated the SAP Fiori Design Guidelines for web applications. Read on to see what’s changed with guideline version 1.82.

New with this edition

Smart table

If you use OData version 2.0, you’re probably already familiar with the smart table wrapper control for generating tables based on OData annotations. But how do you decide if a smart table or a regular table is best for your use case? And which settings do you need to work with to achieve the right behavior?

The new smart table article walks you through the usage scenarios and features of the smart table control. You can see which capabilities are supported for the different table types (responsive table, analytical table, grid table, or tree table), how to use them, and where they are defined. This article complements the existing guidelines for the individual table types, but has a stronger implementation focus.

HTML

What if you want to build an SAP Fiori app, but your use case isn’t covered by the standard SAP Fiori controls? In some cases, using the freestyle HTML control can be the answer. The new HTML topic offers guidance on when and when not to use the HTML control, and details the additional capabilities you’ll need to implement manually to build a compliant SAP Fiori app.

Badges for buttons

You can now use badges to show a count on buttons.

Buttons with badges

Explainable AI

As intelligent algorithms gain traction, how we explain the results of artificial intelligence is key to gaining the user’s trust. The Explainable AI article now includes more detailed guidance and examples for the different progressive disclosure levels.

Explanation popover for a single AI result

Latest SAP Fiori design stencils

The stencil library for SAP Fiori web applications now contains over 250 stencils for prototyping SAP Fiori apps, including:

• Nearly 100 UI elements
• Key layouts, floorplans, and frameworks
• Stencils for special scenarios like tool development or designing intelligent systems
• Foundation-level stencils for artifacts like colors and shadow levels

To make your life easier, we provide multiple variants for each element or floorplan, including cozy and compact form factors and stencils for different screen sizes (S, M, L, XL). Some stencils also come with different use case and color variants. You can download the stencils with Sketch, Adobe XD, or Axure RP.

With guideline version 1.82, we’ve added stencils for the table toolbar, various date controls, tree controls, and explanations for AI results. You can see what’s been added and changed below:

• Sketch: What’s New in 1.82 | Latest Download
• Axure RP: What’s New in 1.82 | Latest Download
• Adobe XD: What’s New in 1.82 | Latest Download

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.

What else has changed?

For a complete overview of all new and updated content, see What’s New in Guideline Version 1.82.

This post originally appeared on SAP User Experience Community and on SAP Community.