Updated: January 31, 2022

Timeline

FUITimelineCell, FUITimelineMarkerCell

Intro

The Timeline displays a list of items (objects, events, or posts) in chronological order. The information on the Timeline view are presented as tappable cells, and are focused on the most important information about the object. The Timeline view can be filtered or searched.

Timeline view on iPad
Timeline view on iPad

Anatomy

The Timeline contains a chronological axis, with timestamps on the left and object cells to the right of the axis. The object (or event) cell contains the title of the object (or event) along with other key information. These cells may be made tappable to allow the user to navigate to the object (or event) details. The different nodes next to the object cell indicate the state of the object – open, completed, start or end.

A. Navigation Bar

The timeline can be filtered and searched (using the local search behavior). See Filter and Search for more details.

B. Timeline Start (Optional)

Use a start node to indicate the beginning of the timeline.

C. Completed Object Cells

The node in completed object cells has a check mark to indicate the status. The cell background for completed objects is gray.

D. Now Indicator

The Now Indicator node marker indicates the user’s current position on the timeline.

E. Upcoming Object Cells

Upcoming Object Cells have a different background color and an empty node to indicate that they are not completed. Their appearance will change when the status of the objects changes.

F. Timeline End (Optional)

Use an end node for the end of the timeline.

Timeline anatomy
Timeline anatomy

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 will not require the timeline preview cell.

Flat navigation (left), hierarchical navigation (right)
Flat navigation (left), hierarchical navigation (right)

Adaptive Design

The Timeline supports both regular and compact widths, with its structure and hierarchy remaining the same in both.

The Timeline is typically displayed as a full screen. However, when required, the timeline can be viewed 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.

Adaptive design of the Timeline view
Adaptive design of the Timeline view

Variations

Timeline View Cell

The Timeline view cell components have two states—past and present. Each timeline cell state has three status: open, in progress, and complete,

Example of an open status in present state (top) and past state (bottom)
Example of an open status in present state (top) and past state (bottom)
Example of an in progress status in present state (top) and past state (bottom)
Example of an in progress status in present state (top) and past state (bottom)
Example of a complete status in present state (top) and past state (bottom)
Example of a complete status in present state (top) and past state (bottom)

Resources

Related Component: Timeline Preview

Development: FUITimelineCell, FUITimelineMarkerCell

SAP Fiori for Android: Timeline