This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.92.
|Complex Objects – Global Flow (Create, Edit)||Topic reworked and aligned with the guideline for the local flow.||Complex Objects – Global Flow (Create, Edit)|
|Complex Objects – Local Flow (Create, Edit)||Global vs. Local Flow section added.||Complex Objects – Local Flow (Create, Edit)|
|Mass Edit||Simplified labels for presets:
< Keep values > : keep existing choices
|Navigation||Various updates throughout the article.||Navigation|
|Calendar Card New!||The calendar card is an interactive calendar with a chronological list of appointments for the selected day. It is a type of integration card.||Calendar Card|
|Calendar Date Interval||New When to Use section.
Components section added.
Behavior and interaction: Section on navigation by year interval added.
|Calendar Date Interval|
|Card New!||Cards can be used to launch an app or navigate to page content.||Card|
|Chart Toolbar||Content has been rearranged/enhanced to align with the other toolbar guidelines.||Chart Toolbar|
|Color Palette||Behavior and Interaction: info on the
||Color Palette – Behavior and Interaction|
|Color Palette Popover||Behavior and Interaction: info on the
||Color Palette Popover – Behavior and Interaction|
|Expandable Text||Behavior and Interaction: info on Empty State added.||Expandable Text – Empty State|
|Export to Spreadsheet||The export now supports a percentage format.
For date/time fields, app teams can now opt to export the local time (from the SAP Fiori launchpad) instead of UTC.
|Export to Spreadsheet – Content Formatting|
|Icon Tab Bar||Responsiveness: The icon tab bar now supports a second overflow mode with buttons on both sides of the control.
Tabs as process steps: Don’t use the triple-chevron icon in the anchor bar of an object page.
Changing the order of tabs: Don’t enable tab reordering if tabs are being used for anchor bar navigation.
|Icon Tab Bar|
|Image||The guideline has been fully revised and now provides more details on usage, behavior, and screen reader support.||Image|
|Message Box||The coloring of the messaging icons used in the message box has been inverted. The semantic color is now the fill color.
|Multi-Input Field||Adding tokens: Width of the suggestions dropdown can exceed the width of the input field, but not the width of the browser window/screen.
Reviewing tokens: To select tokens, click/tap the token or use Space to select the focused token.
Using value help: You can now change the value help icon to better indicate the type of data in the field.
Grouping: Tabular suggestions can now make use of the responsive table/pop-in behavior.
Styles: Value state texts can now contain links.
Guidelines: In display mode, show the token texts separated by bullet points. Use an overflow if the list exceeds 1 line.
|Quick View||The quick view now supports the avatar control.||Quick View – Layout|
|Rating Indicator||Visual mode event added.||Rating Indicator – Properties|
|Select||Usage: Recommended number of items revised from max. 12 items to 2-8 items.
|Text||Guidelines section added.||Text – Guidelines|
|Time Picker||The guideline has been fully revised to reflect the new design of the time picker.||Time Picker|
|UI Element States||Control states: Additional guidance and examples for enabling/disabling and displaying/hiding UI elements.
Added general guidance on the initial focus position.
|UI Element States|
SAP Fiori Elements Framework
List Report Header
|The pin feature is enabled only when the list report contains a responsive table, and not when the list report contains the grid table and analytical tables that don’t allow scrolling.||List Report Header|
List Report Content Area
|For list reports with multiple views, you can enable creation of business objects via a dialog with SAP Fiori elements for OData V2.||List Report Content Area|
|By default, users receive an unsaved changes message when they navigate away from a draft of the main object page.||Object Page – Overview|
Object Page Header
|With SAP Fiori elements for OData V4:
With SAP Fiori elements for OData V2, by default a link in the header now displays both the text and ID.
|Object Page Header|
Object Page Content Area
|Object Page Content Area|
|With SAP Fiori elements for OData V4:
With SAP Fiori elements for OData V2, you can enable object creation from the list report multiple view layout, in addition to the simple content layout.
|SAP Fiori Design Stencils||Font 72: 72 font families for desktop and web updated.
Icon font: Updated to version 4.10.
Business Suite icon font: Updated to version 1.073.
|SAP Fiori Design Stencils – Overview|
|We now provide SAP Fiori design stencils for Figma, along with corresponding Quartz Light styles.
In the future, all new SAP Fiori design stencils will be provided for Figma only.
|Design Stencils for Figma|
|The stencil files for Sketch, Axure RP, and Adobe XD are no longer being updated.
However, the existing stencil files for guideline version 1.90 and below will remain available.
|Design Stencils for Sketch|
Using Figma Stencils with Other Design Tools New!
|How to transfer SAP Fiori design stencils from Figma to Sketch, Axure RP, and Adobe XD (no Figma license is needed).||Using Figma Stencils with Other Design Tools|
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.