Updated: May 29, 2018

Collection View

Intro

The Collection View is a fundamental building block of the SAP Fiori for iOS design language. It is a container that displays items in a grid. The Collection View previews a sample of content and presents it in a highly visual layout. Therefore, a Collection View container should be populated with content that contains images, to provide a more visual viewing experience.

Collection Views are commonly found in the Overview, Object, and Object Details Floorplans.

 

Usage

Dos

  • Use a Collection View when you want to display data in a grid.
  • Use a Collection View when the content is visual.
  • Allow navigation from single items in the Collection View to a more detailed view of those items.

Don’ts

  • Don’t use the Collection View to display only text.

 

Structure

Basic Structure

A. Header

At the top left of the Collection View is the collection header, which describes what the content in the view represents. The Collection View header is mandatory.

B. “See All” Label

At the top right of the Collection View is the navigational link to drill down and see the full content. The label should include the number of cells in the full list. This link takes the form of a label with a chevron icon. It is normally used when only a subset of the data is being displayed in Horizontal Scroll and Horizontal Fit variations.

C. Collection View

This area displays the collection cells.

D. Collection Cell

Collection cells are a mix of images and short text labels displayed in a Collection View. A collection cell must include an image view.

Collection Cell Structure

A collection cell consists of a mix of image views (A.) and text labels and is used to preview information about an object.

Because collection cells are meant to be highly visual, you must include an image view.

Title (B.), Subtitle (C.), and Attribute (D.) labels are optional and may be used to display additional information.

The collection cell has two fixed sizes when displaying the labels  –  110px and 120px.

When no labels are displayed, the size of the collection cell depends on the image view’s size, which must be between 60px x 60px and 110px x 110 px. The image view can be circular or rectangular, but when using the rectangular version, keep in mind that its width cannot be smaller than its height.

Examples of Collection Cells

 

Types

Horizontal Scroll

The Horizontal Scroll Collection View variation allows for content to be displayed in a single horizontal line. It can scroll left and right and should be used when you want to preview a subset of a list. It is recommended that the number of cells displayed in this variation should not exceed more than 20 and the “See All” label should communicate the total number of cells.

There is a fixed padding of 16px between the collection cells in this container.

 

Horizontal Fit

The Horizontal Fit Collection View variation allows for content to be displayed in a single horizontal line. The only difference from the Horizontal Scroll, is that this variation does not scroll. It should be used when there is a specific number of cells you want to display. It can also be used if you want to preview a subset of information and the “See All” label should communicate the total number of cells.

The cells in this container can be left-aligned or justified. To set the padding between collection cells, the width of the container and number of cells should be known so that padding between cells can be automatically calculated. A minimum of 6px and a maximum of 65px of padding can be applied.

 

Multi-Row

The Multi-Row Collection View allows the collection cell to stack vertically. This variation should be used when all collection cells in the collection are to be displayed; therefore, a “See All” label will not be used.

To get the proper justified alignment, the width of the container and number of collection cells should be known so that horizontal padding between cells can be automatically calculated. A minimum of 6px and a maximum of 65px of padding can be applied. The vertical padding between collection cells is fixed at 16px. If the size of the cells does not fit well in the width, the padding between cells can be set and the cells can be left-aligned rather than justified.

 

Multi-Column

The Multi-Column Collection View variation allows for table cells to be used in a Collection View so as to display a multi-column grid layout. This variation can either be used to display full content, such as a series of Label/Value Cells, or a subset of information, such as a pre-defined number of Object Cells set inside a Preview Table View.

This is the only variation where Table View Cells, except for the Contact Cell, are allowed to be used in a Collection View.

 

Behavior & Interactions

The “See All” label will navigate to the entire set of data, usually as a List Report.

Tapping on a single collection cell will navigate to a detailed view of the cell. For some cells, such as Attachment, the navigation drills down to a preview of the attachment where it can be viewed larger and some quick actions like share or delete can be performed.

 

Guidelines

Empty Collection View

In most cases, the collection view will display a fixed number of pre-defined collection cells generated by the system – for example, a retail app displaying top 10 featured products. Here, the collection view will always have content to display.

However, in cases where the content is generated by user interaction, the collection view may have an ‘Empty State’ until the user starts selecting/creating content to display. A good example of this is displaying attachments in an insurance claim.

You can either choose to hide the collection view entirely or if it is important to guide the user to generate this content, use the empty state of the collection 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.

 

Compact and Regular

All variations of the Collection View are supported in both regular and compact widths.

The only difference will be the number of collection cells displayed. For horizontal fit and vertical collection views, you must define number of collection cells in landscape and portrait orientation. The padding could vary depending on the number of collection cells.