List
The Avonni List displays records or custom items in a fully customizable, interactive list. It supports multiple layouts, inline actions, filtering, sorting, drag-to-reorder, and pagination.
Tutorials
Step 1 — Choose Your Data Source
The Data Source setting determines where the list's content comes from. Pick it first — everything else builds on this choice.
Items from a Flow collection variable
Content that changes as the flow runs based on prior steps
Live Salesforce records
Large or complex datasets — replaces the need for a "Get Records" element
Example (Query): A rep opens a flow and sees all open Accounts assigned to them, fetched directly via Query — no separate "Get Records" step needed.
Note: Images are not supported when using the Picklist data source.
Step 2 — Map Your Data
When using Variable or Query as your data source, you need to tell the List which Salesforce fields map to which parts of each item.
Think of Data Mappings as a translator: you connect Account.Name → Label, Account.Phone → Subtitle, and so on. Without it, the list doesn't know what to display.
Example: For a list of Contacts, you might map:
Name→ Label
Title→ Subtitle
Step 3 — Pick a Variant (Layout Style)
The Variant controls the overall shape and behavior of the list.
Base (default)
Vertical list, one item per row
Detailed records with multiple fields, avatars, or media
Single-Line
Horizontal scrolling row with arrows
Compact summaries, quick navigation between items
Checklist
Vertical list with checkboxes
Task lists, preference selections, multi-select input
Example (Base): A master-detail layout — click a Contact in the list to see their full record on the right.
Example (Single-Line): Show today's scheduled account visits in a horizontal strip at the top of a flow screen.
Example (Checklist): A pre-visit checklist a field rep completes before logging a call.
Checklist-Specific Settings
When Checklist is selected, two additional options appear:
Strike-Through on Check
Draws a line through completed items — gives users instant visual confirmation
Show Check Counter
Displays a live count of checked items — e.g., "3 of 7 completed"
Layout & Display
Columns
Control how many columns the list uses, from 1 to 12. Set different column counts for each screen size to enable responsive behavior.Set different column counts for each screen size to enable responsive behavior.
Example: 1 column on mobile, 3 columns on desktop — great for a product or account card grid.
Dividers
Dividers visually separate list items. Choose a style to match your design:
Top
Allows you to place a divider at the top of each item in the list.
Bottom
Adds a divider line at the bottom of each list item.
Around
Places divider lines both above and below each item in the list.
Card
Sets each list item within its own card-like container, separated by dividers.
Item Clickable
Toggle this on to make entire list items clickable (not just action buttons). Wire the click to an interaction to navigate, open a modal, or trigger flow logic.
Item Content
Avatar
Display a profile image, icon, or initials alongside each item.
Variant
Circle, Square, Empty
Icon Size
Small, Large
Position
Left, Top-Left, Bottom-Left, Right, Top-Right, Bottom-Right, Left-of-Title
Presence Position
Top-Left, Top-Right, Bottom-Left, Bottom-Right (for status indicators)
Images
Add an image to any list item. Configure position, size, height, and crop behavior directly in the component settings.
Note: Images are not available with the Picklist data source.
Fields
Display additional Salesforce fields beneath each list item's main label.
To set up fields:
Go to the Fields attribute at the bottom of the Properties Panel and add the fields you want to display
In Field Attributes, define how many columns each field spans within the item
Field label styles:
Standard
Label sits above the value — clean and readable
Label Hidden
No label shown — good when the field's purpose is obvious
Label Inline
Label sits to the left of the value — efficient use of horizontal space
Label Stacked
Label floats above the value when focused — modern, mobile-friendly
Header
The header appears above the list and provides context and global controls.
Title
Identifies what the list contains
Caption
Short description or context below the title
Icon
Visual indicator of the list's purpose
Is Joined
Removes bottom border/shadow so the list blends with a component directly below it
Buttons
Global action buttons — wired to the "On Header Action" interaction
Example (Is Joined): Place a List directly below a search bar component and enable Is Joined — they appear as one unified panel.
Actions
Actions let users perform actions from within the list — edit, navigate, delete, or trigger flow logic.
Item Actions
Buttons or links attached to individual list items.
Example: An "Edit" button on each Contact row that opens an edit screen in the same flow.
Media Actions
Buttons embedded in images or video thumbnails.
Example: A "View Details" button overlaid on a product image that opens a detail screen.
Filtering & Search
Search
Toggle on Searchable to add a search bar above the list.
Placeholder text
Custom hint text inside the search bar
Position
Left, Right, Center, Fill
Tip: Use descriptive placeholder text — "Search by account name or city" is more helpful than "Search…"
Filters
Add fields as filters so users can narrow down what the list shows.
Choose how filters are displayed by going on the filter section.
Horizontal
Filter pills appear directly above the list
Quick access, desktop-first flows
Popover
Filters hide behind a button — click to reveal
Keeping the interface clean when filters are used occasionally
Side Panel
Filter panel slides in from left or right
Complex filter sets with many fields
Side Panel settings
Position
Left, Right
Match the panel to your overall layout
Is Closed (default state)
Open or Closed
Closed = focus on data first; Open = encourage filtering upfront
Hide Toggle Button
Show or Hide
Hide when you want another element (like a header button) to control the panel
Sorting & Reordering
Sort (by Field)
Enable Sortable to add a sort indicator to list items, allowing users to reorder items by a chosen field.
Drag-to-Reorder
Let users manually drag items into a new order. When reordering is enabled, wire the On Reorder interaction to an update action to persist the new order to Salesforce.
⚠️ Important: You must set an Order By field in the list settings for drag-to-reorder to work correctly with the "Update records order" interaction option.
Example: A rep drags their top priority accounts to the top of the list. The flow automatically updates an "Order" field on each Account record to reflect the new sequence.
Pagination
Split long lists into pages to keep the interface fast and readable.
Show Pagination
Display or hide pagination controls
Enable / Disable
Items Per Page
How many items show per page
1–200
Alignment
Where pagination controls appear
Left, Center, Right
Button Labels & Icons
Customize First, Last, Next, Previous controls
Adapt for language or branding
Interactions
Wire list events to Flow actions.
Here's what each interaction does:
On Item Click
User clicks a list item (when Item Clickable is on)
Navigate to a detail screen, open a modal, pre-fill a form
On Action Click
User clicks an item-level action button
Edit a record, delete an item, trigger a sub-flow
On Header Action
User clicks a header button
Filter or sort the list, open a global action
On Media Action Click
User clicks a button within an image or video
Open a detail view, start playback, link to a record
On Reorder
User drags items into a new order
Update an order field on each record to save the new sequence
Important regarding the Reorder interaction
Ensure you've set an "Order By" field in the list settings to make this work. This will enable the "Update records order" option in the interaction settings.
Output Variables
The List exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the List component, and pick the output variable you need.
Item Selection
When users check items in the List, these variables update automatically.
Selected Items
Record Collection (SObject[])
All currently selected items as a collection of Salesforce records. Use this to loop through selected records in a subsequent flow element.
Selected Item Names
Text Collection (String[])
The names of all selected items, as a list of strings.
Example: After the List screen, use a Loop element to iterate through Selected Items and update each record's status — e.g., mark each selected Task as "Completed".
Item Clicks
When users click on a list item (requires Items Clickable to be enabled), these variables tell you which item was clicked.
Clicked Item
Record (SObject)
The full Salesforce record of the item the user clicked.
Clicked Item Name
Text (String)
The name of the clicked item.
Example: Use Clicked Item in the next screen to display the full details of the record the user selected from the list.
Action Clicks
When users click an item-level action button, these variables identify which action was triggered and on which item.
Clicked Item Action Item
Record (SObject)
The full Salesforce record of the item where the user clicked an action.
Clicked Item Action Name
Text (String)
The name of the action the user clicked (e.g., "Edit", "Delete"). Use in a Decision element to route the flow based on which action was pressed.
Clicked Item Action Item Name
Text (String)
The name of the item where the action was clicked.
Example: A row action called "Edit" is triggered. Use a Decision element to check if Clicked Item Action Name equals "Edit", then navigate to a record edit screen using the data from Clicked Item Action Item.
Media Action Clicks
When users click a button within an image or video area of a list item, these variables capture the interaction.
Clicked Item Media Action Item
Record (SObject)
The full Salesforce record of the item where the user clicked a media action.
Clicked Item Media Action Name
Text (String)
The name of the media action the user clicked.
Clicked Item Media Action Item Name
Text (String)
The name of the item where the media action was clicked.
Example: On a Product List with product images, a media action "View Details" lets users click the image to navigate to the product detail screen.
Header Actions
Clicked Header Action Name
Text (String)
The name of the header action button the user clicked (e.g., "New", "Export"). Use in a Decision element to route the flow based on which header button was pressed.
Reordered Items
When users drag items into a new order (requires the On Reorder interaction to be configured), these variables capture the new sequence.
Sorted Items SObject
Record Collection (SObject[])
All items in their new order as a collection of Salesforce records. Use this with an Update Records element to save the new sort order back to Salesforce.
Items
Collection (ListItem[])
All items in their new order, using the component's internal ListItem format. Use Sorted Items SObject instead if you need standard Salesforce records.
Items Serialized
Text (String)
The reordered items as a JSON string. Useful for passing to an Apex action or subflow that expects serialized input.
Example: After the user drags items into a new order, pass Sorted Items SObject into an Update Records element to persist the new sequence in an "Order" field on each record.
Component Metadata
Number of Items
Integer
The total number of items currently loaded in the list. Useful for displaying a count or making decisions when the list is empty.
Last updated
Was this helpful?