> 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/dynamic-components/components/list.md). # List The Avonni List component displays a collection of records as a customizable list — vertical, single-line, or interactive checklist — with support for avatars, images, fields, actions, pagination, filtering, search, and drag-and-drop sorting. ## Overview To start with the Avonni List component, you'll first need to connect it to your data and configure how it is displayed. The sections below follow the configuration panel from top to bottom, so you can read along as you build. ## Configuration To configure the List, select it on the canvas. The **Edit List** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab. ### Data Source Before you build your list, you must tell the Avonni List component where to get the data it should display. You have several options, depending on the source and nature of your data:
ManualEnter data directly into the component configuration.
VariableThis is useful for data that changes based on user interactions or other component logic.
QueryThis is the most common option for displaying Salesforce records.
PicklistRetrieve data dynamically from a standard or custom picklist field within Salesforce./pages/NMTcHeq9UuKYUmBedI8t
### Data Mapping When using a dynamic data source for your List, you'll need to configure the **Data Mappings** section to tell the component how to create lists from your data. Think of it like a translator: Data Mappings ensure the correct information from your Salesforce data. **Why are Data Mappings Important?** Without data mapping, the list wouldn't know which part of your data to use. This could result in the list showing incorrect or irrelevant information. **How Do Data Mappings Work?** In the Data Mappings section, you'll establish the connection between your Salesforce data fields and the corresponding List attributes. By selecting which field maps to which attribute (for example, the "Account Name" field to the "Label" attribute), you ensure each chip accurately displays the correct information from your Salesforce data.
### Content #### Variant The **`variant`** property allows you to define the overall style and layout of your Avonni List. Selecting a specific variant will enable you to adapt the list's appearance to suit your content and design preferences.
**Base (Default)** This is the standard list view. Items are displayed in a vertical list format, ideal for detailed information and various content types. **Single-Line** This variant presents list items horizontally in a single row, allowing you to navigate between items using left and right arrows. It's handy for displaying concise information or maximizing space when vertical real estate is limited.
**Checklist** This specialized variant transforms the list into a checklist format. Each item includes a checkbox for selection, making it ideal for interactive task lists or preference selections.
**Choosing the Right Variant** * **Base:** This is when you need to present detailed information for each list item, including multiple fields or rich media. * **Single-Line:** For concise data points or when you want a compact list layout. * **Checklist**: When you need user input in the form of selections or checkmarks #### Divider The Divider attribute is designed to enhance the visual structure of your list by introducing dividers between items.
This attribute allows you to customize how each item in the list is separated from the others. | Divider | Description | Illustration | | ---------- | ------------------------------------------------------------------------------ | -------------------------------- | | **Top** | Allows you to place a divider at the top of each item in the list. | ![](/files/ttD3wenIgM6EkTZaEwhO) | | **Bottom** | Adds a divider line at the bottom of each list item. | ![](/files/6qm9EtLTrPHf0dFkJezf) | | **Around** | Places divider lines both above and below each item in the list. | ![](/files/sYx9QjySOCeqRhMPDQZS) | | **Card** | Sets each list item within its own card-like container, separated by dividers. | ![](/files/MIyeOtDIMyWqPY1SyTJz) | #### Item Clickable If enabled, all items in the list become clickable.
{% hint style="danger" %} **Important** **Configuring the interaction** correctly is **essential** for clickable items to work effectively. The clickable functionality enhances user interaction with the list of items. {% endhint %} ### Check List When you opt for the "**Checklist**" variant in the Avonni List Component, a new set of customization options becomes available, allowing you to tailor the appearance and behavior of your interactive checklist.
**Key Checklist Settings** * **Strike-Through on Check**: Activate this toggle to apply a strikethrough style to items that have been checked off. This visual cue provides immediate feedback to the user and helps them track their progress. * **Show Check Counter**: Enable this option to display a real-time counter indicating the number of checked items. This is useful when users need to assess how many items have been selected or completed quickly. ### Header The Header section gives you control over the appearance and functionality of your List header. Header section on a list
AttributeDescription

Title

Define a meaningful title for your List. It introduces the list's content and is a key element of the visual hierarchy.

Caption

Use the caption field to add a brief description or supplementary information for your List. This can be especially useful for providing context or additional details about the list's content.

Avatar

Display an avatar in the header to enhance its visual appeal or convey the List's purpose at a glance. Set an Image, a Fallback Icon Name, or Initials, and adjust the avatar size and variant under Advanced Options.

Help Text

Add help text content to the header to give users extra guidance about the list.

Is Joined

This property gives the header a square, shadowless bottom border when activated. This makes the header blend seamlessly with another component, making the List appear as a continuous, unified element.

Show Number of Items

Display a counter of the number of items in the list next to the header title.
**Actions** Add interactive buttons to your header with the **Add Actions** option, and trigger specific behavior from the [interaction pane](https://docs.avonnicomponents.com/flow/component-builder/interactions-pane). This provides additional functionality and enhances user engagement with the List. ### Layout The Layout feature empowers you to design lists that adapt seamlessly to different screen sizes. You can effortlessly control how many columns your list items are arranged in, ensuring optimal display on devices ranging from large desktop monitors to compact smartphone screens.
**Layout customization** * **Column Count:** Choose the number of columns you want your list items to occupy. You have the flexibility to select from one to twelve columns. * **Responsive Design:** Fine-tune the layout for different screen sizes. For instance, you might prefer a single column for mobile phones to maximize readability while using multiple columns on larger screens to showcase more content simultaneously. ### Avatar The Avatar Attributes section enables you to customize the appearance and placement of avatars within each item in your Avonni List.
| Attribute | Description | Options | | --------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | **Variant** | Modify the shape of the avatar for each item in the list | Circle, Square, Empty | | **Icon Size** | Adjust the size of the avatar icon to match your design needs | Small for minimalism, Large for emphasis | | **Position** | Define the placement of the avatar within each list item | Left, Top-Left, Bottom-Left, Right, Top-Right, Bottom-Right, Left-of-the-Title | | **Presence Position** | Customize the location of the presence icon, indicating user status, in relation to the avatar. | Top-Left, Top-Right, Bottom-Left, Bottom-Right | ### Image An image can be added to any item. The image attributes lets you customize the image attributes for your items. You can set the **`position`**, **`size`**, **`height`** and **`Crop`** options. {% hint style="info" %} The **Picklist Values Data Source** doesn't support images. {% endhint %} ### Fields Layout The Field Attributes section allows you to define the number of columns each field will occupy within the container, giving you granular control over the layout and appearance of your list content. ![](https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F3OXfITHEkCMIBidyYm03%252FSept%25203%2520Screenshotqq.png%3Falt%3Dmedia%26token%3D4656aa91-b336-4c55-9e2a-9a73b74ec4f8\&width=768\&dpr=4\&quality=100\&sign=c184ccb9\&sv=2) **How to Use It** **1 - Define Fields**: Add the fields you want to display on your Avonni List Component - navigate to the 'Fields' attribute. You can find this at the bottom of the Properties Panel.
**2 - Specify Column Span**: Use the Fields Attributes section to specify the number of columns the fields added should span. **Variants for Fields** The "variant" property in the Avonni list component modifies the appearance of field information. The following are the available values for the "variant" property, each with a unique style. * **Standard:** This is the usual way, where the label sits above the field. It's straightforward to read. * **Label Hidden:** Use this if you want a super clean look. The label is hidden, which is great when you're short on space, or the field's purpose is already apparent. * **Label Inline:** The label sits next to the field, usually on the left. This is helpful when you have more room side-to-side than up-and-down. * **Label Stacked:** The label starts atop the field and moves up when you click on it or start typing**.** This is a modern style that saves space, especially on mobile devices. ### Actions The Avonni List Component can embed actions within your list, transforming it from a display component into an engaging, interactive interface. **Where to Add Actions** **Item Level** Enhance each list item with clickable elements such as buttons or links. These actions could trigger navigation to a detailed record page, launch a popup for editing, or execute any other custom flow logic. **Media Level** If your list includes images or videos, you can embed actions directly within these media elements. For instance, clicking on a product image could open a product detail page, or tapping a video thumbnail could initiate playback. ### Pagination The "Pagination Options" area lets you split long lists into smaller parts in the Avonni List Component. You can choose how many items are shown on each page and how the controls look, making it easier to handle extensive lists.
**Key Features** | Feature | Description | Options | | ------------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | | **Show Pagination** | Control the visibility of pagination controls at the bottom of the list. | Enable or Disable | | **Number of Items per Page** | Specify how many items to display per page. | Range from 1 to 500, default 100 | | **Alignment** | Choose the alignment for the pagination controls. | Left (default), Center, Right | | **Customize Button Icons and Labels** | Personalize icons and labels for pagination buttons (First, Last, Next, Previous). | Adapt to different languages or align with application branding and style. | {% 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 %} ### Filter **Add fields as filters** To add fields as filters to your list, locate the "Filter Attributes" section in the properties panel. This section allows you to select the fields you want to use for filtering.

How to add filters

**Filtering Option** The "**`Filter`**" section allows you to add a filter menu that appears as a popover. When this feature is enabled, all the fields designated as filters will be displayed in this popover, keeping the list uncluttered and focused. * Open the Component Builder * Scroll down to the Filter section * Select how you'd like to display filters. **Filter Type** The Avonni List offers three filtering options to streamline your data navigation experience. Each option is designed to accommodate different user preferences and screen sizes. | Name | Description | Illustration | | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | |

Horizontal

| These filters appear directly above the data table, laid out in a horizontal row. This layout is ideal for quickly accessing and applying filters without obstructing the view of the data table. | ![](/files/MVUHJrfI2fMPe81bvqiH) | |

Popover

| This option allows filters to be hidden behind clickable icons or buttons; when clicked, a small, floating interface (a popover) appears, containing the filter options. | ![](/files/PAvqi3hMKpCx6tpjLr7g) | |

Side Panel

|

Filters in a side panel are located to the left or right of your data table, accessible through a panel that can be expanded or collapsed.


| ![](/files/eVO12rIq4ZNJ2Me95tWO) | **Side Panel Filter menu options** When configuring your Avonni List component to use a "Panel" filter, you can present filtering options in a convenient side panel. This panel offers additional customization settings, described below:
**Where the Filter Panel Appears** * **Position (Left or Right):** The filter panel slides out from the side of the screen. Choose the position that best suits your design. **How the Filter Panel Starts** * **Is Closed:** Decide if you want the filter panel hidden or visible when the screen first loads. * **True:** The panel starts hidden. This is good if you want to focus on the data table first. * **False:** The panel starts open, encouraging users to filter right away. **Show or Hide the Toggle Button** * **Hide Toggle Button:** Control whether users see a button to open and close the filter panel. * **True:** The button is hidden. Use this if you want the panel to open and close automatically based on other things happening in your flow (like clicking a filter icon). * **False:** The button is always visible so users can control the panel. ### Search The "Searchable" toggle lets you specify whether the items in the list can be searched. When activated, a search bar is made available. Additionally, you can set placeholder text for the search bar and determine its position with available values: left, right, center, and fill. **Activating Search**: To make the list searchable, toggle on the "Searchable" option in the configuration settings of your Avonni List Component. **Setting Placeholder Text**: Customize the search bar by adding placeholder text to guide users. **Positioning the Search Bar**: Use the position attribute to set the location of the search bar. Options include: * **`left`**: Aligns the search bar to the left. * **`right`**: Aligns the search bar to the right. * **`center`**: Centers the search bar. * **`fill`**: Expands the search bar to fill the available space. **Best Practices** * Use descriptive placeholder text to guide users on what they can search for. * Choose a search bar position that harmonizes with the overall layout of your list component. ### No Results Message The No Results Message section controls what the list displays when its data source returns no records, so users see helpful feedback instead of an empty area. | Attribute | Description | | --------------------------- | ---------------------------------------------------- | | **No Results Message** | The message to display when no records are returned. | | **Hide No Results Image** | If enabled, the no results illustration is hidden. | | **Hide No Results Message** | If enabled, the no results message is hidden. | ### Sort To empower users to sort items within your list, activate the "**`Sort`**" option. When enabled, a clear visual indicator (typically an icon) will appear on each item, signaling that the list can be reordered.

How to activate the Sortable option

Sortable icon in Left Position example
### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.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. Use this to navigate to a record page, open an edit form, or trigger any flow logic tied to the clicked item. ### Item Action Click Fires when a user clicks one of an item's actions. Use the **targetName** output to identify which action was clicked and branch your flow logic accordingly. ### Item Media Action Click Fires when a user clicks an action embedded on an item's image or media area. Use the **targetName** output to identify which media action was clicked. ### Header Action Click Fires when a user clicks one of the header action buttons. Use the **targetName** output to identify which header action was clicked and branch your flow logic accordingly. ### Reorder Fires when a user reorders the list by drag and drop. Requires **Sort** to be enabled. Use this to persist the new item order, for example by updating an order field on each record. ### Item Check Fires when a user checks or unchecks an item. Available only with the **Check List** variant. Use this to react to the current selection of checked items. ## Styling The Avonni List Component offers extensive styling options to help you seamlessly integrate it into your Salesforce. Configure them from the **Style** tab of the Edit List panel. {% tabs %} {% tab title="Margin" %} Controls the outer spacing around the entire list. * **Top / Right / Bottom / Left:** Adjust the space on each side of the list. {% endtab %} {% tab title="Padding" %} Controls the inner spacing between the list's content and its container. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} Controls the list's dimensions. * **Width / Height:** Set fixed dimensions for the list. * **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds. * **Overflow / Overflow X / Overflow Y:** Control how content that exceeds the bounds is handled. {% endtab %} {% tab title="Border" %} Customizes the border surrounding the list container. * **Color:** Set the border color. * **Size:** Adjust the border thickness. * **Style:** Choose a border style (e.g. solid, dashed, dotted). * **Radius:** Control the roundness of the corners. {% endtab %} {% tab title="Header" %} Styles the header background and spacing. * **Background Color:** Set the header background color. * **Padding Top / Right / Bottom / Left:** Adjust the inner spacing of the header. * **Margin Bottom:** Set the space below the header. {% endtab %} {% tab title="Header Border" %} Customizes the border around the header area. * **Color / Size / Style / Radius:** Control the header border appearance. * **Bottom Border Color / Size / Style (Is Joined):** Style the bottom border when the header is joined to the list. {% endtab %} {% tab title="Header Title" %} Styles the header title text. * **Color:** Set the title color. * **Font Size / Font Style / Font Weight:** Control the title typography. {% endtab %} {% tab title="Header Caption" %} Styles the header caption text. * **Color:** Set the caption color. * **Font Size / Font Style / Font Weight:** Control the caption typography. {% endtab %} {% tab title="Header Avatar" %} Styles the avatar shown in the header. * **Background Color / Foreground Color:** Set the avatar colors. * **Border Radius:** Control the roundness of the avatar corners. {% endtab %} {% tab title="Item" %} Controls the overall appearance of each list item. * **Avatar Image Object Fit:** Control how an item's avatar image fills its frame. {% endtab %} {% tab title="Item Spacing" %} Adjusts the spacing around and between list items. * **Top / Bottom / Left / Right:** Set the spacing around each item. * **Block Between / Inline Between:** Set the spacing between adjacent items. {% endtab %} {% tab title="Item Vertical Alignment" %} Aligns the content within each item. * **Body / Actions / Avatar:** Vertically align each item region. {% endtab %} {% tab title="Item Label" %} Styles the label (header) text within each item. * **Text Color / Link Color / Link Color Hover:** Set the label and link colors. * **Font Size / Font Style / Font Weight:** Control the label typography. {% endtab %} {% tab title="Item Description" %} Styles the item description text. * **Color:** Set the description color. * **Font Size / Font Style / Font Weight:** Control the description typography. * **Line Clamp:** Limit the description to a maximum number of lines. {% endtab %} {% tab title="Item Background" %} Sets the background color of each item. * **Color / Color Hover / Color Highlight:** Set the default, hover, and highlight backgrounds. * **Color Sortable / Color Sortable Hover:** Set the backgrounds shown when items are sortable. {% endtab %} {% tab title="Item Border" %} Modifies the border around individual items. * **Color:** Set the item border color. * **Size / Style / Radius:** Control the border thickness, style, and corner roundness. {% endtab %} {% tab title="Item Info" %} Styles the additional info text within items. * **Text Color / Link Color / Link Color Hover:** Set the info and link colors. * **Font Size / Font Style / Font Weight:** Control the info typography. {% endtab %} {% tab title="Item Fields" %} Adjusts the appearance of the fields displayed within an item. * **Background Color / Border Color / Border Size / Border Style / Border Radius:** Control the fields container appearance. * **Spacing Inline / Spacing Block:** Set the spacing around the fields. {% endtab %} {% tab title="Item Fields Label" %} Styles the field labels within an item. * **Color:** Set the label color. * **Font Size / Font Style / Font Weight:** Control the label typography. {% endtab %} {% tab title="Item Fields Value" %} Styles the field values within an item. * **Color:** Set the value color. * **Font Size / Font Style / Font Weight:** Control the value typography. {% endtab %} {% tab title="Pagination Buttons" %} Changes the look of the pagination controls (when enabled). * **Background Color / Text/Icon Color / Color Border:** Set the colors for the default, active, hover, and disabled states. * **Border Size / Border Style:** Control the button border. * **Active Button Background / Text/Icon / Border Colors:** Style the currently active page button across its states. {% endtab %} {% tab title="Footer" %} Styles the footer area of the list. * **Background Color / Border Color:** Set the footer colors. * **Border Size / Border Style / Border Radius:** Control the footer border. {% endtab %} {% tab title="Show More Button" %} Customizes the "Show More" button (when load-more is used). * **Background Color / Text Color / Border Color:** Set the colors for the default, active, and hover states. * **Border Size / Border Radius:** Control the button border. * **Block Start / Block End / Inline Start / Inline End:** Set the spacing around the button. {% endtab %} {% tab title="Checkbox Button" %} Modifies the appearance of the checkboxes (shown when the **Check List** variant is used). * **Size:** Set the checkbox dimensions. * **Background Color / Background Color Active / Icon Color:** Set the checkbox colors. * **Border Color / Border Size / Border Radius:** Control the checkbox border. {% endtab %} {% endtabs %} ## Output Variables The List exposes output variables you can reference elsewhere on the page after the user interacts with it. "sObject" variables require a **Query** or **Variable** data source. ### Item Click When a user clicks a list item. | Output variable | Type | What it returns | | ------------------------ | ---------------- | --------------------------------------------------------------- | | **Clicked Item** | Object | The clicked item's data (same fields as the data source items). | | **Clicked Item sObject** | Record (SObject) | The Salesforce record behind the clicked item. | > **Example:** Click a Contact in the list and show that record in a detail component beside it using **Clicked Item sObject**. ### Item Action When a user clicks an inline action on an item. | Output variable | Type | What it returns | | -------------------------------------- | ---------------- | ---------------------------------------- | | **Clicked Item Action - Item** | Object | The item the action was triggered on. | | **Clicked Item Action - Item sObject** | Record (SObject) | The Salesforce record behind that item. | | **Clicked Item Action - Action Name** | Text (String) | The name of the action that was clicked. | ### Media Action When a user clicks a media action on an item. | Output variable | Type | What it returns | | --------------------------------------- | ---------------- | ---------------------------------------------- | | **Clicked Media Action - Item** | Object | The item the media action was triggered on. | | **Clicked Media Action - Item sObject** | Record (SObject) | The Salesforce record behind that item. | | **Clicked Media Action - Action Name** | Text (String) | The name of the media action that was clicked. | ### Header Actions | Output variable | Type | What it returns | | ------------------------------ | ------------- | ------------------------------------------------------ | | **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked. | ### Selection The items the user has checked (Checklist variant). | Output variable | Type | What it returns | | -------------------------- | ------------------------------ | ---------------------------------------------- | | **Selected Item Names** | Text Collection (String\[]) | The names of the selected items. | | **Selected Items** | Object Collection | The selected items' data. | | **Selected Items sObject** | Record Collection (SObject\[]) | The Salesforce records for the selected items. | ### Sorting The list order after the user reorders items (drag-to-reorder). | Output variable | Type | What it returns | | ------------------------ | ------------------------------ | ------------------------------------------ | | **Sorted Items** | Object Collection | The items in their new order. | | **Sorted Items sObject** | Record Collection (SObject\[]) | The Salesforce records in their new order. | > **Example:** Let a user reorder a checklist, then save the new sequence back to Salesforce with **Sorted Items sObject** and an update action. ### Others | Output variable | Type | What it returns | | ------------------- | ------- | ------------------------------------------------------- | | **Number of Items** | Integer | The total number of items currently loaded in the list. | --- # 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/dynamic-components/components/list.md?ask=&goal= ``` `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.