Basic Structure

A. Header

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

B. Collection Cells

This area displays the cells in this collection view. Each collection cell represents one item. It can be an object or a person/account. Collection cells can be displayed in one row with horizontal scroll or in a multi-row grid.

C. Footer

The footer is placed below the collection cells with a “SEE ALL” button and a total number of items in that collection. Users can tap the “SEE ALL” button to view all of the items in this collection as a list of object cells. Footer is only used in horizontal scroll collection view. It will not be used in multi-row grid collection view.

Collection Cell Structure

A collection cell consists of a mix of image and text labels. The container (A.) holds all content. Type of content displayed in each cell should be consistent within one collection view. The container height depends on the height of the elements being displayed. The container width is defined by the sizing rules based on screen size (see specs for more detail).

An image (B.) is required for collection view. If the item does not have an image, use a placeholder image. See instructions for placeholder images in placeholder image section.

Title (C.), Subtitle (D.), and Attribute (E.) labels are optional and may be used to display additional information. All cells in one collection consist of the same type of texts, reserve the space when the value is empty. Though all texts are optional, we strongly recommend to always display names as title for people or accounts.

Do’s

• Use a collection view when you want to display data in a grid.
• Use a collection view when the image is the preferred element to identify each item.
• Use a collection view as an entry point to a full list of all the items or to a detailed view of each of those items.

Don’ts

• Do not use a collection view to display only text.
• Do not use collection view if an image is not a good identifier of the item, or the majority of items do not have images in the data set. Use object cells instead.
• Do not mix different types of objects in one collection view.

The horizontal scroll collection view displays collection cells in a single horizontal line. Users can scroll left and right to see items in this collection. It provides a preview of the collection without taking a lot of screen space. Users can use the “SEE ALL” button to view the complete collection in list view.

Collection View in Multi-row Grid

The multi-row grid layout allows the collection cells to stack vertically. All items in the collection should be displayed, so a “SEE ALL” button will not be used. Users can scroll vertically to view items in the page.

Users can scroll horizontally to view more cells. Upon scroll, the collection cell is cut off at both ends of the view. Due to the vast range of device sizes, the size of collection cell is dynamic to ensure the cut off. A gradient is added to the edge to hint at there being more content.

When there is not enough items in the collection to scroll, left align the cells with 16dp paddings in between each cell.

To disable horizontal scroll, display the first several items in a row in the same way horizontal scroll cells are positioned until there is not enough space for a full cell or there are no more items to be displayed.

Navigation

In the horizontal scroll collection view, the “See All” button will navigate to the entire set of data, displayed as a list of object cells.

In all types of collection view, tapping on a single collection cell will navigate to a detailed view of the item. The actual destination depends on the context and type of data represented by the cell. For example, a collection cell of a team member may open up an employee’s profile page.

Mobile

Collection Cells

For contacts, display image in an 80dp*80dp circle. Truncate text label when it exceeds cell width. All elements are horizontally centered within the cell container.

For objects, display image in a square with 4dp rounded corner. Image width is the same as cell width. Truncate text label when it exceeds cell width. All elements are horizontally centered within the cell container.

Collection View: Horizontal Scroll

The collection cells are displayed within a certain content area (A.). On mobile, the content area usually starts from 16dp keyline, and ends at 16dp from the edge of screen. Due to the vast range of device sizes, the size of collection cell is dynamic. Starting from the left, collection cells are displayed in one row with 16dp padding between each cell. Always display N cells (B.) and a half cell (C.) in one row so the last cell will be cut off in the middle.

Exception: For small mobile devices, adjust the cell width so that it may fit 2.5 cells in one row when the minimum size cannot be reached.

Collection View: Multi-Row Grid

In multi-row grid layout, collection cells resize to fill each row with 16dp padding in between each cell, no cut off at the end. Vertical padding between each row is 16dp. Also add 16dp after the last row. Follow the same collection cell size range as horizontal scroll, and at least fit two cells in one row for small mobile devices.

Tablet

Collection Cells

For contacts, display image in an 96dp*96dp circle. Truncate text label when it exceeds cell width. All elements are horizontally centered within the cell container.

For objects, display image in a square with 4dp rounded corner. Image width is the same as cell width. Truncate text label when it exceeds cell width. All elements are horizontally centered within the cell container.

Collection View: Horizontal Scroll

The collection view is displayed within a certain content area (A.). On tablet, the content area width depends on page layout. Due to the vast range of device sizes, the size of collection cell is dynamic. Starting from the left, collection cells are displayed in one row with 16dp padding between each cell. Always display N cells (B.) and a half cell (C.) in one row so the last cell will be cut off in the middle.

Collection View: Multi-Row Grid

In multi-row grid layout, collection cells resize to fill each row with 16dp padding in between each cell, no cut off at the end. Vertical padding between each row is 16dp. Also add 16dp after the last row. Follow the same collection cell size range as horizontal scroll, and at least fit two cells in one row for small mobile devices.

Placeholder Image

For item without image, display a placeholder image instead. Placeholder image is of the same size and shape as the actual image in the cell.

For contacts, display the first letter of the name in a filled circle. Use one of the Fiori accent colors as background color for each account using placeholder image.

For objects, display the image icon in the center of the image area as placeholder image. Placeholder image for object follows the same spec on both mobile and tablet.