# Timeline

<figure><img src="/files/y1kTEMeLHOEcohRdCORZ" alt="" width="375"><figcaption></figcaption></figure>

## Tutorials

### Basic Usage

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Display Tasks</strong></td><td>This tutorial covers how to build a timeline that displays a list of tasks, pulling the data from a "GetRecords" collection.</td><td></td><td><a href="/files/5ohM4T35kjdQAVYgUbpd">/files/5ohM4T35kjdQAVYgUbpd</a></td><td><a href="/pages/nNoWiwbMHcdE7XvvNCHz">/pages/nNoWiwbMHcdE7XvvNCHz</a></td></tr></tbody></table>

### Advanced Features

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Assigning Multiple Source Collections</strong></td><td>Learn how to create a timeline that incorporates activities from multiple data sources, all organized within a single timeline view.</td><td></td><td><a href="/files/IfmFkZOdGrjEWeNLP39U">/files/IfmFkZOdGrjEWeNLP39U</a></td><td><a href="/pages/awAquKQMi7eNsHlrCzpS">/pages/awAquKQMi7eNsHlrCzpS</a></td></tr><tr><td><strong>Perform Actions on Selected Tasks</strong></td><td>This tutorial shows how to build a timeline with interactive tasks. Users can select tasks, enabling actions to be performed on them.</td><td></td><td><a href="/files/Gl8fEPCOujoISKJlOM8I">/files/Gl8fEPCOujoISKJlOM8I</a></td><td><a href="/pages/kd76REkJCSkr4JfivVeP">/pages/kd76REkJCSkr4JfivVeP</a></td></tr></tbody></table>

### Customization

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Create a Horizontal Activity Timeline</strong></td><td>Explore how to build a timeline that displays activities horizontally instead of the default vertical orientation.</td><td></td><td><a href="/files/ah6nZWNyoiFYkIwjwQKP">/files/ah6nZWNyoiFYkIwjwQKP</a></td><td><a href="/pages/4qsQyZwCX5PPr77xWlTo">/pages/4qsQyZwCX5PPr77xWlTo</a></td></tr><tr><td><strong>Customizing Date Format using Luxon</strong></td><td>This tutorial explains how to use Luxon to achieve flexible and user-friendly date formatting within your timelines.</td><td></td><td><a href="/files/PWzcI8U0a0MgYXWkjM5V">/files/PWzcI8U0a0MgYXWkjM5V</a></td><td><a href="/pages/z0u6EXnR3fS3EO8PgDiy">/pages/z0u6EXnR3fS3EO8PgDiy</a></td></tr></tbody></table>

***

## Configuring the Timeline

### **Configuring the Data Source**

The Data Source is crucial for determining what information will be displayed on the timeline. Three data sources are available: Manual, Variable, and Query.

<figure><img src="/files/HbUPryloWkPZlPL05v7i" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="178.33333333333331">Data Source Type</th><th>Use Case</th><th>When to Use</th></tr></thead><tbody><tr><td><strong>Manual</strong></td><td>Ideal for static timelines with a predetermined set of events or activities.</td><td>When the data doesn’t require updates or changes over time.</td></tr><tr><td><strong>Variable</strong></td><td>Perfect for dynamic timelines where events or activities are linked to changing data in Salesforce.</td><td>When your timeline needs to reflect real-time data or updates from Salesforce records.</td></tr><tr><td><a href="/pages/viMlx8xVDeuY59H0WnZo"><strong>Query</strong></a></td><td>Suitable for complex timelines that need to pull data from various sources or based on specific criteria.</td><td>Ideal for complex data retrieval or when sourcing. Using a 'Get Records' collection with this data source is unnecessary, as the query itself is powerful enough to simplify your flow.</td></tr></tbody></table>

{% hint style="warning" %}
[When using the Que](#user-content-fn-1)[^1]ry Data Source:

* **Initial Display:** By default, only 20 items will load at first. This helps keep the Timeline fast and responsive.
* **See All Data:** Don't worry! The "Show More" button lets users easily load the rest of your Timeline items.
* **Customization (Optional):** You can adjust the number of initially displayed items if desired. Set a value for the "Max Visible Items" attribute in the Pagination section.

<img src="/files/T0dusaJo3tKeVqiJst0e" alt="" data-size="original">
{% endhint %}

### **Data Mappings integration**

Completing data mappings is essential when using a variable data source. This means connecting Salesforce fields from your 'Get Records' collection or the Query Data Source to the matching attributes in the Avonni Timeline component. Doing this will ensure your Salesforce data populates the timeline correctly, displaying the correct information in the right places.

**Example**: For instance, you might map a field from your 'Get Records' collection, which contains event start dates, directly to the start date attribute of a timeline event in the Avonni Timeline.

{% hint style="info" %}
[Check out our article](/flow/tutorials/components/timeline/assigning-multiple-source-collection-to-the-timeline.md) on assigning various source collections from multiple objects to the Activity Timeline.

<img src="/files/viyuI2w1QoKl1iIU36N9" alt="" data-size="original">
{% endhint %}

### **Timeline Orientation**

* **Horizontal**: Displays the timeline in a left-to-right format.
* **Vertical**: Presents the timeline in a top-down format.

<table><thead><tr><th width="178.33333333333331">Orientation</th><th width="267">Description</th><th>Image</th></tr></thead><tbody><tr><td><strong>Horizontal</strong></td><td>The Horizontal Orientation is presenting chronological events or activities in a linear, horizontally-oriented way.</td><td><img src="/files/T1aiT6R6PGbGDIs2wOW1" alt=""></td></tr><tr><td><strong>Vertical</strong></td><td>Display a list of activities in a chronological vertical way.</td><td><img src="/files/0xWiDoScczjfradkunUU" alt=""></td></tr></tbody></table>

### **Sorted Direction**

**Display Order (Asc/Desc):** Control how timeline items are arranged – earliest to latest (Ascending) or latest to earliest (Descending).

### **Group By**

**Group By (Vertical Timeline):** Organize your timeline by Day, Week, Month, or Year. For example, group tasks by their due date, or project milestones by month.&#x20;

<figure><img src="/files/khsQiNHcaFHKzwrEVTJo" alt=""><figcaption></figcaption></figure>

### **Field Attributes**

**Customization of Layout**

Define the number of columns each field occupies within the container, allowing precise control over the timeline's layout and appearance.

**Purpose**: Optimize the visual presentation for improved readability and alignment across different screen sizes.

<figure><img src="/files/HbpEi1o5mGlYmj5rjyaX" alt="" width="375"><figcaption><p>Fields display in the Timeline</p></figcaption></figure>

### **Item Actions**

**Enhancing User Interaction**

Place actions at the top right of each timeline item, providing users with quick access to complete tasks in Salesforce.

**Benefit**: Enables setting specific action names for each item, streamlining user interactions and task completion.

{% embed url="<https://demo.arcade.software/OugGPqkH0tUMZAkODVEa>" %}

<figure><img src="/files/xJe7OBoXw54tm4AKpYGI" alt=""><figcaption><p>End-user view of where the item actions are located.</p></figcaption></figure>

### **Filtering Options**

Offer filtering options displayed as a popover, allowing users to refine what's shown on the timeline.

**Setting Up Filters**: Add fields from your data source as filters, enabling users to narrow down the timeline view based on specific criteria or attributes

<figure><img src="/files/pkweFDW9QRZBZK51AtI2" alt=""><figcaption><p>How to add filters on your Timeline</p></figcaption></figure>

***

## Changing the Properties

### Changing the Orientation

The Timeline is available in two variants. **`Horizontal`** and **`Vertical`** orientation.

<table><thead><tr><th width="178.33333333333331">Orientation</th><th width="267">Description</th><th>Image</th></tr></thead><tbody><tr><td><strong>Horizontal</strong></td><td>The Horizontal Orientation is presenting chronological events or activities in a linear, horizontally-oriented way.</td><td><img src="/files/T1aiT6R6PGbGDIs2wOW1" alt=""></td></tr><tr><td><strong>Vertical</strong></td><td>Display a list of activities in a chronological vertical way.</td><td><img src="/files/0xWiDoScczjfradkunUU" alt=""></td></tr></tbody></table>

### Header

The Header section gives you control over the appearance and functionality of your Timeline header.

<figure><img src="/files/6M6MQRamTl8SrwxAcoxC" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="163">Attribute</th><th>Description</th></tr></thead><tbody><tr><td><strong>Title</strong></td><td>Define a meaningful title for your Timeline. It introduces the timeline's content and is a key element of the visual hierarchy.</td></tr><tr><td><strong>Caption</strong></td><td>Use the caption field to add a brief description or supplementary information for your Timeline. This can be especially useful for providing context or additional details about the table data.</td></tr><tr><td><strong>Icon</strong></td><td>Add an icon to your header to enhance its visual appeal or to help convey the Timeline's purpose or content at a glance.</td></tr><tr><td><strong>Is Joined</strong></td><td>This property, when activated, gives the header a square, shadowless bottom border. This makes the header blend seamlessly with another component, making the Timeline appear as a continuous, unified element.</td></tr><tr><td><strong>Buttons</strong></td><td>Add interactive buttons to your header to enable specific actions from the <a href="/pages/U355AESWoG7kEigA1fwk">interaction pane</a>. This provides additional functionality and enhances user engagement with the Timeline.</td></tr></tbody></table>

***

## Adding Interactions

From the interactions panel, you can create interactions when users click on an activity item and/or an action. For example, you may want to redirect users to the record page when they click the activity item link.&#x20;

Here is a complete [list of actions](/flow/component-builder/interactions-panel.md) you can add to the Timeline.&#x20;

***

## Output Variables

The Timeline exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Timeline component, and pick the output variable you need.

### Item Selection

When users select items on the Timeline, these variables update automatically.

| Output variable         | Type                           | What it returns                                                                                                                             |
| ----------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Selected Items**      | Record Collection (SObject\[]) | All currently selected items as a collection of Salesforce records. Use this to loop through selected records in a subsequent flow element. |
| **Selected Item Names** | Text Collection (String\[])    | The names of all selected items, as a list of strings.                                                                                      |

> **Example:** After the Timeline screen, use a **Loop** element to iterate through **Selected Items** and create follow-up Tasks for each selected activity.

### Item Clicks

When users click on a timeline item (requires **Items Clickable** to be enabled), these variables tell you which item was clicked.

| Output variable       | Type             | What it returns                                                   |
| --------------------- | ---------------- | ----------------------------------------------------------------- |
| **Clicked Item**      | Record (SObject) | The full Salesforce record of the timeline item the user clicked. |
| **Clicked Item Name** | Text (String)    | The name of the clicked item.                                     |

> **Example:** Use **Clicked Item** to navigate to a detail screen showing the full activity record when a user clicks on a timeline entry.

### Action Clicks

When users click an action button on a timeline item, these variables identify which action was triggered and on which item.

| Output variable                   | Type             | What it returns                                                                                                                                        |
| --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Clicked Item Action Item**      | Record (SObject) | The full Salesforce record of the item where the user clicked an action.                                                                               |
| **Clicked Item Action Name**      | Text (String)    | The name of the action the user clicked (e.g., "Edit", "Log Call"). Use in a **Decision** element to route the flow based on which action was pressed. |
| **Clicked Item Action Item Name** | Text (String)    | The name of the item where the action was clicked.                                                                                                     |

> **Example:** A user clicks the "Log Call" action on an activity. Use a **Decision** element to check if **Clicked Item Action Name** equals "Log Call", then navigate to a screen with a pre-filled call logging form using the data from **Clicked Item Action Item**.

### Header Actions

| Output variable                | Type          | What it returns                                                                                                                                  |
| ------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked. Use in a **Decision** element to route the flow based on which header button was pressed. |

### Component Metadata

| Output variable     | Type    | What it returns                                                                                                                           |
| ------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| **Number of Items** | Integer | The total number of items currently loaded in the timeline. Useful for displaying a count or making decisions when the timeline is empty. |

***

## Styling the Timeline

From the Style panel, you can customize styling attributes for the Timelime component:&#x20;

* **`Size`**: set a specific size for the component.
* **`Toolbar`**: customize the background color of the toolbar.

You can only define Margin and Size for the Timeline from the Styles panel.&#x20;

***

## Specifications

{% tabs %}
{% tab title="Attributes" %}

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td><strong><code>actions</code></strong></td><td>String</td><td>Array of action objects. The actions are displayed at the top right of each item.</td></tr><tr><td><strong><code>closed</code></strong></td><td>Boolean</td><td>If present, the group sections are closed by default. This attribute is supported only for the vertical orientation.</td></tr><tr><td><strong><code>collapsible</code></strong></td><td>Boolean</td><td>If present, the section is collapsible and the collapse icon is visible. This attribute is supported only for the vertical orientation.</td></tr><tr><td><strong><code>groupBy</code></strong></td><td>String</td><td>If present, the value will define how the items will be grouped. Valid values include <code>week</code>, <code>month</code> or <code>year</code>. This attribute is supported only for the vertical orientation.</td></tr><tr><td><strong><code>iconName</code></strong></td><td>String</td><td>The Lightning Design System name of the icon displayed in the header, before the title. Specify the name in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed.</td></tr><tr><td><strong><code>iconSize</code></strong></td><td>String</td><td>The size of the title's icon. Valid values are xx-small, x-small, small, medium and large.</td></tr><tr><td><strong><code>itemDateFormat</code></strong></td><td>String</td><td>The date format to use for each item. <a href="/pages/z0u6EXnR3fS3EO8PgDiy">See this tutorial to learn more</a>.</td></tr><tr><td><strong><code>orientation</code></strong></td><td>String</td><td>Orientation of the timeline. Valid values include vertical and horizontal.</td></tr><tr><td><strong><code>sortedDirection</code></strong></td><td>String</td><td>If present, the value will define how the items will be grouped. Valid values include week, month or year. This attribute is supported only for the vertical orientation.</td></tr><tr><td><strong><code>title</code></strong></td><td>String</td><td>Title of the timeline, displayed in the header.</td></tr><tr><td><strong><code>maxVisibleItems</code></strong></td><td>String</td><td>The maximum number of visible items to display.</td></tr><tr><td><strong><code>items</code></strong></td><td>ActivityTimelineItem</td><td>Array of item objects.</td></tr></tbody></table>
{% endtab %}

{% tab title="Events" %}

| Name         | Description                                      |
| ------------ | ------------------------------------------------ |
| actionClick  | The event fired when a user clicks on an action. |
| itemClick    | The event fired when a user clicks on an item.   |
| {% endtab %} |                                                  |

{% tab title="Styling Hooks" %}

#### Size

| Name        | Description                                         |
| ----------- | --------------------------------------------------- |
| Font Color  | Define a font color if a title is present           |
| Font Weight | Define a style for the border around the component. |
| Font Style  | Define a color for the border around the component. |

#### Border&#x20;

| Name        | Description                                         |
| ----------- | --------------------------------------------------- |
| Font Color  | Define a font color if a title is present           |
| Font Weight | Define a style for the border around the component. |
| Font Style  | Define a color for the border around the component. |

#### Title

| Name        | Description                                         |
| ----------- | --------------------------------------------------- |
| Font Color  | Define a font color if a title is present           |
| Font Weight | Define a style for the border around the component. |
| Font Style  | Define a color for the border around the component. |

#### Icon

| Name          | Description                                         |
| ------------- | --------------------------------------------------- |
| Font Color    | Define a font color if a title is present           |
| Font Weight   | Define a style for the border around the component. |
| Font Style    | Define a color for the border around the component. |
| {% endtab %}  |                                                     |
| {% endtabs %} |                                                     |

***

## Troubleshooting

| Problem                                                                                  | Cause                                                                                                                                                                                                                                               | Fix                                                                                                                                                                                       |
| ---------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| The timeline shows nothing at runtime, but items appear in the Component Builder preview | The flow variable feeding the **Items** input is empty when the screen loads — the **Get Records** element hasn't run yet, or the variable was reset earlier in the flow.                                                                           | Place the **Get Records** element before the screen, and confirm the collection variable is populated by adding a temporary Display Text before the timeline screen.                      |
| Items appear but they're not sorted, or grouped under the wrong group                    | The **Start Date** field is not mapped in **Data Mappings**, or it points to a field that's empty on most records. The timeline groups and sorts items by their Start Date — without it, items fall back to insertion order.                        | In **Data Mappings**, map **Start Date** to a Date or DateTime field that's populated on every record (e.g., `{{Record.ActivityDate}}` for Tasks, `{{Record.StartDateTime}}` for Events). |
| All items are grouped under "Past" or "Upcoming" no matter the date                      | The **Start Date** field is mapped to a String or Number field, not a Date or DateTime. Grouping requires a real date type to compute past vs. upcoming.                                                                                            | Pick a Date or DateTime field for **Start Date**, or use the **Advanced** expression mode to format a string into ISO 8601 (`2026-04-27T15:30:00.000Z`).                                  |
| The **Date Intervals** setting has no effect                                             | **Date Intervals** only applies to the **horizontal** orientation. It's ignored when the timeline is set to vertical.                                                                                                                               | In the **Properties** tab, set **Orientation** to **Horizontal**.                                                                                                                         |
| The **Hide Vertical Bar** setting has no effect                                          | **Hide Vertical Bar** only applies to the **vertical** orientation. It's ignored on horizontal timelines.                                                                                                                                           | In the **Properties** tab, set **Orientation** to **Vertical**.                                                                                                                           |
| Clicking an item does nothing                                                            | Neither **Items Clickable** is on, nor an **Item Click** interaction is configured. The timeline only treats items as clickable when at least one of these is set.                                                                                  | Either toggle **Items Clickable** on, or wire an **Item Click** interaction in the **Interactions** tab.                                                                                  |
| Filters in the panel have no effect when items come from a query                         | **Filters** in the panel only apply to **Manual** and **Variable** Data Sources. In **Query** mode, filtering is done server-side through **Query Filters** in the **Properties** tab.                                                              | Add filter conditions to the **Query** panel. The panel filters remain visible but don't affect Query results.                                                                            |
| Search returns no results, even though the value appears in an item                      | Searchable fields are not configured. In **Variable** or **Query** mode, the component automatically searches the fields used in the **Title** and **Description** mappings — values in other fields (e.g., custom Notes) won't be found.           | Add the missing field API names to **Search Engine Attributes** in the **Properties** tab.                                                                                                |
| The "Upcoming" group is always empty even though future-dated items exist                | The Start Date field is in the past at the time the timeline loads. The "Upcoming" group is computed against the current date and time on the user's machine — items dated for today often fall into "Past" if the timestamp is earlier in the day. | If you don't need a separate Upcoming group, toggle **Disable Upcoming Group** on. Otherwise, ensure your Start Date field includes a future timestamp (not just today's date).           |
| Header **actions** appear on the timeline but row-level **actions** don't                | Item-level actions only render in the **vertical** orientation. They're hidden in horizontal mode.                                                                                                                                                  | Switch to vertical orientation, or move the actions to the timeline header.                                                                                                               |

***

[^1]:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/timeline.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.