Last updated
Was this helpful?
To start with the Avonni List component, you'll first need to connect it to your data and configure how it is displayed.
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:
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.
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.
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.
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.
This is the standard list view. Items are displayed in a vertical list format, ideal for detailed information and various content types.
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.
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.
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
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.
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.
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.
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.
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.
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
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.
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.
The Header section gives you control over the appearance and functionality of your List header.
Header section on a list
Define a meaningful title for your List. It introduces the timeline's content and is a key element of the visual hierarchy.
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.
Add an icon to your header to enhance its visual appeal or to help convey the Liste's purpose or content at a glance.
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.
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.
The Avatar Attributes section enables you to customize the appearance and placement of avatars within each item in your Avonni List.
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
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 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
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.
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.
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.
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.
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.
Sortable icon in Left Position example
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.
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.
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.
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.
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.
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.
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 define what will happen when users interact with the Avonni List.
Here are the available interactions for the List component:
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.
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.
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.
If your list items have pictures or videos with buttons (like a "Play" button), you can decide what happens when someone clicks those buttons.
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.
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.
.avif?alt=media&token=71d7a89e-adbc-4842-a620-c515f92ecce6)
.avif?alt=media&token=05823294-44f6-40fe-bb64-aa54b0a8015b)
.avif?alt=media&token=0bf5c339-45d3-49d9-b197-5d2a1c6b5cda)
Manual
Enter data directly into the component configuration.
Variable
This is useful for data that changes based on user interactions or other component logic.
Query
This is the most common option for displaying Salesforce records.
Picklist
Retrieve data dynamically from a standard or custom picklist field within Salesforce.