The timeline preview displays a snippet of the timeline, offering a high-level overview of what the overall project consists of.

Usage

• Use the timeline preview to display objects and their respective timestamps. 
• Use the timeline preview to indicate the status of objects via the nodes. 
• Use the timeline preview to navigate to the timeline view.

• Don’t use the timeline preview to show detailed or extended descriptions of objects. 
• Don’t use the timeline preview to mark tasks as complete.

Anatomy

A. Header 

The header summarizes the timeline preview.

B. Timeline Preview Object

The timeline preview object is a reduced representation of the timeline view objects. This includes reduced content such as the timestamp, node, and task title.

C. Button Footer

The button footer contains a button that leads users to the timeline view with the task cards and descriptions.

Task Object

A. Timestamp

The timestamp displays the time of the timeline preview object.

B. Node

The node indicates the current state of the object.

C. Title

The title displays the name of the object.

Behavior and Interaction

The timeline preview allows users to navigate to the timeline component. Users can tap on the “See All” button footer in the timeline preview to navigate to the timeline view.

Adaptive Design

On mobile, the timeline preview allows the user to view the first two nodes. On tablet, a more extended view of the timeline allows displaying more objects, such as five nodes depending on the tablet orientation and screen size.

Resources

Related Components/Patterns: Object Cell

SAP Fiori for iOS: Timeline Preview

Development: Timeline