> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/list.md). # 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

Category	Type	Tutorial
📘 Core	Build	Create a contact master details list
🖼️ Display	Build	Create a grid list with images
↕️ Sorting	Build	Create a sortable list
▶️ Actions	Build	Vertical list with actions
🔄 Data	Guide	How to reorder items and update records
🌍 Example	Example	Today's accounts to visit
🔄 Example	Example	Build a reorderable list

*** ## 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. | Data Source | Best For | When to Use | | ---------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------- | | [**Manual**](/flow/component-builder/data-sources/manual.md) | Fixed, pre-defined items | Static content — e.g., a menu of options that never changes | | [**Variable**](/flow/component-builder/data-sources/variable.md) | Items from a Flow collection variable | Content that changes as the flow runs based on prior steps | | [**Picklist**](/flow/component-builder/data-sources/picklist.md) | A Salesforce picklist field's values | Letting users pick from a defined set of options | | [**Query**](/flow/component-builder/data-sources/query.md) | 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, with no separate "Get Records" step. The data source is set at the bottom of the **Properties** tab. Choosing **Query** replaces the collection picker with a query editor: the object, the filter conditions, the sort order and a record cap.

The Query data source in the property editor

> **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` to Label, `Account.Phone` to Description, and so on. Without it, the list doesn't know what to display. **Data Mappings** sits directly under **Data Source** at the bottom of the Properties tab. > **Example:** For a list of Contacts, you might map: > > * `Name` to **Label** > * `Title` to **Description** > * `Email`, `Phone` and `Department` to **Fields**

Data Mappings on a record collection variable

Every part of an item can be mapped, not just the label:

Mapping	What it sets on each item
Label (required)	The item's main line of text.
Description	The secondary line under the label. Rich text, so it can carry formatting and other mapped fields.
Checked	The field that backs the checkbox in the Check List variant. Without it, checks live only in memory for the current screen.
Uncheckable	When this field is true, the item can no longer be unchecked. Point it at a different field from Checked, or leave it blank.
URL and Target	Turns the item into a link. Target is Self, Blank, Parent or Top.
Image Source	The field holding the URL of the item's image.
Annotation Icons	Small icons shown against the item, added one at a time.
Infos	Extra labelled entries under the item, each with its own optional URL and target.
Avatar	Per item: Initials, Icon Name, Image Source and Presence Type (Online, Busy, Focus, Offline, Blocked, Away).
Fields	The Salesforce fields listed under each item. Pick several; their layout is set separately under Fields Layout in the Properties tab.
Key Field	The unique identifier for each item, `{{Record.Id}}` by default. Selection and reordering both depend on it.
Image Alternative Text	Accessibility text describing the item's image.

The same section also holds **Filters**, **Search Fields** and **Sortable Fields**, which decide the fields those three features are allowed to work on, and **Sort By**, the field the list is ordered on. ### Variant The **Variant** controls the overall shape and behavior of the list. | Variant | What It Looks Like | Best For | | | -------------------- | ------------------------------------ | -------------------------------------------------------- | - | | **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 | | | **Check List** | 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.

Base variant on the left of a two column screen, with the selected contact on the right

> **Example (Single Line):** Show today's scheduled account visits in a horizontal strip at the top of a flow screen.

Single Line variant. The number of items shown at once follows the column settings under Layout

> **Example (Check List):** A pre-visit checklist a field rep completes before logging a call.

Check List variant with Strike Through On Check and Show Check Counter both on

#### Check List Settings When **Check List** is selected, two additional options appear:

Setting	What It Does
Strike Through On Check	Draws a line through completed items, giving users instant visual confirmation.
Show Check Counter	Appends the count of checked items to the header title, in the form "(3/7)".

Which items start out checked, and whether a check survives the screen, both come from the **Checked** mapping in Data Mappings. ### Layout & Display #### Columns Control how many columns the list uses (1, 2, 3, 4, 6, or 12). Set different column counts for each screen size to enable responsive behavior. > **Example:** 1 column on the narrowest container, 3 on a desktop one, which is what turns a list into a product or account card grid.

Three columns on a desktop container, with the Card divider

The four settings are **Number of Columns** (the fallback, and the value used below 480px), **Number of Columns Small Container**, **Number of Columns Medium Container** (above 768px) and **Number of Columns Large Container** (above 1024px). #### Dividers Dividers visually separate list items. Choose a style to match your design:

Divider	Description	Illustration
None (default)	No divider between items.
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.

#### Items Clickable Toggle **Items Clickable** 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. Two related settings sit beside it in the Properties tab:

Setting	What It Does
Highlight On Click	Keeps the last clicked item highlighted. An interaction that opens a panel on item click highlights the last clicked item anyway, whatever this is set to.
Show Number of Items	Displays the item count in the header.

### Item Content #### Avatar Display a profile image, icon, or initials alongside each item. The **Avatar** group in the Properties tab sets how avatars look for every item:

Attribute	Options
Icon Name	The fallback icon, used when an item has no image and no initials.
Size	X-Small, Small, Medium (default), Large, X-Large
Initials Auto Formatted	Derives the initials from the item's label instead of taking them from a field.
Variant	Circle, Square (default)
Position	Left (default), Top Left, Bottom Left, Right, Top Right, Bottom Right, Left of the Title, Right of the Title

What each individual avatar shows is a Data Mapping, not a property: **Initials**, **Icon Name**, **Image Source** and **Presence Type** (Online, Busy, Focus, Offline, Blocked, Away) are mapped per item in the **Data Mappings** section. #### 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:** 1. In **Data Mappings**, add the fields you want to display to the **Fields** mapping. 2. In the **Fields Layout** group of the Properties tab, set how many columns the fields use and which label style they take. **Field label styles:**

Variant	What It Looks Like
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.

Attribute	Purpose
Title	Identifies what the list contains.
Caption	Short description or context below the title.
Avatar	The visual next to the title. Holds a Fallback Icon Name, an Image, Initials, Alternative Text, a Size and a Variant.
Is Joined	Squares off the bottom edge of the header and drops its shadow, so the header reads as one panel with the list underneath it.
Actions	Global action buttons, wired to the "On Header Action" interaction.

> **Example (Is Joined):** A list whose header should read as a banner over its own content rather than as a separate card.

Is Joined off, the default: the header floats above the items

Is Joined on: the header's bottom edge is squared off and a rule separates it from the items

### 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. **Visible Item Actions** caps how many are shown on the row; the rest fold into an overflow menu. > **Example:** An "Edit" button on each Contact row that opens an edit screen in the same flow.

Three item actions with Visible Item Actions set to 2, so the third sits in the overflow menu

#### Media Actions Buttons embedded in images or video thumbnails. **Visible Media Actions** caps how many appear, the same way **Visible Item Actions** does for row actions. > **Example:** A "View Details" button overlaid on a product image that opens a detail screen.

A media action drawn over each item's image

### Filtering & Search #### Search Toggle on **Searchable** to add a search bar above the list. | Setting | Options | | -------------------- | -------------------------------------- | | **Placeholder text** | Custom hint text inside the search bar | | **Position** | Left, Right, Center, Fill, Panel | Setting **Position** to **Panel** moves the search box into the side panel, which is the same panel the filters can use. Which fields the search looks at comes from the **Search Fields** mapping in Data Mappings. > **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. Which fields can be filtered on comes from the **Filters** mapping in Data Mappings; the **Type** setting in the **Filter** group decides how they are presented.

Choose how filters are displayed by going on the filter section.

| Filter Type | How It Works | Best For | Illustration | | -------------- | ---------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Horizontal** | Filter pills appear directly above the list | Quick access, desktop-first flows | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-0c9b90d2afe4d3c9563e9ee0ceb7bb0d05e4ee30%2F2024-03-15_14-21-46.png?alt=media) | | **Popover** | Filters hide behind a button — click to reveal | Keeping the interface clean when filters are used occasionally | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-302e5535ad8682051046c36bd70cc1f81ba16e52%2F2024-03-15_14-22-47.png?alt=media) | | **Panel** | Filter panel slides in from left or right | Complex filter sets with many fields | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fgit-blob-5d28c238e1ad1534879c070b98d11712e9112cad%2F2024-03-15_14-23-44.png?alt=media) | #### Side Panel **Side panel** is its own group in the Properties tab, not a filter setting. It is shared: the panel appears when the filter **Type** is set to **Panel**, or when the search **Position** is set to **Panel**, or both. | Setting | Options | When to Use | | ---------------------- | ---------------------------- | ---------------------------------------------------------------------------- | | **Position** | Left, Right | Match the panel to your overall layout | | **Closed by Default** | Open or Closed | Closed puts the focus on the data first; open encourages filtering upfront | | **Hide Toggle Button** | Show or Hide | Hide when another element, such as a header action, should control the panel | | **Reset Button Label** | Any text, "Reset" by default | Rename the button that clears the filter values |

### Sorting & Reordering These are two different features, and they are configured in two different places. #### Sort by Field Users pick a field and the list reorders itself on it. The fields they can choose from come from the **Sortable Fields** mapping in Data Mappings, and **Sort By** in the same section sets the field the list opens on. In the **Sort** group of the Properties tab, **Sorted Direction** sets ascending or descending and **Show Sorted By Value** shows the current choice in the header. #### Drag-to-Reorder Enable **Sortable** to let users drag items into a new order. Each item then carries a drag handle, whose icon and side are set by **Sortable Icon Name** and **Sortable Icon Position**.

With Sortable on, every item carries a drag handle

Wire the **On Reorder** interaction to an update action to persist the new order to Salesforce. > ⚠️ **Important:** You must set a **Sort By** field in Data Mappings 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. | Setting | Description | Options | | ------------------------- | ---------------------------------------------- | ------------------------------ | | **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 | {% hint style="info" %} **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. {% endhint %} ## Interactions [Interactions](/flow/component-builder/interactions-panel.md) 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 **Items 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 a **Sort By** field in Data Mappings 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. {% tabs %} {% tab title="Margin" %} 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. {% endtab %} {% tab title="Padding" %} 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. {% endtab %} {% tab title="Size" %} 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. {% endtab %} {% tab title="Border" %} Customizes the border. * **Color:** Border color. * **Size:** Border thickness. * **Style:** Border style (solid, dashed, etc.). * **Radius:** Corner rounding. {% endtab %} {% tab title="Header" %} 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. {% endtab %} {% tab title="Flow Dialog" %} Adjusts display when opened as a modal dialog inside a Flow screen. * **Width:** Dialog width. * **Height:** Dialog height. * **Background Color:** Dialog background color. {% endtab %} {% tab title="Flow Panel" %} Adjusts display when opened as a side panel inside a Flow screen. * **Width:** Panel width. * **Background Color:** Panel background color. {% endtab %} {% tab title="Item" %} Controls individual list item appearance. * **Avatar Image Object Fit:** How the avatar image fits within its container. {% endtab %} {% tab title="Item Spacing" %} 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. {% endtab %} {% tab title="Item Vertical Alignment" %} 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. {% endtab %} {% tab title="Item Label" %} 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. {% endtab %} {% tab title="Item Description" %} 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. {% endtab %} {% tab title="Item Background" %} 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. {% endtab %} {% tab title="Item Border" %} Customizes the border on each list item. * **Color:** Item border color. * **Size:** Item border thickness. * **Style:** Item border style. * **Radius:** Item border corner radius. {% endtab %} {% tab title="Item Info" %} 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. {% endtab %} {% tab title="Item Fields" %} 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. {% endtab %} {% tab title="Item Fields Label" %} 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. {% endtab %} {% tab title="Item Fields Value" %} 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. {% endtab %} {% tab title="Pagination Buttons" %} 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. {% endtab %} {% tab title="Footer" %} 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. {% endtab %} {% tab title="Show More Button" %} 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. {% endtab %} {% tab title="Checkbox Button" %} Styles the checkbox used in the Check List 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. {% endtab %} {% endtabs %} ## 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. Most of the examples below follow the same shape: the List screen runs, and the element after it branches or loops on what the user did.

A List screen feeding a Decision that branches on the action the user clicked

### Item Click When a user clicks a list item (requires **Items Clickable** to be enabled or an Item Click interaction to be configured). | Output variable | Type | What it returns | | --------------------- | ---------------- | ------------------------------------------------- | | **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. | Output variable | Type | What it returns | | --------------------------------- | ---------------- | ----------------------------------------------------------------- | | **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. | Output variable | Type | What it returns | | --------------------------------------- | ---------------- | ----------------------------------------------------------------------- | | **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. | Output variable | Type | What it returns | | ------------------------------ | ------------- | ------------------------------------------------------ | | **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. | Output variable | Type | What it returns | | ------------------------ | ----------------- | ----------------------------------------------------------------------------------------------------- | | **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__c` field. ### Item Check When a user checks or unchecks an item (Check List variant only). | Output variable | Type | What it returns | | ----------------------- | ----------------- | -------------------------------------------------- | | **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 | Output variable | Type | What it returns | | ------------------- | ------- | ------------------------------------------------------- | | **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). ## 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** mapping in Data Mappings 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__c` field) 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}}`). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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 following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/flow/flow-components/list.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `build a script that syncs our docs to a CMS` lets GitBook tailor the answer to that use case. 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.