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, Metrics, Avatars, Buttons, Progress Bars, and more in any arrangement
Data binding: Access current record data with
{!Repeater1.CurrentRecord.FieldName}or related objects via{!Repeater1.CurrentRecord.Account.Name}Nested queries: Components inside the Repeater can have their own data sources—place a Metric that sums child Opportunities for each Account in the loop
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.
Restriction: Data Display components cannot be added to the Repeater for performance optimization.
Quick Start: Display High-Value Opportunities in a Visual Grid
Scenario: Your sales team needs to identify which prospects are worth pursuing quickly. 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.
Build time: 5 minutes.
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.
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:opportunitySet 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:moneybagfor visual appeal
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
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
Click Save in the Dynamic Component builder, then Activate your component
Open Lightning App Builder and navigate to the page where you want the dashboard (Home page, Opportunities page, etc.)
From the component list on the left, drag the AX - Dynamic Component onto your page
In the Properties Panel on the right, use the dropdown to select your newly created Dynamic Component from the list of available components
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.
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.
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.
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.
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.
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".
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. You can also display metadata such as item counts and visually connect the header to its content.
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.
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.
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
In the Filter section, set Filter Type to "panel"
Configure the Side Panel Position (left or right)
Set Is Closed to On if you want the panel collapsed by default
Users click the toggle button to open/close the filter panel
Tip: 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.
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.
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.
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..
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 initialsThis 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:moneybagorutility:trendingChoose an icon color that matches your branding
Consider adding a background color or variant style (success, warning) based on performance thresholds
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
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.
Apply a Filter by Current Account ID
Add a filter only to show 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
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 each item to visually separate and organize the content for better readability.
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
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 message for empty states to guide users.
Troubleshooting Common Issues
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
Last updated
Was this helpful?