This article provides an overview of the topics that have been added or changed with the guideline version 1.58.

With each new guideline version, we deliver two types of update:

• Updates to reflect new or changed UI controls available with the corresponding SAPUI5 version (SAPUI5 Version 1.58).
• 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.

General Concepts

How To Use Semantic Colors   New!

This article explains how to apply the four semantic colors used in SAP Fiori:

• Bad / error
• Warning / critical
• Good / positive
• Neutral

For more information, see How To Use Semantic Colors.

Message Handling

Message popover: A new section was added on how to direct users to the field on the UI that triggered a message.

For more information, see Message Handling – Navigation to the Corresponding Field on the UI.

Selection Controls – Overview   New!

This overview article helps you choose which selection control to use, based on the type of selection, how an item is identified, and the number of items in the selection list.

For more information, see Selection Controls – Overview.

Wrapping and Truncating Text  New!

This article outlines best practices for deciding whether to let texts wrap or truncate (or use a combination of both) when space is limited.

For more information, see Wrapping and Truncating Text.

UI Elements

Analytical Table (ALV)

• The following controls are now allowed in UI tables:
  • Multi-input field
  • Bullet micro chart
  • Comparison micro chart
  • Stacked bar micro chart
• Truncation vs. wrapping in column headers: To ensure consistent row heights, use truncation if necessary. Never wrap.
• Handling table titles: Use a table title only if the title of the table is not indicated in the surrounding area.
• Item count: Do not show an item count for zero items.

For more information, see Analytical Table (ALV).

Bullet Chart

• New section on negative values.
• Links to SAPUI5 samples were added.

For more information, see Bullet Chart.

Calculation Builder  New!

The calculation builder can be used to create complex expressions that combine numeric constants and variables with arithmetic and logical operators. The expressions can be entered using a visual editor or a text editor with three available layout options.

For more information, see Calculation Builder.

Checkbox

Guidance was added for the the new intermediate selection state (also known as a mixed state or tri-state).

For more information, see Checkbox.

Combo Box

App teams can now define the method for filtering the object list as the user types.

For more information, see Combo Box.

Export to Spreadsheet

To ensure that the data is exported as it is displayed on the screen, you can now define key value pairs to overwrite coded back-end values with human-readable texts.

For more information, see Export to Spreadsheet – Exporting Readable Texts.

Form / Simple Form

• The list of UI elements that can be placed in a form was updated.
• Additional guidance on aligning amounts.

For more information, see Form / Simple Form.

Grid Table

• The following controls are now allowed in UI tables:
  • Multi-input field
  • Bullet micro chart
  • Comparison micro chart
  • Stacked bar micro chart
• Truncation vs. wrapping in column headers: To ensure consistent row heights, use truncation if necessary. Never wrap.
• Handling table titles: Use a table title only if the title of the table is not indicated in the surrounding area.
• Item count: Do not show an item count for zero items.

For more information, see Grid Table.

List

• Scrolling: The toolbar and filter info bar can now be set to “sticky”.
• Additional guideline references for custom list items.

For more information, see List.

Network Graph

• The network graph has been enhanced with two new layout algorithms offering different structure possibilities.
• The visuals of the control have been completely redone to fit the standard SAP Fiori semantic color palette.

For more information, see Network Graph.

Message Popover

You can now offer a navigation link for a message in the message popover. This allows you to direct the user to the field on the UI that triggered the issue.

For more information, see Message Popover – Navigation to Field.

Micro Charts

• Bullet micro charts, comparison micro charts, and stacked bar micro charts can now be embedded in the cells of grid tables, analytical tables, and tree tables.
• Additional guidance on truncation: Never truncate numeric labels.

For more information, see Micro Chart.

Multi-Combo Box

• Additional guidance on when not to use the multi-combo box.
• New section on reviewing tokens: If there are too many tokens to display in the input field, clicking on the [n] More link displays a popover with all the selected tokens.
• App teams can now define the method for filtering the object list as the user types.
• The user’s entry auto-completes if the characters entered so far match an item in the filtered list.

For more information, see Multi-Combo Box.

Multi-Input Field

• New section on reviewing tokens: If there are too many tokens to display in the input field, clicking on the [n] More link displays a popover with all the selected tokens.
• App teams can now define the method for filtering the object list as the user types.
• The multi-input control can now be embedded in an analytical table, grid table, or tree table in condensed mode.

For more information, see Multi-Input Field.

Responsive Table

• Handling table titles: Use a table title only if the title of the table is not indicated in the surrounding area.
• Additional information on padding: Padding is not provided by the responsive table itself. Any space around a table comes from the surrounding container.
• Flag and favorite: Place the flag or favorite marker in the first column.
• Adding items: When adding or editing a row, the maximum number of columns permitted in a dialog is now 8 (not 10). This has been aligned with the guidance for dialogs.
• Item count: Do not show an item count for zero items.

Select Dialog

You can opt to show a Clear button that lets users clear all selected items.

For more information, see Select Dialog.

Switch

The guidance on the use of inline labels has changed. Going forward, we no longer allow inline labels. Although inline labels are often short in English (On/Off, Yes/No), they can be too long to fit in the switch in some other languages, resulting in truncation. The new guidance is to use a label next to the switch instead.

For more information, see Switch.

T-Account  New!

The T-account is a new control for accounting applications. It allows you to display debit and credit entries for specific ledger accounts in T-account format. Multiple related T-accounts for a journal entry line item can be displayed on one page.

For more information, see T-Account.

Table Select Dialog

• The column headers and info toolbar in the table select dialog are now sticky.
• You can now decide whether or not to show the Clear button that clears all selected items.

For more information, see Table Select Dialog.

Toolbar Overview

• The menu button was added to the list of controls that can overflow.
• Details were added about the property for grouping items in the overflow.

For more information, see Toolbar Overview.

Tree

• The toolbar and filter info bar can now be set to “sticky”.
• Handling table titles: Use a table title only if the title of the table is not indicated in the surrounding area.
• Item count: Do not show an item count for zero items.

For more information, see Tree.

Tree Table

• The following controls are now allowed in UI tables:
  • Multi-input field
  • Bullet micro chart
  • Comparison micro chart
  • Stacked bar micro chart
• Truncation vs. wrapping in column headers: To ensure consistent row heights, use truncation if necessary. Never wrap.
• Item count: Do not show an item count for zero items.

For more information, see Tree Table.

Services and Resources

Design Stencils

Article updates:

• Added information on how to embed font 72.

Updates to stencils for floorplans and layouts:

• Analytical List Page (update)
• Dynamic Page (update)
• Flexible Column Layout (update)
• Initial Page (update)
• Launchpad – New Tile Sizes (update)
• List Report Floorplan (update)
• Object Page Floorplan (update)
• Object Page Floorplan – Header Facets (update)
• Overview Page Floorplan (update)

Update to stencils for UI elements:

• Calculation Builder  New!
• Calendar // Date Picker (update)
• Micro Chart – New Tile Sizes (update)
• Color Palette New!
• Date/Time Picker  (update)
• Input Field (update)
• Message Popover (update)
• Multi Combobox (update)
• Multi Input (update)
• Network Graph (update)
• Planning Calendar (update)
• Rich Text Editor (update)
• Responsive Table – Groups New!
• Time Picker (update)
• T-Account New!
• Visual Filter Bar (update)

For more information, see Design Stencils.