LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Guide
    • Learn the Basics
    • Installation & Licenses management
    • Flow vs. Dynamic Components
    • Integrating with Experience Cloud
  • Tutorials
    • Videos
    • Projects Tutorials
    • Components Tutorials
      • Alert
        • Create a custom branding alert
        • Create an error alert dismissible
      • Avatar
        • Create an avatar with actions
        • Create an avatar with details
      • Avatar Group
        • Display a list of contacts related to an account
        • Display a list of sharing users related to the record
      • Barcode
        • Generating and Displaying Barcodes for Product Codes
      • Biometrics
        • 101 Tutorial
      • Button
        • Customizing Flow Navigation Buttons
        • How to Add a "Cancel and Close" Button
        • How to Open Flows from Buttons
      • Button Groups
        • Identifying Clicked Buttons
      • Button Menu
        • How to change dynamically Avonni Button Menu Icons
      • Calendar
        • Calendar 101 Tutorial
        • How to Connect Multiple Data Sources to the Avonni Calendar
        • How to Customize Time Spans
        • How to Customize the Right-Click Menu
        • How to Add an Edit Action to Events
        • How to Add a New Event Button to the Avonni Calendar Header
        • How to Create Events by Dragging in the Avonni Calendar
        • How to Reschedule Events with Drag and Drop
        • How to Color-Code Calendar Entries in the Avonni Calendar
        • Using a variable Data Source
        • Using a Query Data Source
      • Carousel
        • Build a Related Products Carousel
      • Combobox
        • Implement Dependent Picklists in Comboboxes
        • How to Dynamically Enable/Disable Dependent Picklists
        • Using Multi-Select Comboboxes with Reactive Formulas
      • CSV Parser
        • 101 Tutorial
      • Data Table
        • Adding Filters
        • How to add Images onthe Data Table
        • Creating Row Actions
        • Displaying a Record as a QR Code
        • Displaying Record Name field as a link
        • Learn the Basics
        • Making a field editable
        • Setting Up Data Export
        • Tips and Tricks
          • Activate infinite scrolling
          • Creating an action from a button or a link
          • Customizing the Badge Color using a formula
          • How to Grayscale Header Actions Dynamically in Avonni Data Table
          • How to Conditionally Color Cells
          • Enabling auto-refresh on the Data Table when pressing a button
          • Handling formula text field
          • How to set column visibity
          • Passing multiple record IDs to another flow
          • Data Table Editor
      • Date Picker
        • Display a date picker with Marked Dates from a Get Records
      • Date Time Picker
        • How to create Collection Variables for StartDateTime and EndDateTime
        • How to Block Out Times
      • Delay Interaction
        • Creating a Confetti Celebration on the Final Screen
        • Launch a flow dialog without a screen
      • Dual Listbox
        • Display contacts with custom icons
        • Accounts list group by industry
      • Expandable Section
        • How to add components into an expandable section
      • Header
        • Building Engaging Card Headers
        • Crafting a Profile Header
        • Adding Action Buttons to Headers
        • Adding a Background Image to Your Header
      • Input Pen
        • Add the custom Toolbar
        • How to Store Input Pen Drawings as Attachments in Salesforce
      • Kanban
        • 📹Introduction
      • List
        • Create a grid list with images
        • Create a sortable list
        • How to Reorder Items and Update Records
        • Vertical List with Actions
      • Navigation
      • Map
        • Customize the Map Marker
        • Visualizing Account Information on a Map
      • Metric
        • 📹Introduction
      • Microphone
        • Save the Microphone recording file as an attached on a record
      • Progress Indicator
        • Creating a Universal Dynamic Progress Step Collection
        • How to Change the Appearance of Your Progress Indicator using a variable
        • Error Handling
      • QR Code
        • Generate a QR Code from a record field
      • Record Detail
        • Using the Record Detail with Reactive Screens
      • Scoped Notification
        • Display message based on a value
      • Text Area
        • TextArea issue with max length when clicking on the next button
      • Tree
        • Build a Tree View with Dynamic Record Details
      • Timeline
        • Assigning multiple source collection to the Timeline
        • Customizing Date Format in the Timeline Component using Luxon
        • Create a horizontal activity timeline
        • Display Tasks
        • Perform actions on selected tasks
      • Vertical Visual Picker
        • Adding sub-items
        • Display a list of online contacts
    • Interactions
      • Enabling auto-refresh for queries after the Flow Dialog ends
      • Creating a Confetti Celebration on the final screen
      • How to create an interaction to navigate to an object
      • How to create an interaction to a record page
      • How to create an interaction to open another flow
      • How to pass an Input Variable from One Flow to Another
      • How to setup an Open Flow Panel interaction
    • Reactive Query Tutorials
      • How to make Data Tables Reactive
      • Build a reactive Data Table Using Dependent Picklists
      • Building a Dynamic Metrics Dashboard with the Data Table
      • How to build a reactive 'Quarterly Opportunity Tracker' component
      • How to Create a Combobox-Filtered Data Table
      • Create a Dynamically Linked Account-Contact View
      • Troubleshooting
    • Tips and Tricks
      • Copy / Paste a component settings
      • Create a link to the record using the href attribute
      • Create a variable and use it in a component property
      • Data Table
      • Hide Standard Header and Footer in a flow
      • How to pass your current RecordID in your screen flow
    • Platform Events
      • Configuration tutorial
  • Flow Components
    • Explore All Components
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Barcode
    • Barcode Scanner
    • Biometrics
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Calendar
    • Carousel
    • Chart
    • Chip Container
    • Combobox
    • Color Picker
    • CSV Parser
    • Date Picker
    • Data Table
    • Date Time Picker
    • Delay Interaction
    • Document Scanner
    • Dual Listbox
    • Expandable Section
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Hero Banner
    • Icon Picker
    • Image
    • Input Choice Set
    • Input Choice Set Grid
    • Input Counter
    • Input Date Range
    • Input Pen
    • Illustration
    • Interaction service
    • Kanban
    • List
    • Map
    • Metric
    • Microphone
    • Navigation
    • NFC Scanner
    • Pill Container
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Progress Popover
    • QR Code
    • Rating
    • Record Detail
    • Scoped Notification
    • Separator
    • Slider
    • Tabs
    • Text Area
    • Timeline
    • Tree
    • User Location
    • Vertical Visual Picker
    • Visual Picker
    • Visual Picker Link
    • Video Player
    • Welcome Mat
  • Component Builder
    • Overview
    • Properties Pane
    • Interactions Pane
      • Copy Records
      • Download
      • Export To
      • Fire Confetti
      • Flow Navigation
      • Navigate
      • Show Toast
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
      • Open Flow Panel
      • Update Records
      • Refresh Query
      • Refresh All Queries
      • Open Quick Action
    • Style Pane
    • Component Templates
    • Layout and Customization
      • Alignment controls
      • Copy / Paste component settings
      • Margin / Padding
      • Pull To Boundary
      • Undo / Redo
  • Data Sources
    • Understanding Data Sources
    • Manual
    • Variable
    • Query
    • Query VS Variable
    • Picklist
  • Actions
    • Overview
    • Data Manipulation and Transformation
      • Convert Lead
      • Create file
      • Split Text to Text Collection
      • SObject Collection Math
      • SObject Collection Join
      • Get Record from SObject Collection
      • SObject Collection to Activity Timeline Items
      • SObject Collection to Calendar Marked Date Collection
      • SObject Collection to Scheduler Events
      • SObject Collection to Text Collection
    • Data Conversion and Formatting
      • Text Collection Get Value
      • Get Value from String Collection
      • Number Collection Get Value
      • Join Text Collection
      • Format Text in SObject Collection
      • Format Text Collection
      • Text Collection to Combobox Options
      • Text Collection to Dual Listbox Options
      • Text Collection to Progress Indicator Steps
    • UI & Navigation
      • New Avatar Action Collection
      • New Button Menu Item Collection
      • New Carousel Item Collection
      • New Combobox Option Collection
      • New Dual Listbox Option Collection
      • New Header Action Collection
      • New Header Avatar Action Collection
      • New List Action Collection
      • New Navigation Item Collection
      • New Progress Indicator Step Collection
      • New Progress Popover Step Collection
      • New Slider Custom Label Collection
  • Help
    • Performance Guide
    • How do I contact support?
    • How do I report Bugs?
    • Troubleshooting
    • Release Process
  • Miscellaneous
    • Live use cases examples
    • Release Notes
    • Salesforce Flow Limit
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Tutorials
  • List Building and Display
  • Data Manipulation
  • Real-World Examples
  • Displaying and Managing Data
  • Choose your Data Source
  • Map your Data to the List
  • List Variant
  • Available Variant
  • Choosing the Right Variant
  • Divider Configuration
  • Item Clickable
  • Layout Configuration
  • Column Count
  • Layout customization
  • Actions
  • Item Level
  • Media Level
  • Properties
  • Header
  • Check List
  • Avatar Attributes
  • Image Attributes
  • Field Attributes
  • Variant for Fields
  • Pagination
  • Sort
  • Adding Filters
  • Add fields as filters
  • Filtering Option
  • Filter Type
  • Side Panel Filter menu options
  • Search
  • Interactions
  • On Item Click
  • On Action Click
  • On Header Action
  • On Media Action Click
  • On Reorder
  • Style

Was this helpful?

  1. Flow Components

List

The Avonni List displays items in a customizable, easy-to-navigate list format.

Last updated 1 month ago

Was this helpful?


Tutorials

List Building and Display

Data Manipulation

Real-World Examples


Displaying and Managing Data

Choose your Data Source

Before using the List, you must decide where the data will come from. The Data Source setting determines how the list is created and what it displays.

Data Source Type
Use Case
When to Use

For a predefined set of items that don’t require dynamic updates.

Ideal for static content or rapid setup with specific items.

Dynamically displaying items based on variable collections in Salesforce.

Suitable when list content reflects changing data from Salesforce records.

Displaying a list of options defined in a Salesforce picklist.

Best for presenting a list of predefined options for selection.

Fetching data based on a specific query, pulling various records or data points.

This is perfect for fetching complex data or when working directly with data sources. You don't need to use a 'Get Records' element because the query itself is powerful enough to streamline your flow.

Map your Data to the List

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

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

Available Variant

Base (Default)

This is the standard list view. Items are displayed in a vertical list format, which is 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 Configuration

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.

Bottom

Adds a divider line at the bottom of each list item.

Around

Places divider lines both above and below each item in the list.

Card

Sets each list item within its own card-like container, separated by dividers.

Item Clickable

If enabled, all items in the list become clickable.

Layout Configuration

Column Count

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.

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.

Properties

Header

The Header section gives you control over the appearance and functionality of your List header.

Attribute
Description

Title

Define a meaningful title for your List. It introduces the timeline'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 table data.

Icon

Add an icon to your header to enhance its visual appeal or to help convey the Liste's purpose or content at a glance.

Is Joined

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

Buttons


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.


Avatar Attributes

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 Attributes

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.

The Picklist Values Data Source doesn't support images.

Field Attributes

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.

How to Use It

2 - Specify Column Span: Use the Fields Attributes section to specify the number of columns the fields added should span.

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


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 200, based on data density and user experience needs.

Pagination Alignment

Choose the alignment for the pagination controls.

Left, 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.

Sort

To empower users to sort items within your list, activate the "Sortable" option. When enabled, a clear visual indicator (typically an icon) will appear on each item, signaling that the list can be reordered.

Adding Filters

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.

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
Illustration
Description

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.

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.

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.

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 records within a particular column 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 a column 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.


Interactions

Here are the available interactions for the List component:

On Item Click

Decide what happens when a user clicks on an item in the list. This could be:

  • Going to a page with more details about that item.

  • Opening a pop-up to edit the item's information.

  • Doing something else you've designed in your flow.

On Action Click

If you've added buttons to your list items (like "Edit" or "View Details"), you can choose what happens when those buttons are clicked. This could include:

  • Updating the information for that item.

  • Opening a new screen.

  • Triggering specific actions in your flow.

On Header Action

If you have buttons in the list's header, you can customize what happens when those are clicked. This might be:

  • Filtering the list to show only certain items.

  • Sorting the items differently.

  • Other actions that make sense for your list.

On Media Action Click

If your list items have pictures or videos with buttons (like a "Play" button), you can decide what happens when someone clicks those buttons.

On Reorder

If you allow users to rearrange items in your list, you can trigger actions whenever they do. For instance, you could automatically update a field in the background to keep track of the new item order.

Ensure you've set an "Order By" field in the list settings to make this work. This will enable the "Update records order" option in the interaction settings.

Related articles


Style

The Avonni List Component offers extensive styling options to help you seamlessly integrate it into your Salesforce.

  • Margin: Control the spacing around the entire list.

  • Padding: Adjust the space between list items and their container.

  • Size: Choose a pre-defined size (Small, Medium, Large) or customize the dimensions.

  • Border: Add or modify borders around the list container.

  • Header: Style the header background, text color, and font.

  • Header Border: Customize the border around the header area.

  • Header Title: Adjust the appearance of the header title.

  • Header Caption: Modify the style of the header caption (if applicable).

  • Header Avatar: Customize the avatar's appearance in the header (if used).

  • Item: Control the overall appearance of each list item.

  • Item Spacing: Adjust the vertical spacing between items.

  • Item Vertical Alignment: Align item content (top, center, bottom).

  • Item Label: Style the text label within each item.

  • Item Description: Customize the description text (if used).

  • Item Background: Change the background color of each item.

  • Item Border: Modify the borders around individual items.

  • Item Info: Style additional information displayed in items (if applicable).

  • Item Fields: Adjust the appearance of multiple fields within an item.

  • Item Fields Label: Customize the labels for fields in an item.

  • Item Fields Value: Style the values of fields in an item.

Pagination Buttons: Change the look of the pagination controls (if enabled).

  • Footer: Style the footer area of the list (if applicable).

  • Show More Button: Customize the "Show More" button (if used).

  • Checkbox Button: Modify the appearance of the checkboxes


correctly is essential for clickable items to work effectively. The clickable functionality enhances user interaction with the list of items.

Add interactive buttons to your header to enable specific actions from the . This provides additional functionality and enhances user engagement with the List.

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.

define what will happen when users interact with the Avonni List.

Configuring the interaction
Interactions
Manual
Variable
Picklist
Query
interaction pane
How to create a record detail page navigation
How to create an object page navigation
Cover

Create a contact master details list

Cover

Create a grid list with images

Cover

Create a sortable list

Cover

Vertical List with Actions

Cover

How to Reorder Items and Update Records

Item action located in yellow
Media action located in yellow
Header section on a list
How to activate the Sortable option
Sortable icon in Left Position example
How to add filters
Cover

Build a reorderable list

Cover

Today's Accounts to visit example