Updated: January 28, 2022

Timeline Preview



The timeline preview cell provides the user with a glimpse of upcoming objects, events, or posts using a horizontal timeline sorted by chronological order. The objects in the timeline preview cell are read-only and tapping on a cell navigates the user to the full timeline view.

Example of a timeline preview view on iPhone (left) and iPad (right)
Example of a timeline preview view on iPhone (left) and iPad (right)


A. Cell Header

Provide a meaningful title to the timeline cell.

B. Object Title

The object title contains the name of the object with no additional information, and it can wrap up to two lines.

C. Node and Axis

A node may be used to display the different status of an object or event. The node sits on the axis which when trailing, denotes that there are more events than what is displayed.

D. Timestamp

The timestamp is important as it allows the user to understand the time sensitivity of the event.

Anatomy of timeline preview view
Anatomy of timeline preview view


Development: FUITimelinePreviewView

Related Component: Timeline View

SAP Fiori for Android: Timeline Preview