Combo Box

The combo box allows users to select one value/option from a predefined list. It’s also possible to type in a value or custom value and filter the predefined selection list (if the application allows it).

Input Field

The input field allows users to enter and edit text or numeric values in one line. To help the user enter a valid value, you can enable the autocomplete suggestion feature or provide a selection dialog.

The selection dialog opens when the user clicks the input field icon.

Select

The select control (also known as a dropdown) is commonly used to select a value/option from a predefined list.

Multi-Combo Box

Use the multi-combo box if users need to select multiple values/options from a predefined list. The values/options in the list have checkboxes that support multi-selection. Users can also type in a value to filter the list (if the application allows it).

Multi-Input Field

A multi-input field allows users to enter more than one value/option which are are displayed as tokens. You can enable the suggestions feature or provide a selection dialog to help users enter a valid value/option.

There are three selection dialogs: the select dialog, the table select dialog, and the value help dialog. These dialogs enable users to pick one or several values or options from a long list. Selection dialogs are useful when users need more than one data point to identify the “right” value/option, or when they want to search the list to find a particular value/option.

The selection dialogs are always used in combination with one of the following controls:

• Input field for selecting one value/option
• Multi-input field for selecting more than one value/option

Users can open the respective selection dialog from within these controls.

Example

The user wants to pick a certain product. However, because the product names are very similar, it’s difficult to identify the right one. Additional product attributes in the selection dialog, such as an image and the product release date, help the user to pick the correct option.

Select Dialog

The select dialog enables users to select one or more values/options from a comprehensive list. The select dialog comes with a list of entries containing a few attributes. It also provides a search field to filter the list.

Table Select Dialog

The table select dialog enables users to select one or more values/options from a comprehensive table. Usually, the table displays multiple attributes or other related information for an item. Making this additional information available for an entry helps users identify the correct value/option.

The table select dialog reuses the responsive table. It also provides a search field to filter the list.

Value Help Dialog

The value help dialog enables users to find and select single and multiple values/options. It also allows users to define conditions and multiple ranges.

The T account control is fully responsive, and uses 100% of the available width of the container in which it is embedded. Depending on the available width, the number of T accounts on each line is updated dynamically to fit the available space.

On mobile devices, the T account control requires the full available width in order to display all its content.

The minimum width of each T account element is 20 rem (320 px). The width of the T account element grows until it reaches a breakpoint where enough width is available to render 2 or more T accounts on one line, leaving a space of 1 rem (16 px) between the T account items.

The T account control consists of a header toolbar, an account group heading, and individual T account elements. The header toolbar and account group heading can be hidden on the API level.

Header Toolbar

• A – Title: Provides a short and meaningful summary of the control’s content.
• B – Total Balance: Calculates the overall balance based on total credit and debit amounts of the ledger accounts included.
• C – View Switch: Switches the view between the T account view and table view.
• D – Settings: Displays a settings dialog, allowing users to show or hide additional information about accounts.

Account Group Heading

Each account group heading uses the expand/collapse behavior of the sap.m.Panel control, with an additional total balance indicator for the T accounts in the group as well as Expand All / Collapse All buttons. The Expand All / Collapse All buttons can be used to expand or collapse the content of all T accounts included in this account group.

• A – Expand/Collapse: Expands or collapses the group of accounts.
• B – Account Group Title: The name of the group of accounts.
• C – Group Balance: Calculates the balance based on total credit and debit entries of all T accounts included in the account group.
• D – Expand All: Expands all T accounts within the group of accounts.
• E – Collapse All: Collapses all T accounts within the group of accounts.

T Account

Every T account element consists of a heading, debit and credit content headings, and individual ledger entry blocks.

The number of individual entry blocks is unlimited and could potentially reach hundreds of blocks.

The entry blocks are nested under Credit and Debit headings. Each entry block takes 50% of the available width of the container. The credit and debit entry blocks are separated by a 1 rem (16 px) space.

• A – Expand/Collapse: Expands or collapses the T account.
• B – Account Title: The name of the T account.
• C – Account Balance: The sum of all credit and debit entries in the T account.
• D – Debit Content Heading
• E – Credit Content Heading
• F – Entry Block Amount: Provides the amount for a single ledger entry.
• G – Entry Block: Displays details of a specific ledger entry.

Each journal entry usually impacts several ledger accounts. When the user clicks an entry in a T account, the control highlights this entry and all related entries in other T accounts, which helps identify matching entries in different accounts.

You can allow users to add color indicators to specific journal entries.

The T account control supports this on API level. However, the implementation should be done on the app level.

By default, the control arranges T accounts dynamically to consume as little space as possible within the column grid. However, users can rearrange the T accounts freely by dragging them around.

If you would like to let users store their reordered layouts, use the variant management control.

The view settings dialog enables the users to show or hide certain attributes of each entry block in a T account.

Additionally, you can show or hide labels that precede the values.

There are three types of responsive behavior for text that doesn’t fit onto a line:

• Wrapping
• Truncation
• A combination of wrapping and truncation

Wrapping

Excess text moves down to the next line.

Note: If you switch on hyphenation, there is always a minimum of 3 characters at the end of the line before wrapping and at the start of the next line after wrapping.

Truncation

Excess text is cut off and is no longer visible. A truncation indicator appears at the end of the line (…).

Note: The truncation indicator for multiple lines depends on the browser line clamping support. For browsers that support it, this will be shown as ellipsis (…), whereas in other browsers, the overflowing text will just be cut off.

Wrapping and Truncation

Wrapping and truncation are combined. For example, a text might wrap over two lines and then truncate.

SAP Fiori has five semantic colors that are associated with the following predefined value states:

• None
• Positive
• Critical
• Negative
• Information

SAP Fiori has 10 generic indication colors that are intended only for industry-specific use cases. You can associate these colors with a specific meaning in a given industry context (for example, to reflect industry standards).

Each application must clearly communicate the meaning of each color. In addition to using a color, you must also provide a text, such as an object status. All colors require a corresponding descriptive text for accessibility purposes.

The indication color palette is supported exclusively by tables and the object status.

This is the default state of an element. It means that no semantic or industry-specific meaning is assigned to it.

Use the “None” state if:

• You want to use the default of a UI element.
• There is no reason to use another value state.
• You want to indicate a neutral object status.
• A message contains non-critical, additional information for users.

This state stands for a good, positive situation, or for the successful completion of a task.

Use the “Positive” state if:

• You want to highlight a good or positive status.
• A message contains information about a process that was finalized without any issues. Users need this information later on (for example, to copy values to another app).

To indicate a successfully completed process, a short notification is enough. In this case, use a message toast and not the semantic color for the positive value state.

This state indicates a critical situation or warning.

Use the “Critical” state if:

• You want to highlight a critical status.
• A minor problem has occurred. The user can carry on working, but might run into an error later on.
• The current mode or page can be finalized, but doing so might lead to an error later on.
• The user input was validated and a minor problem occurred. The user can continue without fixing the problem, but might run into an error later on.
• A message contains information about a warning.

Use this state for errors, or to indicate a bad or negative status or consequence.

Use the “Negative” state if:

• Something bad has happened, or is about to happen. The issue requires the user’s attention. Until the issue is resolved, the user can’t carry on working.
• You want to indicate that a value has caused an error.
• The user needs to be prevented from finalizing the current mode or page.
• The user input failed a validation, and the problem must be fixed before the user can continue.
• A message contains information about an error.

Use this state to highlight a piece of information.

Use the “Information” state if:

• You want to draw attention to a control for an important purpose, such as visualizing the recommendations from intelligent systems in input fields.
• You want to highlight newly added items, such as a new table row.

Don’t apply the semantic color for the information state to text. The blue text color is explicitly reserved for links. If you need to emphasize text, use bold or italic formatting instead.