> 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

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

<table><thead><tr><th width="181.37890625">Category</th><th width="130.0234375">Type</th><th>Tutorial</th></tr></thead><tbody><tr><td><strong>📘 Core</strong></td><td>Build</td><td><a href="/pages/LxyKRV7YnSJ1NdvXvjQq">Create a contact master details list</a></td></tr><tr><td><strong>🖼️ Display</strong></td><td>Build</td><td><a href="/pages/gr5wa6EEMQBjlavlcBMt">Create a grid list with images</a></td></tr><tr><td><strong>↕️ Sorting</strong></td><td>Build</td><td><a href="/pages/whPSrFZ0FnBGyr2dueQL">Create a sortable list</a></td></tr><tr><td><strong>▶️ Actions</strong></td><td>Build</td><td><a href="/pages/hnap0ibDfEjgNHIoQlw4">Vertical list with actions</a></td></tr><tr><td><strong>🔄 Data</strong></td><td>Guide</td><td><a href="/pages/4Gn8UkaOttfRTpRIRQQv">How to reorder items and update records</a></td></tr><tr><td><strong>🌍 Example</strong></td><td>Example</td><td><a href="/pages/uqOzV5VbZSuJsWgwDuZh">Today's accounts to visit</a></td></tr><tr><td><strong>🔄 Example</strong></td><td>Example</td><td><a href="https://www.youtube.com/watch?v=u8A8C6oSQy4">Build a reorderable list</a></td></tr></tbody></table>

***

## 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 — 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
> * `Email` → Description field

### 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        |   |
| **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:

<table><thead><tr><th width="237.0029296875">Setting</th><th>What It Does</th></tr></thead><tbody><tr><td><strong>Strike-Through on Check</strong></td><td>Draws a line through completed items — gives users instant visual confirmation</td></tr><tr><td><strong>Show Check Counter</strong></td><td>Displays a live count of checked items — e.g., "3 of 7 completed"</td></tr></tbody></table>

### 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:

<table><thead><tr><th width="125.33333333333331">Divider</th><th width="309">Description</th><th>Illustration</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Allows you to place a divider at the top of each item in the list.</td><td><img src="/files/Lk5zuCh4R4r1XqZcTq1l" alt=""></td></tr><tr><td><strong>Bottom</strong></td><td>Adds a divider line at the bottom of each list item.</td><td><img src="/files/9WUzM6G8djKbaCRkmrH8" alt=""></td></tr><tr><td><strong>Around</strong></td><td>Places divider lines both above and below each item in the list.</td><td><img src="/files/coRGRAK4ynIBomL4Cw7z" alt=""></td></tr><tr><td><strong>Card</strong></td><td>Sets each list item within its own card-like container, separated by dividers.</td><td><img src="/files/YVMWRebzJLpQzvn8bHAK" alt=""></td></tr></tbody></table>

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

<table><thead><tr><th width="191.6171875">Attribute</th><th>Options</th></tr></thead><tbody><tr><td><strong>Variant</strong></td><td>Circle, Square, Empty</td></tr><tr><td><strong>Icon Size</strong></td><td>Small, Large</td></tr><tr><td><strong>Position</strong></td><td>Left, Top-Left, Bottom-Left, Right, Top-Right, Bottom-Right, Left-of-Title</td></tr><tr><td><strong>Presence Position</strong></td><td>Top-Left, Top-Right, Bottom-Left, Bottom-Right (for status indicators)</td></tr></tbody></table>

#### 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. Go to the **Fields** attribute at the bottom of the Properties Panel and add the fields you want to display
2. In **Field Attributes**, define how many columns each field spans within the item

**Field label styles:**

<table><thead><tr><th width="180.42578125">Variant</th><th>What It Looks Like</th></tr></thead><tbody><tr><td><strong>Standard</strong></td><td>Label sits above the value — clean and readable</td></tr><tr><td><strong>Label Hidden</strong></td><td>No label shown — good when the field's purpose is obvious</td></tr><tr><td><strong>Label Inline</strong></td><td>Label sits to the left of the value — efficient use of horizontal space</td></tr><tr><td><strong>Label Stacked</strong></td><td>Label floats above the value when focused — modern, mobile-friendly</td></tr></tbody></table>

### Header

The header appears above the list and provides context and global controls.

<figure><img src="/files/IVeQJdLlV1FdweuP3YqB" alt=""><figcaption><p>Header section on a list</p></figcaption></figure>

<table><thead><tr><th width="119.009765625">Attribute</th><th>Purpose</th></tr></thead><tbody><tr><td><strong>Title</strong></td><td>Identifies what the list contains</td></tr><tr><td><strong>Caption</strong></td><td>Short description or context below the title</td></tr><tr><td><strong>Icon</strong></td><td>Visual indicator of the list's purpose</td></tr><tr><td><strong>Is Joined</strong></td><td>Removes bottom border/shadow so the list blends with a component directly below it</td></tr><tr><td><strong>Buttons</strong></td><td>Global action buttons — wired to the "On Header Action" interaction</td></tr></tbody></table>

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

| Setting              | Options                                |
| -------------------- | -------------------------------------- |
| **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.

<figure><img src="/files/kjgEtKUT77pCZ0lGtzvM" alt=""><figcaption><p>How to add filters</p></figcaption></figure>

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

<figure><img src="/files/uTmsSgDSphiJFbj8rfvS" alt=""><figcaption></figcaption></figure>

| Filter Type    | How It Works                                   | Best For                                                       | Illustration                     |
| -------------- | ---------------------------------------------- | -------------------------------------------------------------- | -------------------------------- |
| **Horizontal** | Filter pills appear directly above the list    | Quick access, desktop-first flows                              | ![](/files/XhENYy99ROWNg4DyLuYN) |
| **Popover**    | Filters hide behind a button — click to reveal | Keeping the interface clean when filters are used occasionally | ![](/files/BeuVMMaMMapCncqAJv5r) |
| **Side Panel** | Filter panel slides in from left or right      | Complex filter sets with many fields                           | ![](/files/PBDMrUt8KuqF1CISCnhe) |

**Side Panel settings**

| Setting                       | Options        | When to Use                                                                    |
| ----------------------------- | -------------- | ------------------------------------------------------------------------------ |
| **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 |

<figure><img src="/files/qbrrfeI5zaEmOww21lyz" alt=""><figcaption></figcaption></figure>

### Sorting & Reordering

#### Sort (by Field)

Enable **Sortable** to add a sort indicator to list items, allowing users to reorder items by a chosen field.

<figure><img src="/files/05QEaKKhyrQWKo6DfxDQ" alt=""><figcaption><p>How to activate the Sortable option</p></figcaption></figure>

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

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

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

### Item Click

When a user clicks a list item (requires **Item 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 (Checklist 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 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__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 current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/list.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.