List
Renders each item from an array of data using a custom-built row of components.
Overview
The List component displays a list of items or options. It can be used to organize and present information in a concise and easy-to-navigate manner. The List component may also include formatting options to help the items stand out and convey the desired message or concept. You can also customize the appearance and functionality of the list to improve the overall user experience.
Tutorials
| Name | Description | Illustration |
|---|---|---|
This quick guide teaches you how to build and instantly display a detailed contact list. | ||
This tutorial provides a concise guide to creating an attractive, image-based grid list. | ||
This instructional guide details the steps to create dynamic, sortable lists, improving data organization and usability. | ||
Enhance Sales Reps' workflow with a 'Today's Accounts to Visit' flow. | ||
This tutorial provides an in-depth explanation of how to construct interactive vertical lists with actions. |
Configuring the List
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. | Ideal for complex data retrieval or when sourcing. Using a 'Get Records' collection is not necessary with this method, as the query itself is powerful enough to simplify your flow |
Data Mappings
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
Choosing a Variant
The variant property allows you to define the overall style and layout of your Avonni List. Selecting a specific variant allows 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 particularly useful for displaying concise information or maximizing space when vertical real estate is limited.
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.
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.
Configuring the interaction correctly is essential for clickable items to work effectively. The clickable functionality enhances user interaction with the list of items.
Layout Configuration
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.
How to Customize Layout
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 | Add interactive buttons to your header to enable specific actions from the interaction pane. This provides additional functionality and enhances user engagement with the List. |
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.
3 - Adjust the variant
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 default setting where the label is displayed above the field. It's a classic and widely used layout, providing a clear separation between the label and the field content.
Label Hidden: Opt for this variant when you want a minimalist design. The label is not displayed, offering a cleaner look. This is ideal for forms where the context or placeholder text makes the purpose of the field obvious or when space is limited.
Label Inline: In this variant, the label is positioned in line with the field, typically to the left. This space-efficient layout works well in forms where horizontal space is more plentiful than vertical space. It's also useful when you want to achieve a more compact form design.
Label Stacked: This variant places the label directly over the field. When the field is focused or filled, the label moves up. It's a modern design often used in mobile interfaces and web applications, where it helps to save vertical space and maintain a clean, uncluttered aesthetic.
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. This makes 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
The "Filtering Option" 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.
Filtering Menu
Accessing the Filtering Menu
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:
Position (Left, Right):
This setting determines whether your filter panel slides out from the screen's left or right side when a user interacts with the filter.
Select the position that best suits your screen flow's layout and design.
Is Closed:
This option controls the initial state of the filter panel.
Set "Is Closed" to "True" if you want the filter panel to start hidden. This is useful when you want to emphasize the data table content initially.
Set "Is Closed" to "False" if you want the filter panel to be open by default, prompting users to customize their data view immediately.
Hide Toggle Button:
Dictates whether a toggle button is visible to users for manually opening and closing the filter panel.
Set "Hide Toggle Button" to "True" if you want the panel to open and close based on other events within your flow (e.g., when a filter icon is clicked).
Set "Hide Toggle Button" to "False" to give users an always-visible toggle button to control the panel.
Search Engine
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
Interactions define what will happen when users interact with the Avonni List. Here are the available interactions for the List component:
On Item Click
Define the behavior when a user clicks on a list item. This could trigger navigation to a detailed record page, launch a popup for editing, or execute any other custom logic within your flow.
On Action Click
If you've added action buttons to your list items (e.g., "Edit," "View Details"), this interaction allows you to specify what happens when those buttons are clicked. This could involve initiating record updates, opening new screens, or triggering specific actions in your flow.
On Header Action
If you've included buttons in the list header, you can customize their actions when clicked. These might include filtering the list, sorting items, or executing other relevant functions.
On Media Action Click
If your list items include images or videos with embedded action buttons (e.g., "Play" for a video), this interaction lets you determine the behavior triggered by clicking these media actions.
On Reorder
If you've enabled item reordering in your list (using the "Sortable" property), this interaction allows you to define actions when the user changes the order of items. For example, you could automatically update a field on the backend to reflect the new item order.
Style
The Avonni List Component offers extensive styling options to help you seamlessly integrate it into your Salesforce.
Layout
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
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).
Items
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
Pagination Buttons: Change the look of the pagination controls (if enabled).
Footer
Footer: Style the footer area of the list (if applicable).
Show More Button: Customize the "Show More" button (if used).
Checklist (If Applicable)
Checkbox Button: Modify the appearance of the checkboxes
Practical Examples
| Business Function | Application | Description |
|---|---|---|
Customer Relationship Management (CRM) | Contact Lists | Sortable and searchable lists of client contact information. |
Opportunity Pipeline | Organized list of sales opportunities, categorized by stages and closing likelihood. | |
Task Management | To-Do Lists | Lists of tasks with details like deadlines, statuses, and responsible parties. |
Project Milestones | Timeline of project deliverables, sortable by due date or importance. | |
Inventory Management | Product Catalog | List of products with filtering options for quick searching. |
Stock Level | Real-time inventory levels, sortable by product type, location, or availability. | |
Reporting and Dashboards | KPI Monitoring | List of key performance indicators, sortable by relevance or time frame. |
Sales Leaderboard | Sortable list showcasing top-performing sales reps with sales figures and achievements. | |
Support and Service | Ticket Tracking | Manage and track support tickets, sortable by urgency, agent, or status. |
FAQ | Neat display of frequently asked questions and answers. | |
Event Management | Event Agenda | Sortable list of the day’s events or presentations, aiding in schedule planning. |
Attendee List | Searchable list of event attendees, sortable by company name, industry, etc. |
Last updated