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:

• You need to design content for a responsive table.
• You want to improve your content design for a responsive table.

Do not use this cheat sheet if:

• You need to design content for a list, tree, grid table, analytical table, or tree table.

Guidelines

Step

01

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

Traditional table

Step

02

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

Step

03

Use the object identifier control to display key identifiers.

Use the object identifier control for key identifiers

Step

04

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

Step

05

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

Step

06

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

Use ID-formatting to reduce the number of columns

Step

07

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

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

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.