# Display Tasks

## Overview

This page walks you through building an activity timeline that shows a list of tasks based on a *GetRecords collection*. The users can see the list of tasks grouped by weeks, months or years. Optionally, it's possible to create actions for each task.

## Result

The final result looks like this:

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

## Steps

The steps to build an activity timeline that displays a list of tasks are as follows:

{% hint style="info" %}
Values in the examples are for illustration purposes. Values might differ depending on your Data Source and source collection.
{% endhint %}

### 1. Create the Get Records collection

The very first step starts with creating our Get Records collection to ask Flow Builder to fetch all the Task records by following the below steps:

* **Add a Get Records** element to fetch all tasks data
* Enter a collection Label
* Add the **Task Object**
* Select "**`None - Get all Task Records`**" in the condition requirements field
* Select "**`All Records`**" regarding the number of records to display
* Click "**Done**"

{% @arcade/embed flowId="De6OSS81OekRdCpCm6Bz" url="<https://app.arcade.software/share/De6OSS81OekRdCpCm6Bz>" %}

### 2. Add the Activity Timeline component

* Add a screen element
* Drag the **Activity Timeline component** from the components list to our screen flow (located under the custom section)
* Enter an **API Name**. For example, *ActivityTimeline*.

{% @arcade/embed flowId="xaNh8CS4qf5C1H8QdZmQ" url="<https://app.arcade.software/share/xaNh8CS4qf5C1H8QdZmQ>" %}

### 3. Configure the Activity Timeline data source

* Click on the **Open Component Builder** button to access all the settings for the Activity Timeline component
* **Enter a title** for the component (e.g: Tasks)&#x20;
* Under the Data Source section, **select Variable** to assign our previously created Get Records collection
* Under Source Collection, **click on the GetTask collection** we created in step 1
* Under the Data Mapping section, let's do our fields mapping
  * **Title** => Task.Subject
  * **Description** => Task.Description
  * **Name** => [Task.Id](http://task.id/) (Activity ID)
  * **Icon Name** => standard:task (switch to Manual to select an icon manually)
  * **Date** => Task.DueDate
* Go on the **`Group By`** attribute to group tasks by months.

{% @arcade/embed flowId="YdcIvHBfVFYFxiZQ2fcE" url="<https://app.arcade.software/share/YdcIvHBfVFYFxiZQ2fcE>" %}


---

# 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/tutorials/components/timeline/display-tasks.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.