# Overview

A Data Source is the way a component retrieves the records it displays. Every data-aware component in Avonni — Data Table, List, Kanban, Calendar, Map, Repeater, Carousel, Visual Picker — needs one. Without a Data Source, the component has nothing to show.

This page helps you pick the right type for your scenario and links you to the page that covers it in depth.

***

## Data Source vs. Resource

Avonni has two different concepts that both deal with data, and they answer different questions.

| Concept         | Answers the question                                            | Example                                      |
| --------------- | --------------------------------------------------------------- | -------------------------------------------- |
| **Data Source** | *What records should this component display?*                   | A Data Table showing open Opportunities      |
| **Resource**    | *What values should my filters, formulas, or interactions use?* | A Variable holding the current user's region |

Data Sources feed **components**. Resources feed **logic**.

One type — **Query** — can live in both worlds. You can configure it directly on a component as a Data Source, or configure it as a reusable Resource in the Resources panel so that multiple components and interactions share the same query result.

{% hint style="info" %}

#### Rule of thumb

If you're asking *"what should this component show?"*, use a Data Source. If you're asking *"what value should my filter, formula, or interaction use?"*, use a Resource
{% endhint %}

***

## The Four Data Source Types

| Type                                                                                       | Best For                                               | Where the Data Lives                   | Example                                                     |
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------------------- | ----------------------------------------------------------- |
| [**Manual**](/dynamic-components/component-builder/data-sources/manual.md)                 | Fixed lists, hardcoded options, mockups                | In the component configuration         | A Status dropdown with five fixed values                    |
| [**Picklist**](/dynamic-components/component-builder/data-sources/picklist.md)             | Field-driven options that stay in sync with Salesforce | A Salesforce picklist field definition | A Lead Source filter pulling from the `LeadSource` picklist |
| [**Query**](/dynamic-components/component-builder/data-sources/query.md)                   | Live records from a single Salesforce object           | Salesforce (fetched on page load)      | A Data Table of open Opportunities this quarter             |
| [**Nested Queries**](/dynamic-components/component-builder/data-sources/nested-queries.md) | Parent-child or related records in one structure       | Salesforce (multi-object)              | An Account with its Contacts and Opportunities in one view  |

***

## Choosing the Right Type

Walk through these questions in order:

1. **Do the values ever change?** No → use **Manual**.
2. **Do the values come from a Salesforce picklist field?** Yes → use **Picklist**.
3. **Do you need live records from Salesforce?**
   * From a single object → use **Query**.
   * From an object plus its related records → use **Nested Queries**.
4. **Do you also need the component to update automatically when records change?** → Add **Real-Time Updates** on top of your Query.

{% hint style="info" %}

#### Info

**Real-Time Updates is not a Data Source — it's a refresh mechanism layered on top of a Query.** See the [Real-Time Data section](/dynamic-components/component-builder/real-time-data.md) to enable live updates
{% endhint %}

***

## Where to Configure a Data Source

Every data-aware component exposes its Data Source in the **Properties Panel** on the right side of the builder.

1. Select the component on the **Canvas**.
2. In the Properties Panel, open the **Data Source** section (usually near the top).
3. Pick the type: **Manual**, **Picklist**, **Query**, or **Nested Queries**.
4. Configure the type-specific settings — object, filters, columns, fields.

Components that use Data Sources include:

* **Data Table**, **List**, **Kanban**, **Pivot Table**
* **Calendar**, **Scheduler**, **Activity Timeline**
* **Map**, **Carousel**, **Visual Picker**
* **Repeater**, **Tree**, **Chat**

***

## Using a Variable as a Data Source

A data-aware component can also be fed from a **Variable** — specifically, a JSON Collection Variable.

Use this when:

* Records come from a **Flow** output that is mapped to a Variable.
* An **Agentforce** interaction writes a collection of records into a Variable.
* You've transformed or filtered records from a Query into a new shape through an Assignment Interaction.

To use a Variable as a Data Source, set the component's Data Source type to **Variable** and select the JSON Collection Variable from the list. See the Variable page for the full JSON Collection reference.

***


---

# 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/dynamic-components/component-builder/data-sources/overview.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.