Timeline
Intro
The timeline displays a list of objects, such as tasks, events, or meetings, in chronological order. Objects in the timeline are presented as tappable cards that display the most important information about an object, such as title, description, or status. The timeline view can be filtered or searched.
Timeline on mobile (left) and tablet (right)
Usage
- Use the timeline cards to show a brief preview of the object’s details.
- Use the timeline to organize objects based on due date or time.
- Use the timeline to view the status of different objects.
Don’t put the entire object’s details in the timeline cards. To view details, the user can drill down into the card.
Anatomy
The structure of the cell includes a timestamp, an indicator, and a task card.
A. Timestamp
The timestamp displays the time of the object.
B. Indicator
The indicator represents the state of the object. Users can set the state of an object by drilling down to the object’s detail page.
C. Object Card
This card displays the object and object details for the corresponding date. If the user taps on the card, they will be able to view the full description of the object.
Timeline item anatomy
Object Card
The object card can contain up to three levels of content: the task title, the description, and the task type.
A. Title (Mandatory)
This displays the name of the object.
B. Description (Optional)
The description shows details or instructions for the object.
C. Supporting Text (Optional)
This provides an additional label to accommodate additional information.
Object card anatomy
Indicators
The timeline contains the following six indicators which describe different timeline states of the object:
A. Start Node
The start node indicates the beginning of the timeline.
B. Past Node
The past node indicates objects that were processed in the past.
C. Today Marker
The today marker indicates the user’s current position on the timeline. The timestamp will be encompassed by a circle.
D. Done Node
The done node indicates that an object has been completed. Once the user marks the task as “Complete” in the object details, the node will display a blue fill with a checkmark.
E. Upcoming Node
The upcoming node indicates an upcoming object in the timeline.
F. End Node
The end node indicates the end of the timeline.
Indicator types
Behavior and Interaction
Users can scroll through the timeline to view any number of objects in the past, present, or future. The object cards are tappable and if tapped, drill down to the object details of that particular card. The header is sticky to help users keep track of their place on the timeline.
Navigating from the Timeline to the object details
Adaptive Design
Mobile
Because of the smaller real estate on mobile, the titles, descriptions and supporting texts within the object card may be truncated. The timeline may also share the screen with another content type such as a map view. Therefore, the bottom sheet can be used to display the timeline.
Timeline view (left) and timeline bottom sheet (right) on mobile
Tablet
The timeline can fit on tablet in different ways. If the timeline is the only content on the screen, it will be center aligned. However, if the timeline shares the screen with other content, a side sheet can be used to display the timeline.
Your feedback has been sent to the SAP Fiori design team.