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
Properties
Title
The main heading for the timeline.
Title Style Text
Customize the font style of the title for visual emphasis.
Caption
A brief description or supplementary text for the timeline.
Caption Style Text
Adjust the font style of the caption to complement the title.
Icon Name
Choose an icon from the Salesforce Lightning Design System to represent timeline items.
Icon Size
Determine the size of the icon for visual consistency.
Orientation
Select between 'vertical' and 'horizontal' layouts based on content and space considerations.
Sorted Direction
Choose 'asc' for ascending or 'desc' for descending chronological order.
Group By
Organize timeline items by 'week', 'month', or 'year' for easier navigation and understanding
Item Date Format
Format the display of dates on timeline items for clarity and consistency
Is Joined
Choose whether timeline items are visually connected by a line or path
Closed
Toggle whether the timeline is closed or open-ended
Collapsible
Enable sections of the timeline to be collapsible, enhancing user interaction
Searchable
Allow users to search within the timeline for specific items or events
Show Pagination
Implement pagination for timelines with a large number of items
Max Visible Items
Set the maximum number of items to display before pagination kicks in
Header Actions
Add action buttons in the header of the timeline for user commands and interactions.
Items Actions
Implement action buttons at the item level for specific functionalities.
Field Attributes
Configure the display of fields within timeline items, including the number of columns and variants 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 'first', 'last', and 'next' pagination controls
Manual
Manually input timeline items and their details.
Data Source
Use a query to automatically populate the timeline with items from a data source.
Styling Settings
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.
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.
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
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.
Last updated
Was this helpful?