What’s New in Guideline Version 1.120
Intro
This article provides an overview of the updates to the SAP Fiori web design guidelines with guideline version 1.120.
[internal_only]
Get Started
[/internal_only][internal_only]
Look, Feel, and Wording
[/internal_only][external_only]
Look, Feel, and Wording
[/external_only][internal_only]
AI and Joule
The navigation node has been renamed from “Designing Intelligent Systems” to “AI and Joule”.
In addition, the navigation has been restructured:
- Dedicated section for “Joule Assistant”
- All guidelines are grouped under “Guidelines”:
- New generative AI guidelines
- Older guidelines from the former “Designing Intelligent Systems” section (Situation Handling, Matching, etc.). These guidelines are currently being reviewed.
- Patterns section now contains the AI UI Starter Kit
- The AI UI Starter Kit and the Joule Web UI Kit can also be found under “Designer Toolkit” -> “UI Kit”.
Added links to:
- Artificial Intelligence at SAP (Work Zone)
- Official Joule announcement
- Internal Joule FAQ document
Terms added to the glossary section for generative AI:
- Custom prompt
- Embeddings
- Fine-tuning
- Guided prompt
- Hidden prompt
- Prompt
- Quick prompt
A set of quality checkpoints for the SAP AI experience, including:
- Value added by the AI use case
- AI standards
- AI excellence
- Generative AI and embedded Joule
- AI Ethics
This article explores the risks associated with generative AI and how to mitigate them by:
- Designing to avoid misuse, harmful content, and bias
- Ensuring the AI system is reliable and transparent – putting people first
This new set of articles describes how to use existing components to indicate AI involvement:
- AI buttons for AI-powered actions
- AI and Joule colors
- AI icon to indicate embedded AI
- Joule icon variants for the Joule assistant and for marketing purposes
Now with additional links:
[/internal_only][external_only]
Designing Intelligent Systems
Introduction to application design for generative AI, including:
- SAP’s generative AI strategy
- SAP’s approach to developing AI design guidelines
Explains key AI terms in the following areas:
- Artificial intelligence
- Ethics and user-centered design
- Generative AI
- Machine learning (ML)
- Natural language processing (NLP)
[/external_only]
General Patterns
While the users are changing a business entity, the draft is saved every 20 seconds.
To incorporate changes into the active business entity or saved version, the user still needs to click the Save button.
The
Export As
dialog now contains select controls for the:
- Format of the file to export
- Destination for the export, when cloud is enabled on the customer’s instance
For the cloud destination, the primary action label in the dialog is “Export To…” and opens a cloud file browser where users choose the target location for the exported file through a remote repository.
After partial processing, when one or more items have been excluded from processing and one or more backend errors have occurred during processing, the summary message view dialog includes:
- Successfully processed items
- The backend error or errors
- An information message for each item excluded from the processing
UI Elements – SAPUI5
For accessibility purposes, the user can keep the message toast onscreen with the following keyboard shortcuts:
- Ctrl + Shift + M (Windows)
- Cmd + Shift + M (Mac OS)
UI Elements – SAP Web Components
Interaction Design Foundations
Foundation guideline for all components.
- Options for handling space constraints for text (wrapping, truncation, or a combination of both) and when to use them.
- Options for displaying the full text when a text is truncated.
Components
Note: The menu itself is covered in the Menu guideline.
Added variants and behavior for selection modes:
- Single selection
- Multi selection
Updated interaction design specification (version 1.1)
[internal_only]
SAP S/4HANA Only
[/internal_only][internal_only]
SAP Fiori Elements Framework
For both the simple content layout and multiple view layout, the creation of cards for the
Insights
section of
My Home
in SAP S/4HANA Cloud is supported, when My Home in SAP S/4HANA Cloud has been enabled. The
Add Card to Insights
option automatically appears in the overflow toolbar of the table in list report. You can turn off this feature.
With SAP Fiori elements for OData V4 these restrictions apply for the Insights cards:
- When users navigate from the card in the Insights section of the My Home page to the list report table, the table view is similar to its state at card creation, but it does not retain the changes in the position or removal of filter fields or table columns.
- The formatting of unit of measure fields differs between the Insights card and the list report table.
The
Share
menu can also include the
Microsoft Teams > As Card
option when the required settings have been made by the system administrators of SAP S/4HANA or SAP S/4HANA Cloud. We are communicating this only internally for now.
With Save as Tile, u sers can now save a dynamic tile for results shown after they have filtered for a relative date value, such as today or this year.
With both versions of SAP Fiori elements:
- In object pages, in create and edit modes, the grid table and responsive table contain an empty row. Users now receive guidance in completing the required fields for an empty row, as follows:
- With SAP Fiori elements for OData V4, a red asterisk (*) is displayed in the column header label for the mandatory fields.
- Both SAP Fiori elements for OData V2 and V4 show an error message strip above the table:
- When the table does not display mandatory columns. It instructs users to display the columns from the table settings.
- When mandatory fields are not filled. In addition to the message strip for the table, the mandatory field displays a value state message. “Enter a value” is the the placeholder message text. Replace the text to better specify for the users the value to enter, for example, “Enter a delivery date.”
- You can disable fields in the empty row so they are read-only at creation time and become editable afterwards for use cases where certain fields become relevant only after creation.
- By default, for draft-enabled applications, in a list report, the editing status is now displayed in the grid table, in a separate column next to the key column. The column is unlabeled. Users can hide or display it by deselecting or selecting Edit Status in the table personalization dialog.
With SAP Fiori elements for OData V2, a draft for a once empty row is saved after the users have shifted their focus away from the input field in the row and an interval of 20 seconds has passed.
With SAP Fiori elements for OData V4, for tables in object pages, the multi-input fields are now editable.
With both versions of SAP Fiori elements:
- When My Home in SAP S/4HANA Cloud is enabled, by default, the Add Card to Insights option is displayed in the overflow toolbar of list report tables with the single content and multiple view layouts.
You can ask the application development team to turn the option off.
- In the list report or object page, the copy action in the table toolbar applies to:
- Multiple rows for all tables including value help tables
- A range of selected cells for all tables except the responsive table
Users can select a range of cells with key combinations, or with their mouse by clicking and holding the mouse button while they select the cells.
With SAP Fiori elements for OData V2, by default, for all table types, when at least one filter is set, an infobar is displayed to summarize the filter criteria applied to the table data.
[/internal_only][external_only]
SAP Fiori Elements Framework
For both the simple content layout and multiple view layout, the creation of cards for the
Insights
section of
My Home
in SAP S/4HANA Cloud is supported, when My Home in SAP S/4HANA Cloud has been enabled. The
Add Card to Insights
option automatically appears in the overflow toolbar of the table in list report. You can turn off this feature.
With SAP Fiori elements for OData V4 these restrictions apply for the Insights cards:
- When users navigate from the card in the Insights section of the My Home page to the list report table, the table view is similar to its state at card creation, but it does not retain the changes in the position or removal of filter fields or table columns.
- The formatting of unit of measure fields differs between the Insights card and the list report table.
With both versions of SAP Fiori elements:
- In object pages, in create and edit modes, the grid table and responsive table contain an empty row. Users now receive guidance in completing the required fields for an empty row, as follows:
- With SAP Fiori elements for OData V4, a red asterisk (*) is displayed in the column header label for the mandatory fields.
- Both SAP Fiori elements for OData V2 and V4 show an error message strip above the table:
- When the table does not display mandatory columns. It instructs users to display the columns from the table settings.
- When mandatory fields are not filled. In addition to the message strip for the table, the mandatory field displays a value state message. “Enter a value” is the the placeholder message text. Replace the text to better specify for the users the value to enter, for example, “Enter a delivery date.”
- You can disable fields in the empty row so they are read-only at creation time and become editable afterwards for use cases where certain fields become relevant only after creation.
- By default, for draft-enabled applications, in a list report, the editing status is now displayed in the grid table, in a separate column next to the key column. The column is unlabeled. Users can hide or display it by deselecting or selecting Edit Status in the table personalization dialog.
With SAP Fiori elements for OData V2, a draft for a once empty row is saved after the users have shifted their focus away from the input field in the row and an interval of 20 seconds has passed.
With SAP Fiori elements for OData V4, for tables in object pages, the multi-input fields are now editable.
With both versions of SAP Fiori elements:
- When My Home in SAP S/4HANA Cloud is enabled, by default, the Add Card to Insights option is displayed in the overflow toolbar of list report tables with the single content and multiple view layouts.
You can ask the application development team to turn the option off.
- In the list report or object page, the copy action in the table toolbar applies to:
- Multiple rows for all tables including value help tables
- A range of selected cells for all tables except the responsive table
Users can select a range of cells with key combinations, or with their mouse by clicking and holding the mouse button while they select the cells.
With SAP Fiori elements for OData V2, by default, for all table types, when at least one filter is set, an infobar is displayed to summarize the filter criteria applied to the table data.
[/external_only][internal_only]
Designer Toolkit
We’ve restructured/renamed the following topics in the
Designer Toolkit
section of the navigation menu:
- The menu node SAP Fiori Design Stencils was renamed to UI Kit.
- The menu nodes for design stencils that are no longer being updated were removed (Sketch, Adobe XD, Axure RP). You can still access these older download files in previous guideline versions.
- The SAP Fiori Design Stencils Overview article was renamed to Download Fonts. It now contains only the download files for the Font 72 family and SAP icon fonts.
- The article Design Stencils for Figma was renamed to SAP S/4HANA Web UI Kit. The introduction was updated to provide more context.
: The font files have been extended to include Cyrillic characters for Bulgarian.
SAP icon font: Download files were updated to version 5.7 (Horizon theme) and 4.19 (Quartz theme).
Note: The SAP Web UI Kit is currently only available internally.
[/internal_only][external_only]
Designer Toolkit
We’ve restructured/renamed the following topics in the
Designer Toolkit
section of the navigation menu:
- The menu node SAP Fiori Design Stencils was renamed to UI Kit.
- The menu nodes for design stencils that are no longer being updated were removed (Sketch, Adobe XD, Axure RP). You can still access these older download files in previous guideline versions.
- The SAP Fiori Design Stencils Overview article was renamed to Download Fonts. It now contains only the download files for the Font 72 family and SAP icon fonts.
- The article Design Stencils for Figma was renamed to SAP S/4HANA Web UI Kit. The introduction was updated to provide more context.
: The font files have been extended to include Cyrillic characters for Bulgarian.
SAP icon font: Download files were updated to version 5.7 (Horizon theme) and 4.19 (Quartz theme).
[/external_only]
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, or new/updated design guidelines for SAP web components.
- 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.