Timeline

Overview

The Avonni Timeline Component is a dynamic and interactive tool designed to display chronological data or events in an organized and visually appealing way. It's ideal for showcasing project timelines, historical events, or sequence-based data on Salesforce Experience Cloud websites.

The Avonni Timeline is Reactive-Ready

Properties

Basic Configuration

Name	Description
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.

Visual and Functional Elements

Name	Description
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

Interactivity and Customization

Name	Description
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

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.

Styling Settings

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.