> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/timeline.md).

# Timeline

## Overview

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

The Timeline displays a chronological list of activities and events in a visual, scrollable format. Use it to show task history, project milestones, account activity, or any time-ordered data directly in a flow screen.

***

## 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>

***

## Configuration

To configure it, click the component on the Flow screen. The **Edit Timeline Component** panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Data Source

The **Data Source** setting determines where timeline items come from. Pick it first — everything else builds on this choice.

| Data Source                                                      | Best For                              | When to Use                                                |
| ---------------------------------------------------------------- | ------------------------------------- | ---------------------------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Fixed, pre-defined events             | Static timelines with a predetermined set of activities    |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Items from a Flow collection variable | Dynamic timelines reflecting real-time Salesforce data     |
| [**Query**](/flow/component-builder/data-sources/query.md)       | Live Salesforce records               | Complex data retrieval without a separate Get Records step |

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

{% hint style="warning" %}
When using the Query Data Source:

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

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

### Data Mapping

When using Variable or Query, you need to tell the Timeline which Salesforce fields map to which parts of each item — for example, mapping `ActivityDate` to the Start Date so the timeline can group and sort correctly.

{% 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 %}

### Properties

**Orientation** controls how the timeline is laid out.

<table><thead><tr><th width="178">Orientation</th><th width="267">Description</th><th>Image</th></tr></thead><tbody><tr><td><strong>Vertical</strong> <em>(default)</em></td><td>Activities displayed in a top-down chronological list.</td><td><img src="/files/0xWiDoScczjfradkunUU" alt=""></td></tr><tr><td><strong>Horizontal</strong></td><td>Activities displayed in a left-to-right linear format.</td><td><img src="/files/dwUR0L7ExK5LOlEGrW40" alt=""></td></tr></tbody></table>

**Sorted Direction** controls the order of items. Ascending shows earliest first; Descending shows latest first. Only applies to **Vertical** orientation.

**Group By** organizes items into collapsible sections by time period (Day, Week, Month, or Year). Only applies to **Vertical** orientation.

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

**Collapsible** makes each group section collapsible and shows the collapse control. Requires **Group By** to be set.

**Closed** sets all group sections to be closed by default when the timeline loads. Requires **Group By** to be set.

**Disable Upcoming Group** prevents future-dated items from being placed in a separate upcoming section. Requires **Group By** to be set.

**Date Intervals** specifies the number of days to display across the timeline. Only applies to **Horizontal** orientation.

**Hide Vertical Bar** hides the vertical connecting bar between timeline items. Only applies to **Vertical** orientation.

**Items Clickable** makes each timeline item clickable. Wire the click to an interaction to navigate, open a modal, or trigger flow logic.

**Highlight On Click** highlights the last clicked item. If an interaction that opens a panel is configured, the item is highlighted automatically regardless of this setting. Only applies to **Vertical** orientation.

**Item Icon Size** sets the size of the icon shown for each item. Options: XX-Small, X-Small, Small *(default)*, Medium, Large. Only applies to **Vertical** orientation.

### Header

The Header section controls the title and action buttons displayed above the timeline.

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

<table><thead><tr><th width="163">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Title</strong></td><td>A heading that introduces the timeline's content.</td></tr><tr><td><strong>Caption</strong></td><td>A brief description or supplementary context below the title.</td></tr><tr><td><strong>Icon</strong></td><td>An icon displayed before the title to convey the timeline's purpose.</td></tr><tr><td><strong>Is Joined</strong></td><td>Removes the bottom rounding and shadow from the header so it visually joins with the component directly below it.</td></tr><tr><td><strong>Buttons</strong></td><td>Global action buttons in the header, wired to the <strong>On Header Action Click</strong> interaction.</td></tr></tbody></table>

### Item Date Format

Controls how dates are displayed on each timeline item. Choose from Standard, Relative, Preset (a Luxon preset such as Date Medium), or Custom (a Luxon format string).

[See this tutorial to learn more about customizing date formats.](/flow/tutorials/components/timeline/customizing-date-format-in-the-timeline-component-using-luxon.md)

### Fields Layout

Define how many columns each additional field occupies within a timeline item, and control the field label variant for improved readability across screen sizes.

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

### Filter

Add fields from your data source as filters, enabling users to narrow down the timeline view based on specific criteria. Filters appear as a popover.

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

### Search

Enable **Searchable** to add a search bar above the timeline. Use **Search Engine Attributes** to specify which field API names are included in search results beyond the default title and description mappings.

### Pagination

Applies to **Vertical** orientation only.

| Setting                   | Description                                                                                                                       |
| ------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **Max Visible Items**     | If pagination is enabled, the number of items per page. Otherwise, the number of items shown before a "Show More" button appears. |
| **Show Pagination**       | Displays or hides pagination controls below the timeline.                                                                         |
| **Pagination Attributes** | Customize pagination control labels and icons.                                                                                    |

{% hint style="info" %}
**Items loading.** With **Pagination** off, the Timeline shows **Max Visible Items** before a **Show More** button appears — or, if you set a fixed **Height** (Size style), it switches to **infinite scroll** (loading the next batch as you reach the bottom). With **Pagination** on, it pages by **Max Visible Items** with pagination controls.
{% endhint %}

### Item Actions

Per-item action buttons shown in the top-right of each timeline item. Only visible in **Vertical** orientation.

{% 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>

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Activity Timeline. Configure them from the **Interactions** tab of the Edit Activity Timeline panel.

### Action Click

Fires when a user clicks a per-item action button (vertical orientation only). Use the `targetName` output to identify which action was clicked. The clicked item's record is available via `clickedItemActionItem`, its name via `clickedItemActionItemName`, and the action name via `clickedItemActionName`.

### Header Action Click

Fires when a user clicks a header action button. Use the `targetName` output to identify which header action was clicked. The name of the clicked header action is also available via the `clickedHeaderActionName` output variable.

### Item Click

Fires when a user clicks a timeline item. Requires **Items Clickable** to be enabled or an Item Click interaction to be configured. The clicked item's record is available via `clickedItem` and its name via `clickedItemName`.

## Styling

The **Style** tab gives you fine-grained control over the Timeline's appearance. Configure it from the **Style** tab of the Edit Timeline panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the timeline, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side of the timeline.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the timeline's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the timeline's dimensions.

* **Width / Height:** Set fixed dimensions for the timeline.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the timeline.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Header" %}
Styles the timeline's header bar.

* **Background Color:** Set the header background.
* **Padding Top / Right / Bottom / Left:** Adjust the header's inner spacing.
* **Margin Bottom:** Set the space below the header.
  {% endtab %}

{% tab title="Header Border" %}
Customizes the header's border.

* **Color / Size / Style:** Set the border color, thickness, and style.
* **Radius:** Control the roundness of the corners.
* **Bottom Border Color / Size / Style (Is Joined):** Customize the bottom border when the header is joined.
  {% endtab %}

{% tab title="Header Title" %}
Styles the header title text.

* **Color:** Set the title color.
* **Font Size / Font Style / Font Weight:** Control the title typography.
  {% endtab %}

{% tab title="Header Caption" %}
Styles the header caption text.

* **Color:** Set the caption color.
* **Font Size / Font Style / Font Weight:** Control the caption typography.
  {% endtab %}

{% tab title="Header Actions" %}
Styles the action buttons in the header.

* **Text Color / Active / Hover:** Set the action text color in each state.
* **Background Color / Active / Hover:** Set the action background in each state.
* **Border Color / Active / Hover:** Set the action border in each state.
  {% endtab %}

{% tab title="Header Avatar" %}
Styles the avatar shown in the header.

* **Background Color / Foreground Color:** Set the avatar colors.
* **Border Radius:** Control the roundness of the avatar corners.
  {% endtab %}

{% tab title="Item" %}
Styles each timeline item.

* **Line Color:** Set the connecting line color.
* **Line Clamp:** Limit the item description to a maximum number of lines.
* **Icon Background Color:** Set the item icon background.
  {% endtab %}

{% tab title="Item Body" %}
Styles the body of each timeline item.

* **Background Color Hover:** Set the body background on hover.
* **Background Color Highlight:** Set the body background when highlighted.
  {% endtab %}

{% tab title="Item Fields" %}
Styles the fields displayed within an item.

* **Spacing Inline / Block:** Adjust the spacing between fields.
* **Background Color:** Set the fields' background.
* **Border Color / Size / Style / Radius:** Customize the border around the fields.
  {% endtab %}

{% tab title="Pagination Buttons" %}
Styles the pagination controls.

* **Background Color / Active / Hover / Disabled:** Set the button background in each state.
* **Text/Icon Color / Active / Hover / Disabled:** Set the button text and icon color in each state.
* **Color Border / Active / Hover / Disabled:** Set the button border in each state.
* **Border Size / Style:** Adjust the border thickness and style.
* **Active Button Background / Text/Icon / Border (with Active and Hover states):** Style the currently selected page button.
  {% endtab %}

{% tab title="Footer" %}
Styles the timeline footer.

* **Background Color:** Set the footer background.
* **Border Color / Size / Style / Radius:** Customize the footer border.
  {% endtab %}

{% tab title="Show More Button" %}
Styles the "Show More" button.

* **Block Start / Block End / Inline Start / Inline End:** Adjust the button's spacing.
* **Background Color / Active / Hover:** Set the button background in each state.
* **Text Color / Active / Hover:** Set the button text color in each state.
* **Border Color / Active / Hover / Size / Radius:** Customize the button border.
  {% endtab %}
  {% endtabs %}

***

## Output Variables

The Timeline exposes these 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 Click

When a user clicks a timeline item (requires **Items Clickable** to be enabled or an Item Click interaction to be configured).

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

> **Example:** After the user clicks a task entry, use **Clicked Item** to pre-populate a detail screen with that task's fields.

### Item Action Click

When a user clicks a per-item action button (vertical orientation only).

| Output variable                   | Type             | What it returns                                             |
| --------------------------------- | ---------------- | ----------------------------------------------------------- |
| **Clicked Item Action Item**      | Record (SObject) | The record behind the item whose action button was clicked. |
| **Clicked Item Action Item Name** | Text (String)    | The name (key) of that item.                                |
| **Clicked Item Action Name**      | Text (String)    | The name of the action button that was clicked.             |

> **Example:** Use **Clicked Item Action Name** to branch logic — navigate to an edit screen when the action is "Edit", or open a confirmation dialog when it is "Delete".

### Item Selection

| Output variable         | Type                  | What it returns                                    |
| ----------------------- | --------------------- | -------------------------------------------------- |
| **Selected Items**      | Collection of Records | All timeline items currently selected by the user. |
| **Selected Item Names** | Text Collection       | The names (keys) of all currently selected items.  |

### Header Actions

| Output variable                | Type          | What it returns                                        |
| ------------------------------ | ------------- | ------------------------------------------------------ |
| **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked. |

### Others

| Output variable     | Type    | What it returns                                                |
| ------------------- | ------- | -------------------------------------------------------------- |
| **Number of Items** | Integer | The total number of items currently displayed in the timeline. |

### Flow Interaction Output Variables

Like all interactive Flow components, the Timeline exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).

## Troubleshooting Common Issues

* **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 are 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. 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. 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`).
* **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.
* **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. 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.
* **Search returns no results even though the value appears in an item** — Searchable fields are not configured. In Variable or Query mode, the component only searches the fields used in the Title and Description mappings. Add the missing field API names to Search Engine Attributes in the Properties tab.
* **"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. If you don't need a separate Upcoming group, toggle Disable Upcoming Group on. Otherwise, ensure your Start Date field includes a future timestamp.
* **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.

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.