# 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. {% hint style="success" %} The Avonni Timeline is [Reactive-Ready](https://docs.avonnicomponents.com/experience-cloud/getting-started/reactive-components) {% endhint %} ## Properties {% tabs %} {% tab title="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. | | {% endtab %} | | {% tab 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 | | {% endtab %} | | {% tab title="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 | | {% endtab %} | | {% tab title="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. | | {% endtab %} | | | {% endtabs %} | | ## Styling Settings {% tabs %} {% tab title="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. | | {% endtab %} | | {% tab title="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. | | {% endtab %} | | {% tab title="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 | | {% endtab %} | | {% tab title="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. | | {% endtab %} | | {% tab title="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. | | {% endtab %} | | | {% endtabs %} | |