The timeline view displays a list of items such as tasks, events, or meetings in chronological order. The information in the timeline view is presented as tappable cells that show the most important information about the object. The timeline view may be filtered or searched.

• Use the timeline cells to show a brief and concise overview of the object. 
• Use the timeline view to organize objects based on due date or time. 
• Use the timeline view to indicate the status of different objects. 

Don’t show all the object’s details in the timeline cell. To view details, the user can tap to drill down into the cell’s details.

Anatomy

Full Timeline View

The full timeline view contains a chronological axis with timestamps on the left and timeline cells to the right of the axis.

The timeline can be filtered and searched using the local search behavior. For more information, see Filter and Search.

A. Header Cell

Provides a brief categorical overview.

B. Timeline Marker Cell (Optional)

Differentiated by a diamond shaped node, timeline marker cells may be commonly used to indicate a start or end node, marking the beginning or end of the timeline.

Timeline marker cells may also be used to visually break up a project or a schedule within the timeline view as well.

C. Now Indicator (Optional)

Indicates today’s timeline cell(s).

D. Timeline Cells

Provide concise key information about timeline objects. These may be tappable to drill down into full details.

Timeline Cell

The timeline cell contains the title of the object along with other key information. Designed for flexibility, information may be hidden or formatted according to the user’s needs. These cells may also be made tappable to allow the user to navigate to the object details.

A. Timestamp Column

Displays the timeline cell timestamp. The timestamp may have a flexible format. Underneath the timestamp, a non-interactive icon may be displayed to indicate more information upon drilldown.

B. Node / Node Line

The color of the nodes and the node line indicate the state of the object. Node icons also indicate the status of the timeline object. See Variations below for details.

C. Timeline Title

Provides a concise overview of the timeline object. The timeline title may wrap to three lines before truncating.

D. Status Stack

Provides the status of the timeline object.

E. Description

Provides a brief description of the timeline object. The description may wrap to two lines before truncating.

F. Attributes

Provides additional information about the timeline object. Attributes cannot exceed one line.

Behavior and Interaction

The navigation to a timeline depends on the application’s information architecture and navigation paradigm.

For apps that use flat navigation, the timeline may be found in its own tab in the tab bar.

For apps using hierarchical navigation, the timeline can be accessed via the timeline preview cell. If the timeline acts as the landing screen of an app, it does not require the timeline preview cell.

Users may tap on a timeline cell to drill down into the object’s details on another page.

Variations

Through shape and color, timeline cell nodes and the node line indicate the state and status of timeline objects. Colors and node icons may be customized according to the user’s needs.

Past objects are indicated by a blue node and blue node line.

Current objects are indicated by a blue cell background, a blue node, and blue node line.

Future objects are indicated by a gray node and gray node line.

Finally, icons within the node indicate whether an object is open, in-progress, or completed.

Adaptive Design

The timeline view is available in regular and compact widths.

It is typically displayed as a full screen. On an iPad, the timeline view may be in regular-readable width or regular full-width.

The timeline may also be combined together with another view. For instance, it can be presented with a calendar view to display a schedule or with the map view to provide geographical reference.

Resources

Development: Timeline View, FUITimelineCell, FUITimelineMarkerCell

SAP Fiori for Android: Timeline View

Related Components/Patterns: Timeline Preview