The ui5-timeline component shows entries (such as objects, events, or posts) in chronological order.
A common use case is to provide information about changes to an object, or events related to an object.
These entries can be generated by the system (for example, value XY changed from A to B), or added manually.
There are two distinct variants of the timeline: basic and social. The basic timeline is read-only,
while the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.
The Timeline supports a header-bar slot for search, filter, and sort functionality.
Use the ui5-timeline-header-bar component in this slot.
The Timeline fires search, filter, and sort events that the application should handle
by adding, removing, or reordering items in the DOM. The Timeline itself does not perform
filtering or sorting — it renders whatever items are provided in the default slot.
Defines whether the Timeline will have growing capability either by pressing a "More" button, or via user scroll. In both cases a load-more event is fired. Available options: Button - Displays a button at the end of the Timeline, which when pressed triggers the load-more event. Scroll -Triggers the load-more event when the user scrolls to the end of the Timeline. None (default) - The growing functionality is off.
Defines the header bar of the timeline. Use ui5-timeline-header-bar for filtering, sorting, and search functionality. Note: The Timeline fires search, filter, and sort events when the user interacts with the header bar. The application should handle these events to filter/sort the items.
Fired when the user changes filter selection in the header bar. Note: The Timeline does not perform filtering. The application should handle this event and add/remove items from the DOM to reflect the filter selection.
Type
CustomEvent<TimelineFilterEventDetail>
Parameters
filterBy: string The filter category. selectedOptions: Array<string> The selected filter option texts.
Fired when the user performs a search in the header bar. Note: The Timeline does not perform filtering. The application should handle this event and add/remove items from the DOM to reflect the search results.
Type
CustomEvent<TimelineSearchEventDetail>
Parameters
value: string The search value entered by the user.
Fired when the user changes sort order in the header bar. Note: The Timeline does not perform sorting. The application should handle this event and reorder the items in the DOM accordingly.
Type
CustomEvent<TimelineSortEventDetail>
Parameters
sortOrder: string The sort order ("Ascending" or "Descending").