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.
Overview
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
Configuration
Configure the List from the Properties tab of the Edit List Component panel. The sub-sections below mirror the Properties tab.
Data Source
The Data Source setting determines where the list's content comes from.
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.
Data Mapping
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
Variant
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
Items loading. With Pagination off, the List loads Items Per Page items at a time behind a Show More button — or, if you set a fixed Height (Size style), it switches to infinite scroll (loading the next batch as you reach the bottom). With Pagination on, it shows one page of Items Per Page items with pagination controls.
Interactions
Interactions define what happens when users interact with the List. Configure them from the Interactions tab of the Edit List panel.
Item Click
Fires when a user clicks a list item (requires Item Clickable to be enabled or an Item Click interaction to be configured). Exposes the clicked record through the clickedItem and clickedItemName outputs — use it to navigate to a detail screen, open a modal, or pre-fill a form.
Item Action Click
Fires when a user clicks an item-level action button. Use the targetName sub-property to scope the interaction to a specific action, and read the clickedItemActionName, clickedItemActionItem, and clickedItemActionItemName outputs to identify which action fired and on which record.
Media Action Click
Fires when a user clicks an action embedded in an item's image or media area. Scope it with the targetName sub-property, and read the clickedItemMediaActionName, clickedItemMediaActionItem, and clickedItemMediaActionItemName outputs to identify the action and its record.
Header Action
Fires when a user clicks one of the header action buttons. Use the targetName sub-property to target a specific header action, and read the clickedHeaderActionName output to branch your flow logic.
Reorder
Fires when a user drags items into a new order (requires Sortable to be enabled). Exposes the new sequence through the sortedItems, sortedItemsSObject, and sortedItemsSerialized outputs — wire it to an Update Records element to persist the order. Set an Order By field in the list settings to enable the Update Records Order interaction option.
Item Check
Fires when a user checks or unchecks an item (check-list variant only). Updates the selectedItems and selectedItemNames outputs to reflect the current selection.
Styling
The Style tab gives you fine-grained control over the List's appearance. Configure it from the Style tab of the Edit List panel.
Controls outer spacing.
Top: Space above the component.
Right: Space to the right of the component.
Bottom: Space below the component.
Left: Space to the left of the component.
Controls inner spacing.
Top: Inner space at the top.
Right: Inner space on the right.
Bottom: Inner space at the bottom.
Left: Inner space on the left.
Controls dimensions.
Width / Height: Sets the component's width and height.
Min / Max Width / Height: Constrains how small or large the component can grow.
Overflow: Determines how content behaves when it exceeds the component's bounds.
Customizes the border.
Color: Border color.
Size: Border thickness.
Style: Border style (solid, dashed, etc.).
Radius: Corner rounding.
Styles the optional header above the content.
Color: Header background color.
Title Text Color: Color of the title text.
Title Font Size: Size of the title text.
Title Font Style: Style of the title text (normal, italic).
Title Font Weight: Weight of the title text (normal, bold).
Subtitle Text Color: Color of the subtitle text.
Subtitle Font Size: Size of the subtitle text.
Icon Color: Color of the header icon.
Action Color: Color of the header action buttons.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
Adjusts display when opened as a side panel inside a Flow screen.
Width: Panel width.
Background Color: Panel background color.
Controls individual list item appearance.
Avatar Image Object Fit: How the avatar image fits within its container.
Controls spacing around and between list items.
Top: Space above each item.
Bottom: Space below each item.
Left: Space to the left of each item.
Right: Space to the right of each item.
Block Between: Vertical space between items.
Inline Between: Horizontal space between items.
Controls vertical alignment of item sub-elements.
Body: Vertical alignment of the item body.
Actions: Vertical alignment of item action buttons.
Avatar: Vertical alignment of the item avatar.
Styles the primary label text on each item.
Text Color: Label text color.
Link Color: Color of label links.
Link Color Hover: Label link color on hover.
Font Size: Label font size.
Font Style: Label font style (normal, italic).
Font Weight: Label font weight.
Styles the description text on each item.
Color: Description text color.
Font Size: Description font size.
Font Style: Description font style.
Font Weight: Description font weight.
Line Clamp: Maximum number of lines before truncation.
Controls the background of list items.
Color: Default item background color.
Color Hover: Background color on hover.
Color Highlight: Background color when highlighted.
Color Sortable: Background color when the item is sortable.
Color Sortable Hover: Background color when a sortable item is hovered.
Customizes the border on each list item.
Color: Item border color.
Size: Item border thickness.
Style: Item border style.
Radius: Item border corner radius.
Styles the secondary info text on each item.
Text Color: Info text color.
Link Color: Info link color.
Link Color Hover: Info link color on hover.
Font Size: Info font size.
Font Style: Info font style.
Font Weight: Info font weight.
Styles the fields section displayed within each item.
Background Color: Fields area background color.
Border Color: Fields area border color.
Border Size: Fields area border thickness.
Border Style: Fields area border style.
Border Radius: Fields area corner radius.
Spacing Inline: Horizontal spacing within the fields area.
Spacing Block: Vertical spacing within the fields area.
Styles the labels of output fields inside each item.
Color: Field label text color.
Font Size: Field label font size.
Font Style: Field label font style.
Font Weight: Field label font weight.
Styles the values of output fields inside each item.
Color: Field value text color.
Font Size: Field value font size.
Font Style: Field value font style.
Font Weight: Field value font weight.
Styles the pagination controls at the bottom of the list.
Background Color: Button background color.
Background Color Active: Background when the button is active.
Background Color Hover: Background on hover.
Background Color Disabled: Background when disabled.
Text/Icon Color: Button text and icon color.
Text/Icon Color Active: Text/icon color when active.
Text/Icon Color Hover: Text/icon color on hover.
Text/Icon Color Disabled: Text/icon color when disabled.
Color Border: Button border color.
Color Border Active: Border color when active.
Color Border Hover: Border color on hover.
Color Border Disabled: Border color when disabled.
Border Size: Button border thickness.
Border Style: Button border style.
Active Button Background Color: Background of the currently active page button.
Active Button Background Color Active: Background when the active page button is pressed.
Active Button Background Color Hover: Background when hovering the active page button.
Active Button Text/Icon Color: Text/icon color of the active page button.
Active Button Text/Icon Color Active: Text/icon color when the active page button is pressed.
Active Button Text/Icon Color Hover: Text/icon color when hovering the active page button.
Active Button Color Border: Border color of the active page button.
Active Button Color Border Active: Border when the active page button is pressed.
Active Button Color Border Hover: Border when hovering the active page button.
Styles the footer area below the list items.
Background Color: Footer background color.
Border Color: Footer border color.
Border Size: Footer border thickness.
Border Style: Footer border style.
Border Radius: Footer corner radius.
Styles the button that loads additional items.
Background Color: Button background color.
Background Color Active: Background when pressed.
Background Color Hover: Background on hover.
Text Color: Button text color.
Text Color Active: Text color when pressed.
Text Color Hover: Text color on hover.
Border Color: Button border color.
Border Color Active: Border when pressed.
Border Color Hover: Border on hover.
Border Size: Border thickness.
Border Radius: Corner rounding.
Block Start: Space above the button.
Block End: Space below the button.
Inline Start: Space to the left of the button.
Inline End: Space to the right of the button.
Styles the checkbox used in the Checklist variant.
Size: Checkbox button size.
Background Color: Checkbox background color.
Background Color Active: Background when checked.
Icon Color: Color of the checkmark icon.
Border Color: Checkbox border color.
Border Size: Checkbox border thickness.
Border Radius: Checkbox corner rounding.
Output Variables
The List exposes these 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 Click
When a user clicks a list item (requires Item Clickable to be enabled or an Item Click interaction to be configured).
Clicked Item
Record (SObject)
The full record behind the item the user clicked.
Clicked Item Name
Text (String)
The name (key) of the clicked item.
Example: After the List screen, use Clicked Item to pre-fill a details screen with the contact or account the user selected.
Item Actions
When a user clicks an action button on an individual list item.
Clicked Item Action Name
Text (String)
The name of the action button the user clicked.
Clicked Item Action Item
Record (SObject)
The record belonging to the item on which the action was clicked.
Clicked Item Action Item Name
Text (String)
The name (key) of that record.
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 Actions
When a user clicks an action embedded in an item's image or media area.
Clicked Item Media Action Name
Text (String)
The name of the media action the user clicked.
Clicked Item Media Action Item
Record (SObject)
The record belonging to the item on which the media action was clicked.
Clicked Item Media Action Item Name
Text (String)
The name (key) of that record.
Example: On a product list, a media action "View Details" lets users click the product image. Use Clicked Item Media Action Item to pass the product record to a detail screen.
Header Actions
When a user clicks one of the header action buttons.
Clicked Header Action Name
Text (String)
The name of the header action button the user clicked.
Example: Use a Decision element after the screen to branch on Clicked Header Action Name — route to a "New Record" screen when the value equals "new".
Reorder
When a user drags items into a new order.
Items
Item Collection
The reordered list items as Avonni List Item objects.
Sorted Items SObject
Record Collection
The reordered items as Salesforce records — use this to pass directly into an Update Records element.
Items Serialized
Text (String)
The reordered items as a JSON string — useful when you need to pass the sequence to an Apex action.
Example: After the user drags accounts into priority order, pass Sorted Items SObject into an Update Records element to persist the new sequence in a custom
Sort_Order__cfield.
Item Check
When a user checks or unchecks an item (Checklist variant only).
Selected Items
Record Collection
The currently checked items as Salesforce records.
Selected Item Names
Text Collection
The name (key) of each checked item.
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".
Others
Number of Items
Integer
The total number of items currently loaded in the list.
Flow Interaction Output Variables
Like all interactive Flow components, the List exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Troubleshooting Common Issues
List shows nothing at runtime but items appear in the Component Builder preview — The flow variable feeding the Items input is empty when the screen loads — the Get Records element hasn't run yet, or the variable was reset earlier in the flow. Place the Get Records element before the screen, and confirm the collection variable is populated by adding a temporary Display Text element before the List screen.
Items show but the title, description, or avatar is empty — The Data Mappings section maps to fields the running user can't read (Field-Level Security), or the mapping points to a field that doesn't exist on the source object. Verify each mapped field's API name in Setup → Object Manager → [Object] → Fields & Relationships, and grant Visible FLS on the running user's profile.
Drag-and-drop reorder works visually but the new order is not saved — The Sort By option in the Header section is empty, or the sort field is non-writeable (formula, roll-up, system). Set Sort By to a numeric or text field the running user can edit (e.g., a custom
Sort_Order__cfield) and ensure the user has Edit FLS on that field.Reordering doesn't persist after refreshing the screen — The Data Source is set to Manual items; reorder persistence is only supported for Variable and Query sources because the component needs Salesforce records (with Ids) to write back to. Switch to Variable or Query as the Data Source if reorder needs to persist across sessions.
Checked state is lost on refresh — No field is mapped to Checked in Data Mappings; without a backing field, checks are stored only in memory for the current screen. In Data Mappings, map the Checked property to a checkbox field on the source object and ensure the running user has Edit FLS on that field.
Once an item is checked, the user can no longer uncheck it — The Checked and Uncheckable properties in Data Mappings point to the same field, triggering the "complete and lock" behavior — once true, the item becomes uncheckable. If users should be able to uncheck items, leave Uncheckable blank or map it to a different field.
Panel filters have no effect when records are loaded from a query — Panel filters only apply to Manual and Variable Data Sources; in Query mode, filtering is done server-side through Query Filters in the Properties tab. Open the Query panel and add filter conditions there instead.
Sort changes from the header have no effect in Query mode — In Query mode, sort order comes from Query Order By in the Properties tab, not from the visible Sort By menu. Open the Query panel and configure Order By with the desired field and direction.
Search returns no results even though the value appears in an item — Searchable fields are not configured; the component automatically searches the fields used in the Title and Description mappings, so values in other fields (e.g., Email or Phone) won't be found. Open Search Engine Attributes and add the field API names you want included in the search.
Clicking an item does nothing — Neither Items Clickable is on nor an Item Click interaction is configured; the list only treats items as clickable when at least one of these is set. Toggle Items Clickable on for navigation use cases, or wire an Item Click interaction in the Interactions tab.
Selected Items output variable is empty after the user checks rows — The Name mapping in Data Mappings is empty, or the field it points to has duplicate or empty values; the component identifies items by the Name field and without a unique value per item, selection can't be tracked. Map Name to a field with a unique, non-null value per row (typically
{{Record.Id}}).
Last updated
Was this helpful?