AX - Timeline

Overview

AX - Timeline is an Experience Cloud component that displays Salesforce records in chronological order on Experience Sites pages.

Use it to show portal users date-based activity—like their case history, order timeline, project milestones, or any date-stamped records. Users can search and filter entries, click items to navigate to records, and see events organized by time periods. Pull data from any standard or custom object with date fields.

Perfect for activity feeds, case histories, order tracking timelines, project status updates, or anywhere portal users need to see "what happened when" in a scrollable, chronological format.

The Avonni Timeline is Reactive-Ready

Configuration

Data Source

Name	Description
Manual	Manually input timeline items and their details.
Data Source	Use a query to automatically populate the timeline with items from a data source.

Basic Configuration

Title is the main heading for the timeline, and Caption is a brief description or supplementary text beneath it. Title Style Text and Caption Style Text customize the font style of each for visual emphasis.

Visual and Functional Elements

Icon Name chooses an icon from the Salesforce Lightning Design System to represent timeline items, and Icon Size sets its size for visual consistency.

Orientation selects a vertical or horizontal layout based on content and space considerations.

Sorted Direction chooses asc (ascending) or desc (descending) chronological order.

Group By organizes timeline items by week, month, or year for easier navigation and understanding.

Item Date Format formats the display of dates on timeline items for clarity and consistency.

Is Joined determines whether timeline items are visually connected by a line or path.

Closed toggles whether the timeline is closed or open-ended.

Collapsible enables sections of the timeline to be collapsible, enhancing user interaction.

Searchable allows users to search within the timeline for specific items or events.

Show Pagination implements pagination for timelines with a large number of items, and Max Visible Items sets the maximum number of items displayed before pagination kicks in.

Api Name is a unique identifier used to reference the component. Item Icon Size sets the size of the per-item icons, and Highlight On Click visually highlights an item when it's clicked.

Interactivity and Customization

Header Actions add action buttons in the timeline header for user commands and interactions, and Items Actions add action buttons at the item level for specific functionality.

Field Attributes configure the display of fields within timeline items, including the number of columns and the variant used for field presentation.

Filtering Options include a filtering mechanism displayed as a popover for sorting or narrowing down timeline items.

Search Engine Options customize the search functionality with placeholder text and position settings.

Pagination Options adjust the alignment and customize the labels and icons for the first, last, and next pagination controls.

Styling

Header

Name	Description
Background Color	Sets the color of the header's background.
Border Color	Determines the color of the header's border.
Border Size	Adjusts the thickness of the border around the header.
Border Style	Selects the style of the border (e.g., solid, dashed, dotted).
Border Radius	Rounds the corners of the header for a softer look.
Bottom Border color (Is Joined)	If the timeline items are joined, this sets the color of the bottom border.
Bottom Border Size (Is Joined)	Adjusts the thickness of the bottom border when items are joined.
Bottom Border Style (Is Joined)	Chooses the style of the bottom border for joined items.
Padding (Top, Right, Bottom, Left)	Sets the internal spacing within the header.
Margin Bottom	Determines the space below the header.

Header Title

Name	Description
Color	Changes the color of the title text.
Font Size	Changes the color of the title text.
Font Weight	Alters the boldness or thickness of the title text.
Font Style	Applies styling (e.g., italic, normal) to the title text.

Header Caption

Name	Description
Color	Sets the color of the caption text.
Font Size	Adjusts the size of the caption text.
Font Weight	Alters the boldness or thickness of the caption text.
Font Style	Applies styling to the caption text

Header Avatar

Name	Description
Color	Sets the background color of the avatar.
Font Size	Changes the color of the avatar's content (e.g., icon or image).
Font Weight	Adjusts the utility color for contrast or emphasis
Font Style	Rounds the corners of the avatar for a softer appearance.

Pagination Buttons

Name	Description
Border	Sets the border properties of the pagination buttons.
Background	Changes the background color of the buttons.
Text/Icon Color	Adjusts the color of the text or icons within the buttons.
Active Button Color	Specifies the color of the pagination button when it is active or selected.