• The arrow buttons for navigating between pages are always visible on mobile devices.
• The tap interaction is required as an alternative to swiping to comply with accessibility standards.

• The arrow buttons for navigating between pages are always visible on mobile devices.
• The tap interaction is required as an alternative to swiping to comply with accessibility standards.

Under More Colors…, the color picker defaults to the last color used. If no color has been selected, it defaults to white.

• The limit for a search string is 1000 characters.
• You can hide the Editing Status filter from the list report filter bar. This feature was already available with SAP Fiori elements for OData V2.

• The generic context menu is now available for tree tables and can contain Move Up and Move Down actions for tree table nodes.
• By default, a newly created tree table node is always displayed first in the table or as the first child below its parent node, even when a sort or a filter is applied to the table.

Instead, you can enable an option to display the nodes in the order that they were created in the table or parent node. This feature allows users to act directly on the table hierarchy when they create new table elements or reorder the table nodes.

• An application, so the setting applies to all grid tables and responsive tables in all object pages
• A table, so it applies only to the table

When settings are made at both application and table levels, the table setting takes priority.

Additionally, with SAP Fiori elements for OData V2, you can enable or disable the feature at the object page level.

When the settings are made at application, object page, and table levels, the setting at the most granular level takes priority, as follows: table, object page, application.

• The limit for a search string is 1000 characters.
• The export action excludes table columns that contain a multi-input field (1:N).
• You can enable the mass edit for a grid table or responsive table in the object page. When the object page is in display mode, users can apply the mass edit to the subobjects in a table.
• You can define the fields that display in the Edit dialog for mass edit. This feature was already available with SAP Fiori elements for OData V2.

By default, the Edit dialog contains all the table columns that are currently visible and editable.

Now, the application team can define the fields that display in the dialog, by both:

• • Including fields in the dialog that are not displayed in the table
  • Excluding fields from the dialog fields that are displayed in the table

SAP Business Suite icon font: Download files were updated to version 2.086 (Horizon theme) and 1.086 (Quartz theme).

• SAP User Research Panel: An opportunity for SAP end-users to have a direct impact on the development and enhancement of our products.
• User Research Method Cards: Effective user research methods.
• Inclusive Research Handbook: Advice, tools, and templates for conducting research in an inclusive way.
• Scenes Toolkit: Predefined illustrations that can be used to create storyboards.

This article replaces the former User Research Method Cards article.

Updated instructions on how to preview themes or simulate custom theming in Figma.

Users can now see situations displayed in business apps and in an app dedicated to situations. They can also be informed by notifications on SAP Fiori launchpad or by email.

Initially, users see the minimal display for a situation. They can seek additional levels of detail about it, according to their needs and goals.

There are two versions of the app:

• My Situations – Extended comes with the extended framework for Situation Handling and is the reference app for UX design.
• My Situations comes with the standard framework for Situation Handling and is a simplified version that contains only a work list.

The cloud file browser is composed of controls embedded in a dialog.

In the development and test systems, the system information bar allows users to quickly identify the system they are using. The system information bar is located above the shell bar. By default, the system information bar is turned on in all non-production systems.

• In applications with Microsoft Team integration, the contact quick view card displays options for starting a Microsoft Teams audio call, video call, or chat with the contact.
• For sections or subsections that contain a single text area, application teams can enable an option to display the section or subsection title instead of the text area label when the object page is in display mode. With the option enabled, the label is only displayed in edit mode if the field is mandatory.

Object Page Content Area – Section and Subsection Titles

• A table

Users focus anywhere in the table or select an empty row and paste the data. One or more new rows are created for the pasted data.

This feature is available only for draft-enabled applications and for tables where inline creation or the insertion of empty rows has been enabled.

• A cell or range of cells, only in grid and responsive tables

Users select a cell or cell range within the table and paste the data. If the selected cell or cells are in:

• • Active or draft rows, the pasted data replaces the values in those rows.
  • An empty row, new rows are created for the pasted data.

To paste, they can use the Paste action in the toolbar or use a keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).

With SAP Fiori elements for OData V4:

• The default Copy action in the table toolbar, can now be disabled in all toolbar tables or in or specific ones.
• The default limit for the number of rows that Export action can export is 1000. The application development team can change the limit.

Table Toolbar – Export

Planning Calendar

Single Planning Calendar

Tree

Planning Calendar

Single Planning Calendar

Tree

• Component states
• Focus states
• Interaction states
• Selection states

In addition, there’s a new article on how states can be combined.

You can access all the guidelines on states via the States overview topic, including the existing Value States guideline.

Component States
Focus States
Interaction States
Selection States

State Combinations

Note: The guideline describes the target design. The web component doesn’t yet offer all the specified features.

• All table types with SAP Fiori elements for OData V2
• All table types except the tree table, with SAP Fiori elements for OData V4

The generic context menu generally behaves like the standard context menu described in the articles for each table type.

The context of the menu can be a single row or multiple selected rows.

The following action types are available on the generic context menu:

• All toolbar actions that become active only if rows are selected

Developers call them “bounded toolbar actions” or “context-dependent actions.”

• The “Open in New Tab or Window” action

It allows up to 10 items to be opened in separate tabs or windows depending on the user’s browser settings.

Similar to the standard context menu, if a control inside a row is the “click target”, and the control also provides a context menu, the control menu “wins”.

Note: The guideline describes the target design. The web component doesn’t yet offer all the specified time picker features.

The Share: Microsoft Teams menu can include the As Card option.

• SAP Fiori elements for OData V4 now:
  • Uses the lightbox control to allow a larger view of the image
  • Gives you control over the visibility of items in the Share menu
• SAP Fiori elements for OData V2 now allows for a message strip in the object header.

• You can now ask application developers to ensure the width of table columns is adjusted to the contents of both the column and the column header.
• When a table column contains a combination of fields, such an ID and a description or a field group, the quick sort allows users to specify a sort and sort order for each field in the column.

• SAP’s generative AI strategy
• SAP’s approach to developing AI design guidelines

• Artificial intelligence
• Ethics and user-centered design
• Generative AI
• Machine learning (ML)
• Natural language processing (NLP)

To incorporate changes into the active business entity or saved version, the user still needs to click the Save button.

• 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.

• Successfully processed items
• The backend error or errors
• An information message for each item excluded from the processing

• Ctrl + Shift + M (Windows)
• Cmd + Shift + M (Mac OS)

• 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.

New web component guideline.

New web component guideline for the menu button.
Note: The menu itself is covered in the Menu guideline.

New web component guideline.

Added variants and behavior for selection modes:

• Single selection
• Multi selection

Updated interaction design specification (version 1.1)

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.

• 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.

• 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.

• 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.

SAP S/4HANA Web UI Kit

SAP icon font: Download files were updated to version 5.7 (Horizon theme) and 4.19 (Quartz theme).

Each article contains a basic design overview with interactive examples.

You’ll now find it in the top-level navigation above “General Patterns”.

• If you are using desktop controls, replace them with responsive controls for a mobile device. However, we do not recommend using the sap.ui.commons library.
• Analytical table, tree table and grid table are not fully responsive. They are available only for desktops and tablets, so when you use them you will need to take an adaptive approach by offering an additional UI for smartphones.

• Before processing, if the action cannot be applied to one or more items, a warning dialog asks the user to decide whether to process the eligible items.
• Processing is blocked because one or more items require the user to decide to continue with processing the items or to skip them.
  There are two cases:
  • One warning. The user can ignore the warning and process the item, or skip the item.
  • Multiple warnings. The user can ignore the warnings and process all the items, or skip all the affected items. Processing is only interrupted once.

Worklist Floorplan

• Create a new Fiori application with reduced complexity, not an exact match of the desktop application.
• With the new application, address the most important use cases for users in a mobile context. The responsive controls (responsive table, list or tree,) or a relevant control for your use case (for example a chart or the category navigation pattern) may suffice.

Worklist Floorplan – Responsiveness

Grid Table

Smart Table

Tree Table

• Create a new Fiori application with reduced complexity, not an exact match of the desktop application.
• With the new application, address the most important use cases for users in a mobile context. The responsive controls (responsive table, list or tree,) or a relevant control for your use case (for example a chart or the category navigation pattern) may suffice.

Grid Table – Responsiveness

Smart Table – Components

Table Overview – Desktop-Centric Tables

Tree Table – Responsiveness

For smart charts it can include a Chart tab to allow users to set the visibility of chart dimensions and measures, in addition to the Sort and Filter tabs.

The previous sap.m.P13nDialog control has been deprecated.

• Common.QuickInfo, when it’s visible
• The column label, in all other cases

Tooltips are available only in desktop applications because users must hover their mouse on the column header to see them.

Alternative triggers: In addition to the date range input field, you can set a button or link to trigger the date range selection popover.

Exception: Always place the Paste button last in the business action group.

Users can open the time picker from a button or link, as well as from the time input field.

• For Boolean attributes, the operator dropdown is disabled by default and the combo box is used instead.
• If the possible values for a condition are fixed, you can choose to use a combo box instead of the operator list.

• All the tables and charts on the page
• Individual tables and charts

Note: The stencil library may not fully mirror the implementation for a specific SAPUI5 version.

If you want to allow users to forward an object to other users, use one of the standard Share functions, such as Send Email.

SAP S/4HANA only:
For business workflows (approve, reject, forward), use the My Inbox app.

Wrapping and Truncating Text

Wrapping and Truncating Text

Table Overview – Grid Table

• Removed use case “comparison and analysis”.
• Don’t use the side panel with an object page.
• Don’t use the side panel for an additional table, but only to provide filters and layout properties for pivot tables.

Icon tabs: Icon tabs in the side panel don’t support semantic colors. Images were adapted accordingly.

This menu item opens a separate window where users can directly share a link to a business application in the SAP S/4HANA Cloud system with co-workers.

• Application teams can place a generic copy action in the header so the user can create a new object with the same data as the current object.

SAP Business Suite icon font: Download file updated to version 2.083 (Horizon theme) and 1.083 (Quartz theme).

Note: The stencil library may not fully mirror the implementation for a specific SAPUI5 version.

All interim guideline versions have been replaced by the correct SAPUI5 version (for example, guideline version 2.08 is now shown as 1.108).

Tokens help maintain alignment and consistency in a design system and replace hard-coded values with self-explanatory names that are easy to map to UI components.

The article covers the different types of token, how they are structured, how they relate to theme variables, and how they are connected to style libraries.

This new guideline outlines the message patterns for the following scenarios:

• Success: All items were processed successfully
• Failure: No items can be processed / were processed
• Partial Processing: Only some items can be processed. Others can’t be processed or require manual validation.

• Display information in the user’s timezone.
• Show the timezone only if required by the use case.

Dialog

Dialog – Messaging within a Dialog

List Report – Header

With SAP Fiori elements for OData V4, in edit mode, below a text area, you can display the number of characters allowed in it. As the users enter text, that number decreases to show how many characters remain.

You can replace the text so users better understand it.

• Horizon: 5.03
• Quartz: 4.15

Updated SAP Business Suite icon font for the Horizon and Quartz themes:

• Horizon: 2.081
• Quartz: 1.081

Note: The stencil library may not fully mirror the implementation for a specific SAPUI5 version.

Images updated to reflect the illustrative style with the Horizon theme.

Using the object status can improve readability, since the labels and values have different colors. This makes them stand out better than attribute texts.

• With SAP Fiori elements for OData V4, you can display two related fields side by side with a single label, even when they correspond to separate properties on the backend.

You can also display these fields as links with different navigation targets.

• With SAP Fiori elements for OData V4, with draft-enabled applications, users can now trigger the validation of a draft object data by pressing the Enter key while their cursor is in a field on the object or subobject page.

This feature was available for SAP Fiori elements for OData V2 in the previous release.

The default does not apply in the exceptional cases where there’s sufficient onscreen space.

• Focusing out of a field or switching from one field to another manually or using the “Tab” key only validates the field that was previously in focus.
• Enter triggers validation of the entire form or all forms in the object.

Updated guidance for the message button: The count on the button should indicate the number of messages of the most critical message type (rather than just errors).

When you turn off the messages, a draft version of the object is kept for the user to return to later.

The stencils are based on SAPUI5 with examples from SAP S/4HANA. Separate Figma libraries are available for the cozy and compact formats:

• S/4HANA Web UI Kit Compact
• S/4HANA Web UI Kit Cozy

The Horizon theme will be used for all stencil updates from now on. However, you can still download the last Quartz Light stencil version 1.98 here.

Section on detailed theming updated.

• Headline style
  • 72 Bold for headlines
  • 72 Black for main titles
• 72 font styles
  Additional font styles have been added to 72, such as 72 Semibold.
• Line Height
  New section on when to use which line height.

The following sections were added:

• Extra-small (dot) illustration size
• Illustration styles (illustrative, simple)
• UX illustrations for creative purposes
• Creating Illustrations

Updated draft/saved version switch.

Adapted terminology:

• Term Save is reserved for the finalizing action (transferring the draft content to the saved version).
• Info message in footer: Draft saved -> Draft updated
• Negative path action in the footer bar when creating/editing an object: Cancel -> Discard

Custom keyboard shortcuts are available for application-specific actions.

In applications with draft handling, the mass edit is available in responsive and grid tables:

• In the list report with both versions of SAP Fiori elements.
• In the object page with SAP Fiori elements for OData V4

With SAP Fiori elements for OData V2, a copy action button is now available.

The two empty rows let the user choose between entering data for one column at a time or for one row at a time.

When the user enters data in a field in one row and moves the focus away, a new row is displayed automatically.

You can enable the feature at the table level in draft-enabled applications.

SAP Icon Font: 3 different font sets are now available for download:

• Version 5.02: New SAP icon font, based on the Horizon theme.
• Version 4.14: Latest version of the existing SAP icon fonts, based on the Quartz theme. Cannot be installed alongside the Horizon icon font.
• Version 4 preview: Latest Quartz icon font for use alongside the new Horizon icon font.

SAP Business Suite icon font: Updated to version 1.078

For technical reasons, this is not yet reflected in the guideline version. Guideline version 2.00 corresponds to SAPUI5 version 1.100.

• With SAP Fiori elements for OData V2, the list report now offers an inline edit icon   that opens the corresponding object page in edit mode.

This feature is available for responsive and grid tables. When it’s enabled, the object page footer displays the Save and Next  button.

• With SAP Fiori elements for OData V4, table cells can now display multiple input values. In edit mode, the multiple values are displayed, but not editable.

The cells that displayed multiple values in the table onscreen are empty when exported to a spreadsheet.

• With SAP Fiori elements for OData V2, the object page header can now contain a link to an external website.
• With SAP Fiori elements for OData V4, to help users identify empty content in the quick view, when a detail contains no value, the empty  state indicator (–) is displayed.

• Ensures the app page is restored to the same state it was in when the user left it, including scroll position and table selection
• Improves the performance of the page reload after back navigation

• The Clear All   checkbox is enabled by default for:
  • Grid tables, analytical tables and tree tables in both list reports and object pages
  • Responsive tables in a list report

• The Select All  checkbox is enabled by default for a responsive table in an object page

Now, with SAP Fiori elements for OData V4, when the selection of multiple rows is enabled:

• The Clear All   checkbox is enabled by default for all tables, except a responsive table in an object page with anchor bar mode
• The Select All  checkbox is enabled by default for a responsive table in an object page

You can change the default.

With SAP Fiori elements for OData V4, in a responsive table, when a column contains a field group with more than one field, you can enable the display of a label for each field. The field group label is displayed as the column title in the header.

SAP Business Suite Icon Font: Updated to version 1.076

From stencil version 1.98, there are two separate libraries per stencil version: a compact library and a cozy library.

Walkthrough Screen: Info on Next Step button added.

Styles: The value state message can also be a formatted text.

Guidelines – Option List: Don’t disable items in the option list.

Behavior and Interaction: Info on Today button added.

Guidelines: Add additional descriptive texts using  ariaDescribedBy.

Behavior and Interaction: Info on Today button added.

The dynamic date range control is available in addition to the existing dynamic date control, which is only available for the smart filter bar.

Note: The dynamic date range control currently has the SAPUI5 status “experimental” (first available with SAPUI5 version 1.92).

• bdi: Bidirectional isolation of a certain text
• dir: Explicit text direction of a certain text

• Value State Message: The value message text can also be a formatted text.
• Value Help: App teams can exchange the value help icon.
• Autocomplete Suggestions:
  • You can set the maximum width of suggestion popover. As a result, the width of the suggestion popover can differ from the width of the input field.
  • The maximum width of the suggestion box is always slightly smaller than the width of the screen or browser window.
• Tabular Autocomplete: “Pop-in” behavior is now supported for tabular suggestions.
• Clear: You can add a Clear icon to the input field.
• Accessibility:  Added property “ariaDescribedBy” for providing additional information for assistive technologies (such as screen readers).

• Message Popover
• Message Strip
• Message View

Old style:

New style:

Message Strip

Message View

Components – List Subsection: New “Last Action” group for messages that result from the finalizing action, but are not related to a specific field.

• Additional options for selecting values (keyboard shortcuts, optional Select All checkbox).
• Clear: You can add a Clear icon to the multi-combo box.

Styles: The value state message can also be a formatted text.

Guidelines:

• Option List: Don’t disable items in the option list.
• Width: Wrapping option added.
• Alternatives for Display Mode:  If a form or table supports both display and edit modes, only use the multi-combo box in edit mode. In display mode, use a bulleted list or a horizontal list with bullet separators.

• Adding Tokens: Property for setting width of suggestions dropdown added.
• Grouping: The suggestion list should have no more than 4 columns. “Pop-in” behavior is now supported for tabular suggestions.
• Clear: You can add a Clear icon to the multi-input field.

Styles: The value state message can also be a formatted text.

Guidelines: Alternatives for display mode added (bulleted list or a horizontal list with bullet separators).

Behavior and Interaction:

• Select behavior – multiple selection: Clear All checkbox option added.
• New Column Header Level section, with details on how users can resize columns and how the other columns adapt.

Guidelines:

• Selection: When to use Select All and Clear All checkboxes in multiple selection mode.
• Columns – Best Practices: More details on the settings for column width (pixels/rem, percentage, auto layout) and the implications when a column is resized.
• Column Headers – Best Practices: How to handle wrapping and truncation in column headers.

Guidelines – Disabling Actions: Disable an action if the number of selected items doesn’t match the action (for example, disable Compare if only one item is selected).

Guidelines: Added: Consider using an expandable text as a display mode equivalent.

Properties: Use the properties ariaDescribedBy and ariaLabelledBy to provide additional information for assistive technologies.

• Static UI elements, such as labels
• Column headers in tables
• Button shortcuts

• Development terms and what you need to understand about them
• Design terms that may not be meaningful to some application developers
• Terms that both application designers and developers use, but for different concepts

SAP Business Suite icon font: Updated to version 1.075

Swapping libraries: A new Swap Library section explains how to apply another library to all components. This can be useful if you want to update your components from an older stencil version to the latest version.

Related Links: Added links to Figma sessions offered through LinkedIn Learning.

< Keep values > : keep existing choices
< Clear values > : clear all entries
< Leave blank > : leave fields empty (only appears if none of the selected items have existing values)

Components section added.

Behavior and interaction: Section on navigation by year interval added.

Examples added.

Note: This article relates to the SAPUI5 integration cards, which are technically distinct from the cards embedded in the overview page. Integration cards are not yet available for SAP S/4HANA.

For date/time fields, app teams can now opt to export the local time (from the SAP Fiori launchpad) instead of UTC.

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.

Old style:

New style:

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.

Option list:

• Do not disable values in the option list.
• To prevent translation issues, don’t use (None) to indicate that no items have been selected. Use (Not Selected), (No Values Selected) or other suitable and translatable text instead.

Value states: The default state (= no value state applied) has been renamed from “neutral” to “none” (as used in the SAPUI5 APIs).

Added general guidance on the initial focus position.

List Report Header

List Report Content Area

Object Page

Object Page Header

• The Display Saved Version / Return to Draft button is now available.
• By default, the text control allows for the entry of four lines of text. You can change the number of lines and enable growing mode for more space.
• You can rename the Related Apps button to Open in… for consistency in an environment with freestyle applications.
• You can use the address facet.

With SAP Fiori elements for OData V2, by default a link in the header now displays both the text and ID.

Object Page Content Area

• Groups in a form that have no fields are not displayed in the interface.
• With SAP Fiori elements for OData V2, by default a link in the content area now displays both the text and ID.

Table Toolbar

• You can chose to display the row count next to the table title or hide the table title.
• For both the list report and the object page, you can display a table with multiple views and display the row count on the segmented buttons or tabs. In this case, the table title does not display the row count.

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.

Table Features

• In a responsive table, the values from columns assigned high importance are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
• With SAP Fiori elements for OData V2, you can set a growing threshold, that is, the number of rows that display on initial load and that display additionally when the user clicks More.

Icon font: Updated to version 4.10.

Business Suite icon font: Updated to version 1.073.

Figma  New!

In the future, all new SAP Fiori design stencils will be provided for Figma only.

Sketch
Axure RP
Adobe XD

However, the existing stencil files for guideline version 1.90 and below will remain available.

Design Stencils for Axure RP

Design Stencils for Adobe XD

Using Figma Stencils with Other Design Tools  New!

< Keep values > : keep existing choices
< Clear values > : clear all entries
< Leave blank > : leave fields empty (only appears if none of the selected items have existing values)

Components section added.

Behavior and interaction: Section on navigation by year interval added.

Examples added.

Note: This article relates to the SAPUI5 integration cards, which are technically distinct from the cards embedded in the overview page. Integration cards are not yet available for SAP S/4HANA.

For date/time fields, app teams can now opt to export the local time (from the SAP Fiori launchpad) instead of UTC.

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.

Old style:

New style:

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.

Option list:

• Do not disable values in the option list.
• To prevent translation issues, don’t use (None) to indicate that no items have been selected. Use (Not Selected), (No Values Selected) or other suitable and translatable text instead.

Value states: The default state (= no value state applied) has been renamed from “neutral” to “none” (as used in the SAPUI5 APIs).

Added general guidance on the initial focus position.

List Report Header

List Report Content Area

Object Page

Object Page Header

• The Display Saved Version / Return to Draft button is now available.
• By default, the text control allows for the entry of four lines of text. You can change the number of lines and enable growing mode for more space.
• You can rename the Related Apps button to Open in… for consistency in an environment with freestyle applications.
• You can use the address facet.

With SAP Fiori elements for OData V2, by default a link in the header now displays both the text and ID.

Object Page Content Area

• Groups in a form that have no fields are not displayed in the interface.
• With SAP Fiori elements for OData V2, by default a link in the content area now displays both the text and ID.

Table Toolbar

• You can chose to display the row count next to the table title or hide the table title.
• For both the list report and the object page, you can display a table with multiple views and display the row count on the segmented buttons or tabs. In this case, the table title does not display the row count.

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.

Table Features

• In a responsive table, the values from columns assigned high importance are always displayed onscreen — as columns or in the pop-in area, depending on the screen size.
• With SAP Fiori elements for OData V2, you can set a growing threshold, that is, the number of rows that display on initial load and that display additionally when the user clicks More.

Icon font: Updated to version 4.10.

Business Suite icon font: Updated to version 1.073.

Figma  New!

In the future, all new SAP Fiori design stencils will be provided for Figma only.

Sketch
Axure RP
Adobe XD

However, the existing stencil files for guideline version 1.90 and below will remain available.

Design Stencils for Axure RP

Design Stencils for Adobe XD

Using Figma Stencils with Other Design Tools  New!

Edit mode: Actions Action Menu, Convert, and Move added

Forms: Option for 6-column layout added.

Loading behavior section moved to Behavior and Interaction. Loading for SAP Fiori Elements uses a skeleton template.

Column header: Added keyboard shortcuts for increasing/decreasing the width of a column (Shift+Right, Shift+Left) and for rearranging columns (Ctrl+Left, Ctrl+Right).

Single selection: Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.

Multiple selection: Never disable the selection checkbox.

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

Numbers and units: Amounts with currencies within a single column are now displayed in 72 monospace font.

Key identifier: If the text and ID are in one column, you can sort/filter/group by either the text or the ID, but not both.

More detailed guidance for adding items.

Clarified guidelines for initial sorting.

Add, remove, rearrange columns: Offer the shortcut Ctrl+Comma to open the view settings dialog.

More/Less: Modify “MORE” / “LESS” links to “More / Less” to be consistent with other components.

Responsiveness / column layout: You can now use up to 6 columns for size XL (available since SAPUI5 version 1.88). This gives you greater flexibility when organizing the content for larger forms.​

Select:

• Never disable the selection checkbox.
• Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.
• Updated guidelines (box).

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

More detailed guidance on adding items.

Column header: Added keyboard shortcuts for increasing/decreasing the width of a column (Shift+Right, Shift+Left) and for rearranging columns (Ctrl+Left, Ctrl+Right).

Single selection: Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.

Multiple selection: Never disable the selection checkbox.

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

Numbers and units: Amounts with currencies within a single column are now displayed in 72 monospace font.

Key identifier: If the text and ID are in one column, you can sort/filter/group by either the text or the ID, but not both.

More detailed guidance for adding items.

Clarified guidelines for initial sorting.

Add, remove, rearrange columns: Offer the shortcut Ctrl+Comma to open the view settings dialog.

• Users can (de)select all items using Ctrl+A. Select All should (de)select all items that the user can reach by scrolling.
• Never disable the select checkbox.
• Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.
• Updated guidelines (box)

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

View settings: provide individual buttons for sort, filter, group. Follow the tips in this new section, especially for sorting and filtering.

More detailed guidance for adding items.

Inverted visualization of object number

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

Amounts with currencies within a single column are now displayed in 72 monospace font.

• Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.
• Users can (de)select all items using Ctrl+A.
• Never disable the selection checkbox.
• Updated guidelines (box).

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

More detailed guidance for adding items.

Clarified guidelines for initial sorting.

Selection modes:

• Do not use “navigated indicator” for single-select master-detail scenarios in the flexible column layout.
• Never disable the selection checkbox.

Errors and warnings: Use a message strip to indicate table-related errors and warnings.

Amounts with currencies within a single column are now displayed in 72 monospace font.

More detailed guidance for adding items.

Clarified guidelines for initial sorting.

Analytical List Page

Overview Page Headers on Large Screens

With SAP Fiori elements for OData V4, the object page header now supports the address facet.

• Table personalization no longer requires variant management.
• Export to Spreadsheet also exports custom columns.

Sketch

Axure RP

Adobe XD   

For details of the changes, see Updated Navigation Structure for Guideline Version 1.88.

• Delete an object from a list report
• Delete an object from an object page
• Delete an item from a table in an object page
• Delete an item from a subpage.

Layout details were added for the situation page, including the content of the situation page header, situation details, solution proposals, and related actions.

New Switching Situations section with guidance on how to use the interactive situation icon and the corresponding situation pop over.

Tables:

• Handling of titles in sections/subsections:
  • Sections with only one table: remove the table title
  • Subsections with only one table: hide the subsection title
• Recommendation for lazy loading: Initially show 10 items
  (previous guidance: 5-10 items)
• Additional info on embedding analytical tables, grid tables, or tree tables.
• Navigation to List Report section changed to Navigation to Another Page.
  Navigation target must not always be a list report.

Expand/collapse: Avoid using expand/collapse behavior in forms.

• Select: If the focus is on a row, SPACE selects the corresponding item.
• Delete Single Item Rows: If the focus is on a row, the keyboard DEL key triggers the Delete button.
• Line Item Navigation: If the focus is on a row, the ENTER key triggers navigation.
• Edit Line Items: If the focus is on a row, the F2 key triggers the Edit button.
• Add items: Recommended: Also enable ENTER as a shortcut for triggering the Create button.
• Personalization: Add the shortcut Ctrl+Comma for opening the personalization dialog.

Select: For single selection master-detail scenarios, always use “single selection master” mode. “Single selection left mode” is not recommended.

Selection: Never disable the selection checkbox.

Columns: Additional guidance on optimizing the column width for tables that have only a few columns.

Drag and Drop: App teams must provide corresponding keyboard support.

Add Items: Additional guidance on item states (new, recent, added).

Sort: Ensure that tables are sorted meaningfully when they first load.

Do not use the importance property.

The Show Details/Hide Details section has been enhanced and examples added.

Additional limitations on use of the Maximize/Minimize feature for showing tables in full screen mode.

App-Specific Actions: Guidance on toolbar border design added.

Column Layout:

• The initial column width can be calculated automatically.
• End users can now resize columns in the responsive table.
• The CssDefaults annotation now also works with the responsive table (apps can set an explicit column width).

Content:

• More differentiated guidance on using the smart toggle and smart field, including performance considerations.
• Updated annotation table:
  Status Information: Criticality added; input field not recommended
  Text and ID: Sort/filter/group by ID only
  Dates: Edm.DateTime added
  

Responsiveness: Developer hint added.

• Changing the layout of the pop-in area
• Do not use the annotation UI.Importance

Conditional navigation actions: In the toolbar for an object page form, you can enable actions that navigate the user to another page or application based on the value of a specific field.

Message popover button: The message button now conforms to design guidelines in the following ways:

• The color of the message button reflects the most critical message level.
• The message popover displays error message count.
• Messages without a criticality level are treated as information messages.

Column importance:

• By default, the importance of columns is set to none.
• Columns set to none are handled the same way as columns with medium importance.
• The exception to this is with SAP Fiori elements for OData V2 for list report columns that contain key fields. Their default importance is high.

Table Rows

Avatar and other images: You can set tooltip text to display when the focus is on the avatar.

Font 72: New download links for Font 72 monospace (desktop and web).