Updated: May 29, 2018

Table View

Intro

The Table View is a fundamental building block of the Fiori for iOS design language. It is a container for which information can be displayed in a single-column list, as opposed to a grid-like arrangement a Collection View provides. Table Views are populated with Table View Cells, which include Object Cell, Contact Cell, and Label/Value Cell.

The Table View is used to present small to large amounts of information in the form of a list. The Table View is ideal for text-based content.

Table Views can be divided into sections or groups and stacked in a single-screen layout. They are commonly found in the Overview, Object, Object Details, List Report, and, Worklist Floorplans.

 

Usage

Do’s

  • Use a Table View when you want to display data in a single-column list.
  • Populate the Table View with Table View Cells.
  • Allow navigation to a full list if using the Table View to display a preview of a larger list. Also, allow navigation from single cells to a more detailed view of that data.

Don’ts

  • Don’t use the Table View to display highly visual content.

 

Structure

A. Header

The header includes a group label to describe what the content represents. It is not mandatory to include the header.

B. Content Area

This is the area in which the Table View Cells are inserted.

C. Footer

The footer includes a “See All” label on the left with the number of items in the full list and a chevron icon on the right. The entire footer can be tapped to navigate to the full list. It is not mandatory to include the footer. 

 

Variations

Standard

The Standard Table View variation is used to display a full list of content so a footer should not be used and the header is optional. As the page is scrolled, additional cells load and there is no limit to the length of this content. The Standard variation is commonly found in the List Report, and, Worklist Floorplans.

Preview

The Preview Table View variation is used to display a preview of a list so both a header and footer should be used. It is recommended that no more than 3 content cells be displayed. The Preview variation is commonly found in the Overview, and, Object Floorplans.

In cases where the content is generated by user interaction, the preview table view may have an ‘Empty State’ until the user starts selecting/creating content to display. A good example of this is creating tasks in a Project Management app.

You can either choose to hide the preview table view entirely or if it is important to guide the user to generate this content, use the empty state of the preview table view with a label clearly communicating that there is no content yet. There will be no navigation until an cell is added to the collection.

 

Preview Table View in Compact and Regular
Preview Table View in Compact and Regular
Empty Preview Table View
Empty Preview Table View

 

Navigation

Tapping on a single Table Cell that populates the Table View, with the exception of a Label/Value Cell, will navigate to a detailed view of the object. In most cases this will be an Object page.

In the Preview variation, the “See All” label in the footer will navigate to the entire set of data, usually in the form of a List Report.