Repeater

Overview

Key capabilities

• Complete layout control: Unlike standard list views with fixed columns, you define exactly how each item displays — combine Text, Metrics, Avatars, Buttons, Progress Bars, 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

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

1

Add the Repeater to Your Dynamic Component

Open the Avonni Dynamic Components App and create a new Dynamic Component (or open an existing one). From the component library, drag the Repeater onto your canvas.

2

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

3

Build Your Opportunity Card

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

• Drag a Media Object component into the Repeater's slot

• In the Media Object's left slot, add an 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"

• In the Media Object's main content area, add a Text component:

  • Set the value to {!Repeater1.CurrentRecord.Name}
  • Make it bold using the formatting options

• Below that text, add a 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

4

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

5

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.

How the Repeater Works: Core Concepts

Configuration Workflow

Step 2: Connect Your Data Source

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

Step 3: Design Your Template

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}

Step 4: Configure Layout

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

Configuration

Data Source

Data Mappings

• Filters — Select object fields to expose as user-facing filter controls. Requires the data source to be Query or Variable.
• Search Fields — Select which SObject field API names the search bar scans across. Requires Show Search to be enabled and data source to be Query or Variable.
• No Results Message — The message shown when no records match the current filters or search.

Content

Items Clickable

Highlight On Click

Layout

• Alignment — Choose Vertical (stacked, default) or Horizontal (grid).
• Number of Columns — The base column count used for the smallest container (below 480 px) and as the fallback for all sizes. Options: 1 (default), 2, 3, 4, 6, 12.
• Number of Columns Small Container — Columns when the container is 480 px or wider.
• Number of Columns Medium Container — Columns when the container is 768 px or wider.
• Number of Columns Large Container — Columns when the container is 1024 px or wider.
• Divider — Visual separator between items. Options: None (default), Top, Bottom, Around, Card.
• Equal Heights — When enabled, all items in a row share the same height for a uniform grid appearance.

Header

• Title — Main header text displayed at the top of the component.
• Caption — Secondary text displayed above the title for additional context.
• Avatar — Display an image or icon in the header. Set an Image (URL), a Fallback Icon Name (SLDS icon), or Initials. Advanced options include Size and Variant (Circle or Square, default Square).
• Help Text — A hoverable icon in the header that displays guidance content.
• Is Joined — When enabled, the header's bottom border becomes square and shadowless so it sits flush against the component below.
• Show Number of Items — Displays the total item count next to the header title.
• Actions — Add interactive buttons to the header. Configure labels, names, icons, and disabled/hidden states. Use Visible Actions Buttons to set how many actions appear as inline buttons before the rest overflow into a dropdown menu.
• Hide Actions — Hides all header action buttons.
• Disable Actions — Disables all header action buttons.

Pagination

• Show Pagination — Enable to display pagination controls at the bottom of the Repeater. When disabled, items load progressively (infinite scroll or lazy loading).
• Number of Items per Page — Number of records per page when pagination is visible, or the batch size for lazy loading. Range: 1–500, default 100.

Filter

• Type — Sets the filter display style. Options: Horizontal (filters displayed inline above the content, default), Popover (filters in a floating popover), Panel (filters in a collapsible side panel).
• Use Record Picklist Values — When enabled for a picklist field filter, derives filter options from the values actually present in the records rather than the full defined picklist.
• Use Cascading Filter Values — When enabled, applying one filter dynamically narrows the available options in other filters to only reflect matching records. Overrides Use Record Picklist Values.

Search

• Show Search — Enable to display a search bar above the repeated items.
• Placeholder — Placeholder text shown inside the search bar (default: "Search"). Requires Show Search to be enabled.
• Position — Position of the search bar. Options: Left (default), Right, Center, Fill, Panel. Requires Show Search to be enabled.

Side Panel

• Position — Which side the panel slides out from. Options: Left (default), Right.
• Is Closed — When enabled, the panel starts collapsed. When disabled, the panel starts open.
• Hide Toggle Button — Hides the button that opens and closes the panel. Use this when you want to control the panel programmatically via interactions.
• Reset Button Label — Label for the reset/clear button inside the panel.

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 Type to Panel (or set Search Position 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

Set Component Visibility

Use Cases

Example 1: List Account Executives by Total Opportunity Amount

1

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.

2

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.

3

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.

4

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

5

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

6

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.

Example 2: Employee Directory

1

Add the Avonni Repeatable

Drag the Avonni Repeatable component onto the page where you want the employee directory to appear.

2

Set the Data Source to a Query

• Choose Query as the data source.
• Select the Contact object

3

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

Note

• Make sure the target page name is set to the Account object.
• This allows the component to access the correct record ID when used in a dynamic context

4

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.

5

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

6

Add the Avatar component to the first slot

Drag the Avatar Component on the left slot of the Media Object component.

7

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

Interactions

Item Click

Header Action Click

Output Variables

Item Click

Example: When a user clicks a contact card in an employee directory Repeater, use Clicked Item sObject to populate a record-detail panel beside the list.

Header Actions

Others

Styling

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

• No items are repeating / The Repeater appears empty — Check your Data Source query in the Properties Panel and click "Preview Results" to verify records match your criteria. If using a Variable, confirm it is populated and in scope. If filtering by the current record ID, ensure you are on a record page with a valid record ID and that the Target Page Name is set correctly. Also confirm the current user has read access to the object and fields — test with a System Administrator profile to rule out permission issues.
• Binding attributes show {!Repeater1.CurrentRecord.FieldName} as literal text — The API Name in your binding must exactly match the Repeater's API Name (case-sensitive). Verify the field API name is correct, including __c for custom fields and dot notation for relationships (e.g. Account.Name). Double-check your binding syntax {!ComponentAPIName.CurrentRecord.FieldAPIName} for extra spaces or typos, and confirm the target component property supports dynamic binding.
• Fields bound to Clicked Item sObject are blank on the first click: the Clicked Item sObject output returns the record from the data the Repeater has already loaded. It does not run a new query when an item is clicked. A field used only outside the Repeater (for example in a record detail panel) is not automatically included in the Repeater's query, so it comes back empty. Add each of those field API names to the Additional fields advanced property in the query configuration. The fields are then returned with every query and the panel fills on the first click.