# Repeater

## Overview

The Repeater component creates dynamic, repeating sections from your data source. It functions as a loop—you design a template once using Avonni components, and the Repeater generates that template for each record in your query or variable.

### **Key capabilities**

* **Complete layout control**: Unlike standard list views with fixed columns, you define exactly how each item displays—combine [**Text**](https://docs.avonnicomponents.com/dynamic-components/components/text), [**Metrics**](https://docs.avonnicomponents.com/dynamic-components/components/metric), [**Avatars**](https://docs.avonnicomponents.com/dynamic-components/components/avatar), [**Buttons**](https://docs.avonnicomponents.com/dynamic-components/components/button), [**Progress Bars**](https://docs.avonnicomponents.com/dynamic-components/components/progress-bar), and more in any arrangement
* **Data binding**: Access the current record data with `{!Repeater1.CurrentRecord.FieldName}` or related objects via `{!Repeater1.CurrentRecord.Account.Name}`
* **Built-in controls**: Includes pagination, search, filtering, and responsive layouts out of the box

### **Common applications**

Card-based record displays, product galleries, searchable directories, dashboard sections, aggregated data views, approval queues, and resource libraries.

<mark style="background-color:orange;">**Restriction**</mark>**:** Data Display components cannot be added to the Repeater to improve performance.

***

## Quick Start: Display High-Value Opportunities in a Visual Grid

**Scenario**: Your sales team needs to quickly identify which prospects are worth pursuing. Instead of scrolling through a plain list view, you'll build a visual dashboard that displays high-value opportunities ($10K+) in the Prospecting stage as scannable cards.

**What you'll build**: A 3-column card grid where each card shows an opportunity's icon, name, and deal value—automatically filtered to Prospecting stage deals over $10K.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F5pLvjNSdsTLzAjVxSZI2%2F2025-12-10_12-48-14.png?alt=media&#x26;token=43a265c9-f5fc-48c5-863b-fedc611e68b0" alt=""><figcaption></figcaption></figure>

**Build time**: 5 minutes.

{% stepper %}
{% step %}

#### **Add the Repeater to Your Dynamic Component**

[Open the Avonni Dynamic Components App](https://docs.avonnicomponents.com/dynamic-components/avonni-components-app/accessing-the-app) and create a new Dynamic Component (or open an existing one). From the component library, **drag the Repeater onto your canvas**.
{% endstep %}

{% step %}

#### **Connect Your Data**

* Set Data Source to **Query**
* Click the query builder to create a new query on the **Opportunity** object
* Add your filters to narrow down the data:
  * **Amount** greater than 10000
* (Optional) Sort by **Amount** descending to show the largest deals first
* Click **Done** to save your query

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FzuuqF2raE3JENX3IqLWa%2F2025-12-10_12-18-36.png?alt=media&#x26;token=4bd64184-e8ac-4f15-8958-d99fe8ce636c" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Build Your Opportunity Card**

Now for the fun part—let's create a polished card for each opportunity:

* Drag a [**Media Object**](https://docs.avonnicomponents.com/dynamic-components/components/media-object) component into the Repeater's slot

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FzNXrk4cs1lT3lKrD1YGS%2F2025-12-10_12-19-58%20(1).gif?alt=media&#x26;token=000b6487-1473-46a1-b574-5d205c4f8964" alt=""><figcaption></figcaption></figure>

* In the Media Object's left slot, add an [**Avatar**](https://docs.avonnicomponents.com/dynamic-components/components/avatar) component:
  * Set Fallback Icon Name to `standard:opportunity`
  * Set Initials to `{!Repeater1.CurrentRecord.Name}` (this will show the first letters of the opportunity name) and set it to "Initial Auto Formatted"

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FrxohyB4OCy2h222yJysa%2F2025-12-10_12-21-31%20(1).gif?alt=media&#x26;token=29c44766-41a6-4fe2-aa25-ba3e62f3d925" alt=""><figcaption></figcaption></figure>

* In the Media Object's main content area, add a [**Text**](https://docs.avonnicomponents.com/dynamic-components/components/text) component:
  * Set the value to `{!Repeater1.CurrentRecord.Name}`
  * Make it bold using the formatting options

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FjNuI6FeMF4qtEnud6Wo9%2F2025-12-10_12-24-23%20(1).gif?alt=media&#x26;token=a34055db-d3f0-4668-99b7-a70c18580963" alt=""><figcaption></figcaption></figure>

* Below that text, add a [**Metric**](https://docs.avonnicomponents.com/dynamic-components/components/metric) component:
  * Set Label to "Deal Value"
  * Set Value to `{!Repeater1.CurrentRecord.Amount}`
  * Enable currency formatting
  * Add an icon like `utility:moneybag` for visual appeal

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FtKm41FQVxMedMt5SavIA%2F2025-12-10_12-26-36%20(1).gif?alt=media&#x26;token=79b583a1-77b6-4e37-8959-a55b9c91472c" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Customize the Repeater layout

Make your dashboard visually organized and professional:

**Configure the grid layout**\
In the Repeater's **Layout Section**:

* Set **Number of Columns** to **3** (arranges opportunities in a 3-column grid)
* Set **Divider** to **Card** style (adds visual separation between each opportunity card)

**Add a dashboard title**\
In the Repeater's **Header Section**:

* Set **Title** to something descriptive like "High-Value Prospects" or "Priority Pipeline"
* (Optional) Add a **Caption** like "Prospecting stage • $10K+"

This creates a polished, scannable dashboard instead of a plain stacked list

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbM6Je3CkPGITgch6g6WL%2F2025-12-10_12-42-04.png?alt=media&#x26;token=cd7d40a9-45ee-4e64-a107-498562557398" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Save and Add it to a Lightning Page

Now that your Dynamic Component is built and saved, you need to place it on a Lightning page so users can actually see it. Lightning App Builder uses a generic **AX - Dynamic Component** wrapper that you'll drag onto the page, then configure to display your specific component

1. Click **Save** in the Dynamic Component builder, then **Activate** your component
2. Open **Lightning App Builder** and navigate to the page where you want the dashboard (Home page, Opportunities page, etc.)
3. From the component list on the left, drag the **AX - Dynamic Component** onto your page
4. In the **Properties Panel** on the right, use the dropdown to **select your newly created Dynamic Component** from the list of available components
5. **Save** and **Activate** the page

**Your high-value prospecting dashboard is now live!** Sales reps can now quickly scan which deals to prioritize without scrolling through list views.
{% endstep %}
{% endstepper %}

**That's it!** You've just created a professional opportunity dashboard showing opportunity names, avatars, and deal values in an attractive card layout—one card for each record returned by your query. Once you save your Dynamic Component, you can place it on any Lightning page (Account pages, Home page, custom app pages) and it will automatically display your opportunities.

From here, you can enhance your cards further by adding buttons (to navigate to records), additional metrics (close date, probability), or status badges (stage indicators with colors).

***

## How the Repeater Works: Core Concepts

Before diving into detailed configuration, understanding these three core concepts will help you configure the Repeater efficiently.

<details>

<summary>1. Data Source → Template → Output</summary>

The Repeater follows a simple flow:

* **Data Source**: You define what data to repeat (a Salesforce query or variable)
* **Template**: You design how one item should look (by placing components in the Repeater's slot)
* **Output**: The Repeater automatically generates your template for each record

**Example**: Query 50 Contacts → Design one contact card → Get 50 contact cards automatically generated

</details>

<details>

<summary>2. Data Binding Connects Template to Records</summary>

Components inside the Repeater access the current record's data using this syntax:

```
{!RepeaterAPIName.CurrentRecord.FieldName}
```

**Breaking it down**:

* `RepeaterAPIName` - Your Repeater's API Name (found in Properties Panel, e.g., "Repeater1")
* `CurrentRecord` - Always use this exact text—it references whichever record is currently being displayed
* `FieldName` - The Salesforce field API name you want to display (e.g., `Name`, `Amount`, `Account.Name`)

**Common binding examples**:

* `{!Repeater1.CurrentRecord.Name}` - Display record name
* `{!Repeater1.CurrentRecord.Amount}` - Display opportunity amount
* `{!Repeater1.CurrentRecord.Account.Name}` - Display related account name
* `{!Repeater1.CurrentRecord.Owner.Email}` - Display owner's email

</details>

<details>

<summary>3. Components Within Components (Nested Queries)</summary>

Here's where the Repeater becomes powerful: components you place inside the Repeater slot can have their own data sources. This enables aggregation and parent-child relationships.

**Example scenario**: Show each Account Executive with their total pipeline

* **Outer Repeater**: Queries User object → one section per user
* **Inner Metric**: Queries Opportunity object with filter `OwnerId = {!Repeater1.CurrentRecord.Id}` → shows sum for that specific user

This pattern works because each component inside the Repeater can "see" the current record and filter its own query accordingly.

</details>

***

## Configuration Workflow

Follow this workflow to configure any Repeater component:

**Step 1: Add and Name the Component**\
Drag the Repeater onto your Dynamic Component canvas. In the Properties Panel, set a clear API Name (e.g., "ContactRepeater", "OppCards") since you'll reference this in bindings.

<details>

<summary><strong>Step 2: Connect Your Data Source</strong></summary>

In the Properties Panel, configure the Data Source:

* Choose **Query** for Salesforce objects or **Variable** for pre-defined data
* If using Query: Select object, add filters, set sort order
* Preview your query results to verify data is returning correctly

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FNHSCjOpSntrwdvFHlTLQ%2F2026-01-29_08-55-15.png?alt=media&#x26;token=7595f481-95bd-4392-b6a8-a6eb048620ff" alt="" width="323"><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Step 3: Design Your Template</strong></summary>

Drag components into the Repeater's slot to design how one item should appear:

* Start with a structure component (Card and Media Object are common for cards layout style)
* Add display components (Text, Metric, Avatar, etc.)
* Add interaction components (Buttons for actions)
* Bind each component to current record data using `{!RepeaterAPIName.CurrentRecord.FieldName}`

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fzy8vFDBUmSYc5R9pEXZq%2F2026-01-29_08-57-59.png?alt=media&#x26;token=55289487-1307-4883-a089-a0c7958e0b57" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Step 4: Configure Layout</strong></summary>

In the Layout Section, set how repeated items are arranged:

* **Alignment**: Horizontal (grid) or Vertical (stacked)
* **Columns**: Set default and responsive breakpoints (Small/Medium/Large)
* **Dividers**: Add visual separation between items (Card, Solid, Space, etc.)

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F8FAnb0sNJMX0NHv996YP%2F2026-01-29_08-59-10.png?alt=media&#x26;token=feb0035b-0033-4e2e-961c-2ed4992b8af8" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>Step 5: Add Optional Controls</strong></summary>

Enhance usability with these optional features:

* **Header**: Add title, subtitle, item count, action buttons
* **Pagination**: Enable for large datasets, set items per page
* **Search**: Map searchable fields so users can filter results
* **Filters**: Add reactive filters users can toggle
* **Side Panel**: Create expandable detail view for each item

</details>

<details>

<summary><strong>Step 6: Test Responsively</strong></summary>

Preview your Repeater across different screen sizes:

* Verify columns adjust appropriately (especially on mobile)
* Check that bindings display correct data
* Test pagination, search, and filters if enabled
* Ensure nested queries return expected aggregations

</details>

**Key principle**: The Repeater is a multiplication tool. Whatever you build in the slot gets multiplied by the number of records in your data source. Design one item well, and the Repeater handles the rest.

***

## **Configuration**

### **Basic Properties**

The Basic Properties section defines how your Repeater connects to data and displays repeated content. These settings determine what records are shown, how they're filtered, and how users interact with the data.

| Property          | Type     | Description                                                                                                                    | Example                                                           |
| ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- |
| **API Name**      | Text     | Unique identifier (used in bindings like `{!Repeatable1.CurrentRecord.Field}`).                                                | OppRepeater                                                       |
| **Data Source**   | Select   | Source for repetition: variable (from Variable resource) or query (Salesforce query).                                          | query (Opportunity object).                                       |
| **Data Mappings** | Settings | Sub-options: Filters (reactive conditions), Search Fields (for searchable columns), No Results Message (custom text if empty). | Filters: Stage = "Closed Won"; Message: "No opportunities found." |

*Best Practice:* Use queries for Salesforce data; map filters to Variables for dynamic control.

### **Layout**

The Layout Section controls how repeated sections are displayed within your component. These options let you arrange content responsively across different screen sizes—whether you're designing a single-column form, a multi-column dashboard, or a dynamic grid.

| Property                     | Type/Condition | Description                                            | Options/Examples    |
| ---------------------------- | -------------- | ------------------------------------------------------ | ------------------- |
| **Alignment**                | Select         | Section flow: vertical (stacked) or horizontal (grid). | horizontal.         |
| **Number of Columns**        | Select         | Default columns: 1, 2, 3, 4, 6, 12.                    | 3.                  |
| **Number of Columns Small**  | Select         | Columns for small screens/containers.                  | 1.                  |
| **Number of Columns Medium** | Select         | Columns for medium screens/containers.                 | 2.                  |
| **Number of Columns Large**  | Select         | Columns for large screens/containers.                  | 4.                  |
| **Divider**                  | Toggle/Select  | Add dividers between sections (e.g., lines or spaces). | On, style: "solid". |

{% hint style="success" %}

## Tip

Adjust columns for responsiveness; use horizontal for card grids.
{% endhint %}

### **Header**

The Header Section lets you define a rich and informative header for your Repeater. This header can include a title, subtitle, icons or avatars, and action buttons, providing users with immediate context and interactive controls.&#x20;

| Property                 | Type            | Description                                                                | Example                    |
| ------------------------ | --------------- | -------------------------------------------------------------------------- | -------------------------- |
| **Title**                | Text            | Main header text.                                                          | "Opportunities"            |
| **Caption**              | Text (Optional) | Subtext below title.                                                       | "Active deals"             |
| **Avatar**               | Settings        | Sub-options: Image (URL), Fallback Icon Name (SLDS icon), Initials (text). | Icon: standard:opportunity |
| **Help Text**            | Text (Optional) | Guidance tooltip.                                                          | "Click to view details."   |
| **Is Joined**            | Boolean         | Connects header visually to content (e.g., no bottom border).              | On.                        |
| **Show Number of Items** | Boolean         | Displays item count (e.g., "5 items").                                     | On.                        |
| **Action**               | Settings        | Add header buttons for actions (configure in Interactions).                | "Add New" button.          |
| **Hide Actions**         | Boolean         | Hides action buttons.                                                      | Off.                       |
| **Disable Actions**      | Boolean         | Disables action buttons.                                                   | Off.                       |

### **Pagination, Filter, and Search**

This section enhances navigation and data handling for repeated items, particularly with large datasets. These controls help users easily locate, page through, and refine the items they see.

| Property                     | Type/Condition            | Description                                                            |
| ---------------------------- | ------------------------- | ---------------------------------------------------------------------- |
| **Show Pagination**          | Boolean                   | Enables paging; set Number of Items per Page (e.g., 10).               |
| **Number of Items per Page** | Number (If pagination on) | Items shown per page.                                                  |
| **Filter Type**              | Select                    | Filter display: horizontal (inline), popover (dropdown), panel (side). |
| **Show Search**              | Boolean                   | Adds a search bar; uses mapped Search Fields.                          |

### **Side Panel**

The Side Panel settings control where filter and search controls appear when using the "panel" filter type. Instead of displaying filters inline with your content, the panel creates a collapsible sidebar for a cleaner layout.

| Property               | Type    | Description                           | Options/Examples |
| ---------------------- | ------- | ------------------------------------- | ---------------- |
| **Position**           | Select  | Panel location: left or right.        | right.           |
| **Is Closed**          | Boolean | Initial state: On = collapsed.        | On.              |
| **Hide Toggle Button** | Boolean | Hides the toggle for opening/closing. | Off.             |
| **Reset Button Label** | Text    | Label for reset button in panel.      | "Clear".         |

#### **When to use Side Panel**

* You have multiple filter options and want to keep your main content area clean
* Users need access to filters but don't need them visible at all times
* You're building a searchable directory or catalog where filters are secondary to browsing

#### **How it works**

1. In the **Filter** section, set **Filter Type** to "panel"
2. Configure the Side Panel **Position** (left or right)
3. Set **Is Closed** to On if you want the panel collapsed by default
4. Users click the toggle button to open/close the filter panel

<mark style="background-color:green;">**Tip**</mark>: Use the panel position on the opposite side of your main actions. For example, if you have action buttons on the right side of cards, place the filter panel on the left to avoid visual crowding

***

## Examples

### **Example 1:** List Account Executives by Total Opportunity Amount

Display a list of account executives and their total opportunity amounts closed this year. This example uses the Avonni Repeater to iterate through a query and the Avonni Metric component to display results for each executive.

{% stepper %}
{% step %}

#### Add the Avonni Repeater

Start by dragging the **Avonni Repeatable** onto your page. This component allows you to display repeated content—one instance per account executive.&#x20;
{% endstep %}

{% step %}

#### Configure the Data Source

In the Repeater's Properties Panel, locate the Basic Properties section and set the Data Source to "Query". Click the configuration button to open the query builder. In the query builder:

* Select the **User** object from the object dropdown
* Add a filter to narrow down to Account Executives: Click "Add Filter" and set **UserRole.Name** equals "Account Executive" (or use **Profile.Name** if your org structures roles differently)
* Optionally add another filter like **IsActive** equals "True" to show only active users
* Click "Done" to save your query

The Repeater will now fetch all active Account Executives in your org.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FbQ3BcALShWTC5m1xwwC2%2F2025-07-25_14-47-30.png?alt=media&#x26;token=f6a75b2b-ee83-41dc-ae0a-20d3415f3ead" alt="" width="563"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Insert a Metric Inside the Repeatable

From the component library, drag the **Avonni Metric** component into the **Repeater's slot area** (the empty section labeled "Drop components here"). Once placed, click on the Metric component to open its Properties Panel. In the Basic Properties section:

* Set the Data Source to "Query"
* Click the query configuration button
* Select the **Opportunity** object
* In the Field section, choose **Amount** from the dropdown
* Set the Aggregate Function to **SUM** (this will calculate the total of all opportunity amounts)
* Leave any filters empty for now—we'll add the critical filter in the next step
* Click "Done" to save

At this point, the Metric is querying all opportunities in your org, but we need to filter it to show only opportunities for each specific user.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FNHrJqkm1FNNqCM90Fn99%2F2025-07-25_14-48-33.png?alt=media&#x26;token=a5cd271c-b405-4a40-9f8e-64a5f7280689" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **Filter by User**

This is the crucial step that connects each Metric to its corresponding Account Executive. With the Metric component still selected, go back to its query configuration:

* Click "Add Filter" in the query builder
* Set the filter field to **OwnerId** (this is the field that tracks who owns each opportunity)
* Set the operator to "Equals"
* For the value, click the formula/variable icon and enter: `{!Repeater1.CurrentRecord.Id}` (if your Repeater's API Name is different from "Repeater1", use that name instead)
* Click "Done"

This binding ensures that as the Repeater loops through each Account Executive, the Metric only counts opportunities owned by that specific user. The `{!Repeater1.CurrentRecord.Id}` dynamically references the current User's ID in each iteration..

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FN3mzIaG0R2JPL98AdTZP%2F2025-07-25_14-49-24.png?alt=media&#x26;token=8a0271b0-b376-4e64-a4ca-5249f659c985" alt="" width="375"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Adjust metric settings

Now that the data is flowing correctly, polish the Metric's appearance for better readability:

* **Enable the Avatar** (optional):
  * In the Metric's Properties Panel, scroll to the Avatar section
  * Toggle "Show Avatar" to On
  * Set the Avatar Type to "Initials"
  * Set the Initials value to `{!Repeater1.CurrentRecord.Name}` to show the user's initials
  * This creates a visual identifier for each Account Executive
* **Update Labels**:
  * Set the Label to something descriptive like "Total Pipeline" or "Closed Won Amount"
  * Optionally add a sublabel with `{!Repeater1.CurrentRecord.Name}` to display the executive's name
* **Format the Value**:
  * In the Value Formatting section, set Format Type to "Currency"
  * Choose your currency symbol ($ for USD, € for EUR, etc.)
  * Set decimal places (typically 0 for whole dollar amounts)
* **Add Visual Elements**:
  * In the Icon section, add an icon like `utility:moneybag` or `utility:trending`
  * Choose an icon color that matches your branding
  * Consider adding a background color or variant style (success, warning) based on performance thresholds
    {% endstep %}

{% step %}

#### Final Result

Once everything is set up, you’ll have a clean, repeatable list of Metric components—each one showing the **total closed opportunity amount** for a different Account Executive. The layout updates dynamically based on your **User query**, making this a powerful way to visualize team performance in real time.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FpbLypbNfEpL3iBSM7JbG%2F2025-07-25_15-02-38.png?alt=media&#x26;token=2a0bb393-bcff-465a-ad5d-fb1201e99685" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

### **Example 2: Employee Directory**

This example displays a list of Contacts tied to the current Account page's record ID, using the Avonni Repeatable Component to show a Media Object, Avatar, and Button for each contact.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F4pZ1Q4R9nMLFPxSKHZOy%2F2025-07-25_15-09-50.png?alt=media&#x26;token=37abe2fa-774b-4629-8200-2272a7ce4af3" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### Add the Avonni Repeatable

Drag the **Avonni Repeatable** component onto the page where you want the employee directory to appear.&#x20;
{% endstep %}

{% step %}

#### Set the Data Source to a Query

* Choose **Query** as the data source.
* Select the **Contact** object
  {% endstep %}

{% step %}

#### Apply a Filter by Current Account ID

* Add a filter that shows only contacts linked to the **current Account**.
* Use the **record ID** from the Account page context to do this

{% hint style="info" %}

## Note

* Make sure the [**target page name**](https://docs.avonnicomponents.com/dynamic-components/core-concepts/target-page-object) is set to the **Account** object.
* This allows the component to access the correct record ID when used in a dynamic context
  {% endhint %}
  {% endstep %}

{% step %}

#### Adjust repeatable layout settings

To control how the employee directory appears, the **Repeatable Layout Settings** are configured to provide a clean, structured presentation. The layout uses vertical alignment, meaning each contact’s information is stacked vertically within its section. The display is arranged in a **3-column grid**, allowing multiple contacts to appear side by side across the page. Additionally, a **Card-style divider** is applied between items to visually separate and organize content for improved readability.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Fv8Gp5FeovIiRhsC3s2Ih%2F2025-07-25_10-51-14.png?alt=media&#x26;token=f8af390d-4c68-475e-b50f-70c9c3dc9ae5" alt="" width="321"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Place the media object component inside the repeatable

Inside the repeatable slot, drag the media object componnet to have access to other slots on the left and right side to place other components inside
{% endstep %}

{% step %}

#### Add the Avatar component to the first slot

Drag the Avatar Component on the left slot of the Media Object component.&#x20;
{% endstep %}

{% step %}

#### Add the Avonni Button to the right slot of the media object

Inside the **Media Object**, place an **Avonni Button** in the **right slot** to act as a call-to-action for each contact. Label the button **"View"**, and configure its **click interaction** to navigate users to the selected contact’s record page. To do this, set the interaction to:\
**Navigate → Record Page → Contact Object → View**
{% endstep %}
{% endstepper %}

***

## Key Considerations

* **Data Access:** In slots, use {!API\_Name.CurrentRecord.Field} for current item; query child records for aggregates.
* **Performance:** Limit queries for large datasets; use pagination to avoid load issues.
* **Responsive Design:** Test column settings across device sizes.
* **Actions and Interactions:** Header actions can trigger flows, and side panels are available for per-item edits.
* **No Results Handling:** Customize empty-state messages to guide users.

***

## **Troubleshooting Common Issues**

<details>

<summary>No items are repeating / The Repeater appears empty</summary>

**What's happening**: The Repeater component is visible on the page, but no repeated sections are showing up.

**Common causes and solutions**:

1. **Query returns no results**
   * Check your Data Source query in the Properties Panel
   * Click "<mark style="background-color:purple;">Preview Results</mark>" to see if any records match your criteria
   * Verify your filters aren't too restrictive (for example, if you're filtering by Stage = "Closed Won" but have no closed won opportunities, nothing will display)
2. **Variable is empty or undefined**
   * If using a Variable as your data source, verify that the variable is being populated correctly
   * Check that the variable is in scope and available on the page where the Repeater is placed
   * Use the Debug Console to inspect the variable's value
3. **Record context missing**
   * If your query filters by the current record ID (like `AccountId = {!recordId}`), ensure you're on a record page with a valid record ID
   * Verify the Target Page Name is set correctly in your Dynamic Component settings
4. **Permissions issue**
   * Confirm the current user has read access to the object and fields in your query
   * Test with a System Administrator profile to rule out permission issues

**How to verify**: Open the browser console and check for any error messages. Also, try temporarily removing all filters from your query to see if records appear

</details>

<details>

<summary>Binding attributes show {!Repeater1.CurrentRecord.FieldName} as literal text</summary>

**What's happening**: Instead of displaying the actual field values, you're seeing the binding syntax itself displayed as text.

**Common causes and solutions**:

1. **API Name mismatch**
   * The API Name in your binding must exactly match the Repeater's API Name property
   * Check the Repeater's API Name in the Properties Panel (for example, if it's "OppRepeater", use `{!OppRepeater.CurrentRecord.FieldName}`)
   * API Names are case-sensitive
2. **Incorrect field API name**
   * Verify the field name in your binding matches the actual Salesforce field API name
   * For custom fields, remember to include `__c` (for example, `Custom_Field__c`)
   * For relationship fields, use dot notation correctly (for example, `Account.Name` not `AccountName`)
3. **Component doesn't support dynamic attributes**
   * Ensure the component inside your Repeater slot supports attribute binding
   * Some properties may only accept static values
4. **Syntax error in binding**
   * Double-check your binding syntax: `{!ComponentAPIName.CurrentRecord.FieldAPIName}`
   * Ensure you're using curly braces `{}`, not parentheses or brackets
   * Verify there are no extra spaces or typos

**How to verify**: Start with a simple Text component displaying `{!Repeater1.CurrentRecord.Id}` to confirm basic binding works, then gradually add more complex field references.

</details>

<details>

<summary>Layout is broken or items don't align properly</summary>

</details>

<details>

<summary>Pagination controls are not appearing</summary>

</details>

<details>

<summary>Search functionality isn't working</summary>

</details>

<details>

<summary>Filters aren't affecting the displayed results</summary>

</details>

***

## Summary

The Avonni Repeater component is your go-to solution for creating dynamic, data-driven lists and grids in Salesforce without writing code. By combining a flexible data source with slotted components, you can build everything from simple contact lists to sophisticated dashboard cards with metrics, actions, and interactive features.

### **What makes the Repeater powerful**

* **Truly flexible templates**: Unlike standard Salesforce repeating components, the Repeater lets you place any combination of Avonni components in its slot—mix Text, Metrics, Avatars, Buttons, Media Objects, and more to create exactly the layout you need
* **Smart data binding**: Access current record data with simple attribute syntax like `{!Repeater1.CurrentRecord.FieldName}`, and even reference related objects through dot notation (for example, `{!Repeater1.CurrentRecord.Account.Name}`)
* **Enterprise-ready features**: Built-in pagination, search, filtering, and responsive layouts ensure your repeating sections work smoothly with large datasets and across all devices
* **No-code aggregations**: Combine the Repeater with Metric components to display calculated values (sums, averages, counts) for each repeated item—perfect for displaying totals per account executive, department summaries, or portfolio analytics

### **When to use the Repeater**

* Building custom card layouts that go beyond what standard list views offer
* Creating dashboard sections that repeat for different categories (sales by region, opportunities by stage, cases by priority)
* Displaying parent records with aggregated child data (accounts with total opportunity value, contacts with case counts)
* Designing filtered, searchable directories (employee lists, product catalogs, resource libraries)
* Replacing multiple static components with a single dynamic, data-driven solution

### **Next steps and related resources**

* **Avonni Query Component**: Learn how to build advanced queries with filters, sorting, and relationships to power your Repeater
* **Data Mappings Guide**: Understand how to configure filters, search fields, and reactive conditions for dynamic data control
* **Media Object Component**: Discover how to create structured card layouts with avatars, content areas, and action slots
* **Metric Component**: Master data aggregation and display formatted values (currency, percentages, numbers) within your repeated sections

The Repeater transforms how you display Salesforce data—giving you the visual flexibility of custom development with the speed and maintainability of no-code configuration


---

# 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/components/repeater.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.