Updated: February 23, 2018

Responsive Table – Content Formatting Cheat Sheet

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
01
Starting point: A “traditional” table with one line of text per cell.

Traditional table
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
Change the alignment
Step
03
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
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
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
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
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
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.

Elements and Controls

Implementation