Updated: September 26, 2017

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.

B. 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.

 

Grid View

If the user needs to compare values across multiple objects, consider using a grid view. Similar in appearance to a spreadsheet, the grid view makes it easy to scan through columns of the same type of information. Tapping on a row takes the user to the corresponding item’s object screen. In compact width, the grid view table view will appear as a set of stacked object cells. This variation will only be used in the list report floorplan.

 

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.

 

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.