List
Renders each item from an array of data using a custom-built row of components.
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.
The Divider field lets you set a divider position around an item element. By default, there's no divider, but you can set it to
Top, Bottom , Around and Card. 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. This fully encloses each entry, making it simple to differentiate between items and improving the list's overall readability. |  |
Card | Sets each list item within its own card-like container, separated by dividers. This gives each entry a distinct, framed appearance, making it easy to focus on individual items and enhancing the overall organization of the list. |  |
Divider options example
The Header section gives you control over the appearance and functionality of your List header.
With the integrated header section in the List, there's no need to use the separate Avonni Header component to create a table header. It's now directly built into the List component, simplifying the building process.
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. |
Items can be added to a layout. You can set the number of columns for your layout (from 1 to 12). The number of columns can also be explicitly set for the device's size.
3 columns layout example
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, and position and presence icons, this section offers a range of capabilities to align the avatar with your list's overall look and feel.
- Modify the shape of the avatar for each item in the list. Choose from various built-in options such as circle, square, or empty.
- Adjust the size of the avatar icon to suit your design specifications. Whether you need small icons to maintain a minimalist look or larger ones for emphasis, this attribute offers the flexibility you need.
- Define where you'd like the avatar to appear within each list item. Options generally include
left,top-left,bottom-left,right,top-right,bottom-rightandleft-of-the-title.
- Customize the location of the presence icon, which can indicate status like online, busy, or offline, relative to the avatar. Include
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 Picklist Values data source doesn't support images
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.
- 1.Define Fields: Start by adding fields to your Avonni List Component.
- 2.Specify Column Span: Use the field attributes to specify the number of columns it should span.
Item action located in yellow
Media action located in yellow
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.
- Control the visibility of the pagination controls. When enabled, pagination controls will appear at the bottom of the list.
- Specify the number of list items to be displayed per page. You can set a value between 1 and 200, depending on your requirement for data density and user experience.
- Choose the alignment of the pagination controls. Options include
left,center, orrightalignment to fit your design layout.
- Personalize the icons and labels for the First, Last, Next, and Previous buttons. This allows you to adapt the pagination controls to various languages or better to match your application's branding and stylistic guidelines.
Items can be sortable by activating the
Sortable toggle. Add a sortable icon on each item to let end-users know things are sortable. 
Sortable icon in Left Position example
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.
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.
This section explains how to link your list to a Data Source. You have three options for sourcing your data:
Manual Entry: If you choose this option, you must type in the items for your list yourself and specify all their attributes individually.Variable: With this option, you can select an existing collection from your flow (like an array or list of objects) and map its attributes to populate your list automatically.Picklist Values: This allows you to add items based on the values in a Salesforce picklist field. Once selected, these values will become the data source for your list.
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.
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
Name | Description | Illustration |
|---|---|---|
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. |  | |
This tutorial provides an in-depth explanation of how to construct interactive vertical lists with actions. |  | |
This quick guide teaches you how to build and instantly display a detailed contact list. |  |
Name | Type | Description |
|---|---|---|
alternativeText | 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 |
cols | Integer | Default number of columns on smaller container widths. Valid values include 1, 2, 3, 4, 6 and 12 |
smallContainerCols | Integer | Number of columns on small container widths. Valid values include 1, 2, 3, 4, 6 and 12. |
mediumContainerCols | Integer | Number of columns on medium container widths. Valid values include 1, 2, 3, 4, 6 and 12. |
largeContainerCols | Integer | Number of columns on large container widths and above. Valid values include 1, 2, 3, 4, 6 and 12 |
divider | String | Position of the item divider. Valid values include top, bottom and around |
label | String | Text label for the list |
variant | 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 |
sortable | Boolean | If true, it is be possible to reorder the list items. Only the base variant supports item sorting |
sortableIconName | 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 |
sortableIconPosition | String | Position of the sortable icon. Valid values include left and right. |
imageAttributes | Object | Image attributes: cropFit, position, size, width, height and cropPosition |
actions | ListAction[] | Array of action objects |
mediaActions | ListMediaAction[] | Array of action objects displayed in the image |
items | ListItem[] | Array of item objects |
picklistFieldApiName | String | Name of the picklist field |
picklistSortOrder | String | Define a sort order for the picklist values |
Name | Description |
|---|---|
actionClick | The event fired when a user clicks on an action. |
mediaActionClick | The event fired when a user clicks on a media action. |
itemClick | The event fired when a user clicks on an item. |
reorder | The event fired when a user reordered the items. |
Name | Description |
|---|---|
Block Start | |
Block End | |
Block Between | |
Inline Start | |
Inline End | |
Inline Between | |
Name | Description |
|---|---|
Text Color | Define the text color for the header if a label is present |
Font Size | Define the font size for the header if a label is present |
Font Style | Define the font size for the header if a label is present |
Font Weight | Define the font weight for the header if a label is present |
Name | Description |
|---|---|
Header Text Color | Define the header text color for the item |
Header Font Size | Define the header font size for the item |
Header Font Style | Define the header font style for the item |
Header Font Weight | Define the header font weight for the item |
Description Text Color | Define the description text color for the item |
Description Font Size | Define the description font size for the item |
Description Font Style | Define the description font style for the item |
Description Font Weight | Define the description font weight for the item |
Background Color | Define the background color for the item |
Background Color Hover | Define the background color hover for the item |
Background Color Sortable | Define the background color sortable for the item |
Background Color Sortable Hover | Define the background color sortable hover for the item |
Border Color | Define the border color for the item |
Border Size | Define the border size for the item |
Border Style | Define the border style for the item |
Border Radius | Define the border radius for the item |
- 1.Contact Lists: Create sortable and searchable lists of client contact information.
- 2.Opportunity Pipeline: Display sales opportunities in a well-organized list, categorizing them by stages and likelihood of closing.
- 1.To-Do Lists: Utilize the list component to create a list of tasks, featuring details like deadlines, statuses, and responsible parties.
- 2.Project Milestones: Create a timeline of project deliverables, making them sortable by due date or importance.
- 1.Product Catalog: Display a list of products with filtering options, allowing sales reps to quickly find what they're looking for.
- 2.Stock Level: A real-time list of inventory levels sortable by product type, location, or availability.
- 1.KPI Monitoring: List out key performance indicators (KPIs) and sort them by relevance or time frame.
- 2.Sales Leaderboard: Showcase top-performing sales representatives in a sortable list, complete with their total sales, recent achievements, etc.
- 1.Ticket Tracking: Create a list to manage and track customer support tickets, sorted by urgency, agent, or status.
- 2.FAQ: Use lists to neatly display frequently asked questions and their answers.
- 1.Event Agenda: Display the day’s events or presentations in a sortable list, allowing attendees to plan their schedules easily.
- 2.Attendee List: Create a searchable list of event attendees sorted by company name, industry, or other criteria.
Last modified 12d ago