Intro

A table often implies a “boring” layout. It contains plain text, one value per cell, and fails to catch the user’s attention. In contrast, the responsive table is much more flexible and eye-catching. It also contains many options for formatting the table content. Due to small screen widths on mobile devices, these options are necessary in order to reduce the number of visible columns.

This cheat sheet shows you how you can transform a plain table into the cutting edge style of SAP Fiori. Take a look at the example below.

Usage

Use this cheat sheet if:

Do not use this cheat sheet if:

Guidelines

Step 1

Starting point: A “traditional” table with one line of text per cell.

Traditional table

Traditional table

Step 2

Change the alignment:

  • Left-align text, IDs, phone numbers, URLs, passwords, email addresses, and status information.
  • Right-align numbers (except IDs and phone numbers), dates, and times.

Change the alignment

Change the alignment

Step 3

Use the object identifier control to display key identifiers.

Use the object identifier control for key identifiers

Use the object identifier control for key identifiers

Step 4

Use the object number control (sap.m.ObjectNumber, property: emphasized) to emphasize the key attribute (usually the value of a value-unit combination).

Use the object number control to display key attributes

Use the object number control to display key attributes

Step 5

To indicate status information, use an object status control with semantic text colors. For more information on semantic colors, see colors.

Use the object status control to display status information

Use the object status control to display status information

Step 6

Remove columns by displaying the ID in brackets after the corresponding name.

Use ID-formatting to reduce the number of columns

Use ID-formatting to reduce the number of columns

Step 7

To gain even more width per column, remove additional columns by combining them.

Combine columns

Combine columns

And you’re done. With just a few simple steps, you can easily bring the SAP Fiori style to a plain table.

Resources

Elements and Controls

Implementation

Visual Design

Elements and Controls

Implementation