Updated: September 28, 2017

Collection View

Intro

The Collection View is a fundamental building block of the Fiori for iOS design language. It is a container for which items can be displayed in a grid-like arrangement, as opposed to a single-column, vertically stacked arrangement a Table View provides. Once a specific variation of the Collection View is chosen, content, such as Contact and Attachment items can be inserted.

The Collection View previews a set of content and presents it in a highly visual layout. Therefore, the type of content that should populate a Collection View container should contain images so as to afford a highly visual viewing experience. It is advised to consider using a Table View instead of a Collection View for text and Table View Cells, however, an exception to this rule is when Table View Cells need to be displayed in a multi-column grid layout. Please see the Exceptions section to learn more.

Collection Views can be stacked in a single-screen layout. They are commonly found in the Overview, Object, Object Details and Object Detail Details Floorplans.

 

Usage

Do’s

  • Use a Collection View when you want to display data in a grid-like arrangement. When using the Horizontal Scroll, Horizontal Fit, and Vertical variations, the content should feature an image.
  • Use the Multi-column Collection View variation only when you want to display Table View Cells in multiple columns.
  • Allow navigation from single items in the Collection View to a more detailed view of those items. The exception to this is the Label/Value Cell, which is used to display data, rather than to preview a subset of the data.

Don’ts

  • Don’t use the Collection View to display pure text.
  • Don’t use the Horizontal Scroll, Horizontal Fit, or Vertical variations to display Table View Cells, such as the Object Cell or the Label/Value Cell.

 

Compact and Regular

All variations of the Collection View are supported in both regular and compact widths. There is no visual or behavioral difference between the two widths for the Horizontal Scroll, Horizontal Fit, and Vertical variations.

The Multi-column Collection View is the only variation that displays the content differently in regular and compact widths. While the content is displayed in multiple columns in full-width regular width, the content is stacked in a single column when in readable-width regular width and compact width.

 

Structure

A. Header

At the top left of the Collection View is the group label to describe what the content represents. In most uses of the Collection View, it is advised to include the group label.

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 items in the full list. This link takes the form of label with a chevron icon. It is not imperative to use the “See All” Label, but it would most likely be used when using the Horizontal Scroll and Horizontal Fit variations.

C. Content Area

This is the area in which the content is inserted. The content types are defined by the variation used.

 

Variations

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 items displayed in this variation should not exceed more than 20 and the “See All” label should communicate the total number of items.

The height of the container is determined by the height of the content items. The padding between the items can be defined by the app developer.

 

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 cannot scroll. It should be used when there is a determined number of items 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 items.

In order to get the proper justified alignment, the width of the container and number of items should be known so that padding between items can be automatically calculated. Or, if the size or desired number of items to be displayed does not fit well in the width, the padding between items can be set and the items can be left-aligned rather than justified.

 

Vertical

The Vertical Collection View variation allows for content to wrap. This variation should be used when the full content is displayed, such as attachments in a Create form, so a “See All” label won’t be used.

In order to get the proper justified alignment, the width of the container and number of items should be known so that padding between items can be automatically calculated. If the size of the items does not fit well in the width, the padding between items can be set and the items 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 achieve 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. It would be a really rare case that Collection View Items are used in this variation.

 

Navigation

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

For all content types, with the exception of a Label/Value Cell, tapping on a single item or cell will navigate to a detailed view of the item or cell. In most cases, this will be an Object page or a sub-object page. However, for some items, such as Attachment Items, the navigation drills down to a preview of the attachment where it can be viewed larger and deleted.

 

Exceptions

Typically, only Collection Items are used in the Horizontal Scroll, Horizontal Fit, and Vertical variations of Collection View and only Table View Cells are used in the Multi-column  variation. The one exception to this is in the Map Floorplan where it is permitted to use the Object Cell in the Horizontal Scroll variation. See Map to learn more.