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.
Here are some of the key features of the List component:
Shows a list of things like items or choices.
It makes the information easy to look at and find what you need.
It lets you change how it looks to grab attention or get the point across.
You can make tweaks to make it even better to use.
🎓 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
Configuring the Data Source
The first and most important step in configuring the Avonni List Component is defining the Data Source. This is where you determine the source of content that will be displayed in the list. Selecting the right data source is what brings your list to life. Four data sources are available: Manual, Variable, Picklist, and Query. Each serves a distinct purpose and caters to different requirements, ensuring your list functions exactly as needed in your Salesforce environment.
Data Source Type | Use Case | When to Use |
---|---|---|
Manual | For a predefined set of items that don’t require dynamic updates. | Ideal for static content or rapid setup with specific items. |
Variable | Dynamically displaying items based on variable collections in Salesforce. | Suitable when list content reflects changing data from Salesforce records. |
Picklist | 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 |
Item Divider Configuration
The Item Divider feature 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. |
Choosing the Right Divider Style
The choice of divider style should be based on the desired visual separation and emphasis you want for the items in your list. Consider factors like readability, the importance of each item, and overall aesthetic appeal when selecting your divider style.
Item Clickable
If enabled, all items in the list become clickable.
Configuring the interaction correctly is crucial for this feature to work effectively. The clickable functionality enhances user interaction with the list of items.
Responsive Column Configuration
The Responsive Column Configuration feature in the Avonni List Component allows you to control how items are displayed across different devices by setting the number of columns in the list.
Customization Options
Tailor the number of columns to suit the content volume and the device's screen size. This ensures the list is optimally viewable on various devices, from desktops to mobile phones.
Applying the Feature
Adjust the column settings based on the amount of content in each item and the intended display device. For example, you might choose a single-column layout for mobile views and a multi-column layout for desktops to enhance readability and user experience.
Interactive Action Integration
Enhancing Interactivity
The Avonni List Component can embed interactive actions within your list, transforming it from a mere display tool into an engaging, interactive interface.
Where to Add Actions
Actions can be integrated at two levels:
Item Level: Add interactive elements like buttons or links to each list item.
Media Level: If your list includes media (like images or videos), actions can be attached to these elements for additional interactivity.
Purpose and Application
These integrated actions serve to enhance user engagement with the list. They can range from simple navigation links to complex functions like editing or deleting items.
For instance, you might add an 'Edit' button on each list item for quick modifications or a 'Play' button on video thumbnails for immediate media playback.
Overall Benefit
By incorporating actions, the Avonni List becomes a dynamic component within your Salesforce environment, significantly enhancing the user experience and offering a range of interactive possibilities.
🎚️ 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. With options for modifying the avatar's shape, size, position and presence icons, this section offers a range of capabilities to align the avatar with your list's overall look and feel.
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. By specifying these attributes, you can optimize the visual presentation of the list to enhance readability, alignment, and responsiveness across various screen sizes.
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 is used to modify the appearance of how field information is displayed. The following are the available values for the "variant" property, each with its 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. |
Sortable
Items can be sorted by activating the Sortable
toggle. Add a sortable icon on each item to let end-users know things are sortable.
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.
Only the title and description fields are searchable.
🪄 Adding Interactions
Interactions define what will happen when users interact with the list component. Here are the available interactions for the List component:
On
Item Click
: The event is fired when a user clicks on an item.On
Action Click
: The event is fired when a user clicks on an action.On
Media Action Click
: The event is fired when a user clicks on a media action.On
Reorder
: The event fired when a user reordered the items.
🎨 Styling the List
From the Styles panel, you can customize styling attributes for the Input Date Range:
Size
: to customize a specific size for the componentHeader
: to customize main label textItem
: to customize the look and feel of each item text
You can find the instructions for styling here.
Specifications
Name | Type | Description |
---|---|---|
| String | Alternative text used to describe the list. If the list is sortable, it should describe its behavior, for example: “Sortable menu. Press spacebar to grab or drop an item. Press up and down arrow keys to change position. Press escape to cancel |
| Integer | Default number of columns on smaller container widths. Valid values include 1, 2, 3, 4, 6 and 12 |
| Integer | Number of columns on small container widths. Valid values include 1, 2, 3, 4, 6 and 12. |
| Integer | Number of columns on medium container widths. Valid values include 1, 2, 3, 4, 6 and 12. |
| Integer | Number of columns on large container widths and above. Valid values include 1, 2, 3, 4, 6 and 12 |
| String | Position of the item divider. Valid values include top, bottom and around |
| String | Text label for the list |
| String | Variant to display the items as list or single line. Accepted values are base or single-line. The base variant displays a list. The variant defaults to base |
| Boolean | If true, it is be possible to reorder the list items. Only the base variant supports item sorting |
| String | The Lightning Design System name of the sortable icon. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed |
| String | Position of the sortable icon. Valid values include left and right. |
| Object | Image attributes: |
| ListAction[] | Array of action objects |
| ListMediaAction[] | Array of action objects displayed in the image |
| ListItem[] | Array of item objects |
| String | Name of the picklist field |
| String | Define a sort order for the picklist values |
Possible Use Cases
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