Timeline
The Avonni Timeline component transforms lists of events into interactive visual timelines for easier understanding of chronological data.
Overview
The Timeline displays a chronological list of activities and events in a visual, scrollable format. Use it to show task history, project milestones, account activity, or any time-ordered data directly in a flow screen.
Tutorials
Basic Usage
Advanced Features
Customization
Configuration
To configure it, click the component on the Flow screen. The Edit Timeline Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
The Data Source setting determines where timeline items come from. Pick it first — everything else builds on this choice.
When using the Query Data Source:
Initial Display: By default, only 20 items will load at first. This helps keep the Timeline fast and responsive.
See All Data: The "Show More" button lets users easily load the rest of the timeline items.
Customization (Optional): You can adjust the number of initially displayed items by setting a value for Max Visible Items in the Pagination section.
Data Mapping
When using Variable or Query, you need to tell the Timeline which Salesforce fields map to which parts of each item — for example, mapping ActivityDate to the Start Date so the timeline can group and sort correctly.
Check out our article on assigning various source collections from multiple objects to the Activity Timeline.
Properties
Orientation controls how the timeline is laid out.
Vertical (default)
Activities displayed in a top-down chronological list.
Horizontal
Activities displayed in a left-to-right linear format.
Sorted Direction controls the order of items. Ascending shows earliest first; Descending shows latest first. Only applies to Vertical orientation.
Group By organizes items into collapsible sections by time period (Day, Week, Month, or Year). Only applies to Vertical orientation.
Collapsible makes each group section collapsible and shows the collapse control. Requires Group By to be set.
Closed sets all group sections to be closed by default when the timeline loads. Requires Group By to be set.
Disable Upcoming Group prevents future-dated items from being placed in a separate upcoming section. Requires Group By to be set.
Date Intervals specifies the number of days to display across the timeline. Only applies to Horizontal orientation.
Hide Vertical Bar hides the vertical connecting bar between timeline items. Only applies to Vertical orientation.
Items Clickable makes each timeline item clickable. Wire the click to an interaction to navigate, open a modal, or trigger flow logic.
Highlight On Click highlights the last clicked item. If an interaction that opens a panel is configured, the item is highlighted automatically regardless of this setting. Only applies to Vertical orientation.
Item Icon Size sets the size of the icon shown for each item. Options: XX-Small, X-Small, Small (default), Medium, Large. Only applies to Vertical orientation.
Header
The Header section controls the title and action buttons displayed above the timeline.
Title
A heading that introduces the timeline's content.
Caption
A brief description or supplementary context below the title.
Icon
An icon displayed before the title to convey the timeline's purpose.
Is Joined
Removes the bottom rounding and shadow from the header so it visually joins with the component directly below it.
Buttons
Global action buttons in the header, wired to the On Header Action Click interaction.
Item Date Format
Controls how dates are displayed on each timeline item. Choose from Standard, Relative, Preset (a Luxon preset such as Date Medium), or Custom (a Luxon format string).
Fields Layout
Define how many columns each additional field occupies within a timeline item, and control the field label variant for improved readability across screen sizes.
Filter
Add fields from your data source as filters, enabling users to narrow down the timeline view based on specific criteria. Filters appear as a popover.
Search
Enable Searchable to add a search bar above the timeline. Use Search Engine Attributes to specify which field API names are included in search results beyond the default title and description mappings.
Pagination
Applies to Vertical orientation only.
Max Visible Items
If pagination is enabled, the number of items per page. Otherwise, the number of items shown before a "Show More" button appears.
Show Pagination
Displays or hides pagination controls below the timeline.
Pagination Attributes
Customize pagination control labels and icons.
Items loading. With Pagination off, the Timeline shows Max Visible Items before a Show More button appears — or, if you set a fixed Height (Size style), it switches to infinite scroll (loading the next batch as you reach the bottom). With Pagination on, it pages by Max Visible Items with pagination controls.
Item Actions
Per-item action buttons shown in the top-right of each timeline item. Only visible in Vertical orientation.
Interactions
Interactions define what happens when users interact with the Activity Timeline. Configure them from the Interactions tab of the Edit Activity Timeline panel.
Action Click
Fires when a user clicks a per-item action button (vertical orientation only). Use the targetName output to identify which action was clicked. The clicked item's record is available via clickedItemActionItem, its name via clickedItemActionItemName, and the action name via clickedItemActionName.
Header Action Click
Fires when a user clicks a header action button. Use the targetName output to identify which header action was clicked. The name of the clicked header action is also available via the clickedHeaderActionName output variable.
Item Click
Fires when a user clicks a timeline item. Requires Items Clickable to be enabled or an Item Click interaction to be configured. The clicked item's record is available via clickedItem and its name via clickedItemName.
Styling
The Style tab gives you fine-grained control over the Timeline's appearance. Configure it from the Style tab of the Edit Timeline panel.
Controls the outer spacing around the timeline, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the timeline.
Controls the inner spacing between the timeline's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the timeline's dimensions.
Width / Height: Set fixed dimensions for the timeline.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the timeline.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Styles the timeline's header bar.
Background Color: Set the header background.
Padding Top / Right / Bottom / Left: Adjust the header's inner spacing.
Margin Bottom: Set the space below the header.
Customizes the header's border.
Color / Size / Style: Set the border color, thickness, and style.
Radius: Control the roundness of the corners.
Bottom Border Color / Size / Style (Is Joined): Customize the bottom border when the header is joined.
Styles the header title text.
Color: Set the title color.
Font Size / Font Style / Font Weight: Control the title typography.
Styles the header caption text.
Color: Set the caption color.
Font Size / Font Style / Font Weight: Control the caption typography.
Styles the action buttons in the header.
Text Color / Active / Hover: Set the action text color in each state.
Background Color / Active / Hover: Set the action background in each state.
Border Color / Active / Hover: Set the action border in each state.
Styles the avatar shown in the header.
Background Color / Foreground Color: Set the avatar colors.
Border Radius: Control the roundness of the avatar corners.
Styles each timeline item.
Line Color: Set the connecting line color.
Line Clamp: Limit the item description to a maximum number of lines.
Icon Background Color: Set the item icon background.
Styles the body of each timeline item.
Background Color Hover: Set the body background on hover.
Background Color Highlight: Set the body background when highlighted.
Styles the fields displayed within an item.
Spacing Inline / Block: Adjust the spacing between fields.
Background Color: Set the fields' background.
Border Color / Size / Style / Radius: Customize the border around the fields.
Styles the pagination controls.
Background Color / Active / Hover / Disabled: Set the button background in each state.
Text/Icon Color / Active / Hover / Disabled: Set the button text and icon color in each state.
Color Border / Active / Hover / Disabled: Set the button border in each state.
Border Size / Style: Adjust the border thickness and style.
Active Button Background / Text/Icon / Border (with Active and Hover states): Style the currently selected page button.
Styles the timeline footer.
Background Color: Set the footer background.
Border Color / Size / Style / Radius: Customize the footer border.
Styles the "Show More" button.
Block Start / Block End / Inline Start / Inline End: Adjust the button's spacing.
Background Color / Active / Hover: Set the button background in each state.
Text Color / Active / Hover: Set the button text color in each state.
Border Color / Active / Hover / Size / Radius: Customize the button border.
Output Variables
The Timeline exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Timeline component, and pick the output variable you need.
Item Click
When a user clicks a timeline item (requires Items Clickable to be enabled or an Item Click interaction to be configured).
Clicked Item
Record (SObject)
The full record behind the timeline item the user clicked.
Clicked Item Name
Text (String)
The name (key) of the clicked timeline item.
Example: After the user clicks a task entry, use Clicked Item to pre-populate a detail screen with that task's fields.
Item Action Click
When a user clicks a per-item action button (vertical orientation only).
Clicked Item Action Item
Record (SObject)
The record behind the item whose action button was clicked.
Clicked Item Action Item Name
Text (String)
The name (key) of that item.
Clicked Item Action Name
Text (String)
The name of the action button that was clicked.
Example: Use Clicked Item Action Name to branch logic — navigate to an edit screen when the action is "Edit", or open a confirmation dialog when it is "Delete".
Item Selection
Selected Items
Collection of Records
All timeline items currently selected by the user.
Selected Item Names
Text Collection
The names (keys) of all currently selected items.
Header Actions
Clicked Header Action Name
Text (String)
The name of the header action button the user clicked.
Others
Number of Items
Integer
The total number of items currently displayed in the timeline.
Flow Interaction Output Variables
Like all interactive Flow components, the Timeline exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Troubleshooting Common Issues
Timeline shows nothing at runtime but items appear in the Component Builder preview — The flow variable feeding the Items input is empty when the screen loads — the Get Records element hasn't run yet, or the variable was reset earlier in the flow. Place the Get Records element before the screen, and confirm the collection variable is populated by adding a temporary Display Text before the timeline screen.
Items appear but are not sorted, or grouped under the wrong group — The Start Date field is not mapped in Data Mappings, or it points to a field that's empty on most records. In Data Mappings, map Start Date to a Date or DateTime field that's populated on every record (e.g.,
{{Record.ActivityDate}}for Tasks,{{Record.StartDateTime}}for Events).All items are grouped under "Past" or "Upcoming" no matter the date — The Start Date field is mapped to a String or Number field, not a Date or DateTime. Pick a Date or DateTime field for Start Date, or use the Advanced expression mode to format a string into ISO 8601 (
2026-04-27T15:30:00.000Z).Date Intervals setting has no effect — Date Intervals only applies to the horizontal orientation; it's ignored when the timeline is set to vertical. In the Properties tab, set Orientation to Horizontal.
Hide Vertical Bar setting has no effect — Hide Vertical Bar only applies to the vertical orientation; it's ignored on horizontal timelines. In the Properties tab, set Orientation to Vertical.
Clicking an item does nothing — Neither Items Clickable is on, nor an Item Click interaction is configured. Either toggle Items Clickable on, or wire an Item Click interaction in the Interactions tab.
Filters in the panel have no effect when items come from a query — Filters in the panel only apply to Manual and Variable Data Sources; in Query mode, filtering is done server-side through Query Filters in the Properties tab. Add filter conditions to the Query panel.
Search returns no results even though the value appears in an item — Searchable fields are not configured. In Variable or Query mode, the component only searches the fields used in the Title and Description mappings. Add the missing field API names to Search Engine Attributes in the Properties tab.
"Upcoming" group is always empty even though future-dated items exist — The Start Date field is in the past at the time the timeline loads; the Upcoming group is computed against the current date and time on the user's machine. If you don't need a separate Upcoming group, toggle Disable Upcoming Group on. Otherwise, ensure your Start Date field includes a future timestamp.
Header actions appear on the timeline but row-level actions don't — Item-level actions only render in the vertical orientation; they're hidden in horizontal mode. Switch to vertical orientation, or move the actions to the timeline header.
Last updated
Was this helpful?