The Timeline component transforms lists of events into interactive visual timelines for easier understanding of chronological data.
Last updated
Was this helpful?
Before your timeline can display any information, you must tell it where to get the data. The Avonni Timeline component offers flexible data sources options to connect to different data sources.
When you use a Variable or Query Data Source with the Timeline component, you need to map fields from your data source to the Timeline's attributes. Think of data mappings as the "instructions" that tell the Timeline component which fields contain the start date, end date, title, description, etc., for each timeline item.
If your data source retrieves Opportunity records with fields like Name, Description__c, and CloseDate, you would map:
Title: Name
Description: Description__c
Start Date: CloseDate
This tells the Timeline to use the Opportunity Name for the item title, the custom description field, and the Close Date for the start date.
Horizontal
Events are displayed from left to right. It is ideal for showcasing events over a more extended period.
Vertical
Events are stacked vertically. It is good for emphasizing chronological order or when space is limited.
For vertical timelines, you can organize events using these settings:
Sorted Direction: Choose Ascending (oldest to newest) or Descending (newest to oldest) to control the order of events.
Group By: Group events by time intervals: None, Day, Week, Month, or Year. This creates visual sections within the timeline, making it easier to navigate.
Display additional fields from your data source within each timeline item and customize their appearance.
Find the "Fields" or "Item Fields" section in the Timeline component's properties.
Add the desired fields from your data source.
Use the Field Layout settings to arrange and style the additional fields within each timeline item.
Key Settings:
Number of Columns: Sets the overall grid layout within each item (e.g., 1, 2, 3 columns). This is for the default/extra-small screen size.
Number of Columns Small/Medium/Large Container: Set number of columns based on the screen sizes.
Variant: Controls the overall visual style of the field display (options may vary).
Individual Field Customization: from the Style panel, you can customize the styling on Items Fields.
Add interactive buttons to each timeline item using the "Item Actions" settings. These actions allow users to interact with the data for that specific item.
To add and configure actions:
Find the "Item Actions" section in the Timeline component's properties.
Add a new action.
Set the action's Label and Icon Name (optional).
Add an interaction to the action from the Interactions Tab ("On Item Action Click").
Choose an Action Type (Navigate, Execute Flow, etc.) and configure it, using data from the current timeline item as needed (referencing fields mapped in your Data Mappings)
Add filters to your Avonni Timeline to allow users to narrow down the displayed events.
To enable filtering:
Select the Timeline component.
Find the "Filters" attribute in the Properties Panel under the Data Mappings section
Choose which fields from your data source should be filterable.
Set filter types and customize.
The Timeline will display a filtering interface, and users can then select criteria to filter the events. The timeline is filterable by default.
Once you've connected your data and configured filtering/item actions, you can customize the Avonni Timeline component's appearance and behavior using its properties.
The header appears above the timeline itself and provides context and overall actions.
Title: (Text) Enter the main title for your timeline (e.g., "Project Timeline," "Opportunity History"). This is displayed prominently in the header.
Caption: (Text, Optional) A shorter description or subtitle displayed below the title. Use this to provide additional context.
Icon Name: (Text, Optional) The name of an Avonni or SLDS icon to display in the header (e.g., utility:date_time, standard:event).
Actions: (Actions, Optional) Add buttons to the header to provide overall actions related to the entire timeline (not individual events). Examples:
"Refresh Data" button: Refreshes the timeline's data source.
"Export Data" button: Allows users to export the timeline data.
"Add Event" button: Could open a modal or navigate to a page to create a new event (but this would be a general "add" action, not tied to a specific time slot like drag-to-create).
These header actions use the standard Avonni Interactions system (On Click, etc.).
Joined: (Boolean - Checkbox) Controls whether the header is visually connected to the timeline content or appears as a separate element above it.
These properties define how the timeline responds to user interactions with the timeline items themselves (not the header actions).
On Item Click: Define an interaction that triggers when the user clicks on a timeline item (an event). You can use data from the clicked item within the interaction. Common actions:
Navigate: Go to the detail page for the record represented by the clicked item. You'd typically use the Item Name value (which you mapped to the record ID) in the Navigate action.
Show Toast: Display a message.
Execute Flow: Launch a Flow, passing data from the clicked item as input variables.
Open Flow Dialog/Panel: Launch a Screen Flow.
Update a record: Update the record
Manual
Enter data directly into the component configuration. This is suitable for small, static datasetsta.
Variable
Use a variable as your data source. This is useful for data that changes based on user interactions or other component logic.
Query
Fetch data directly from Salesforce using a query. This is the most common option for displaying Salesforce records.