List
Last updated
Last updated
The Avonni List component is excellent for organizing and displaying a series of items or options clearly and orderly. It's designed to facilitate easy navigation and comprehension of information within your Experience Cloud site. Beyond listing information, this component offers various formatting options to ensure items stand out, effectively conveying key messages or concepts.
Additionally, the List component provides customization capabilities, allowing you to tailor its appearance and functionality to suit the specific needs of your site's users, thereby optimizing the overall user experience on your documentation pages.
The Avonni List is a Reactive Data Component
Understanding the configuration process, particularly the Data Source and Mappings sections, is crucial to use the List effectively.
The Data Source section is where you connect the Avonni List with your Salesforce data. You have two Data Source options.
| Data Source Type | Description | Use Case |
|---|---|---|
Manual Data Source | Manually input List into the data table. | Ideal for non-dynamic data, testing, and demos. |
Query | Create a query to auto-populate the List with Salesforce data. | Suited for dynamic, real-time, and large datasets. |
You bring your list to life in the Data Mappings section by defining and customizing it.
Click on the 'Add Columns' button to select the field you want to display as a label on the List.
Then, you can incorporate additional elements alongside your primary data. This could include visual components like images, avatars, or even additional fields to provide more context or detail to each item on the list.
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. |
The Layout Options feature within the Avonni List Component grants the capability to define the presentation of data within the list. This is achieved by selecting the desired number of columns in which the data should be organized, with options available from one to twelve columns.
Furthermore, the Avonni List Component provides advanced customization through the ability to specify column configurations contingent upon the container's screen size. This feature allows for precisely adjusting the list's appearance across various devices, ensuring a consistent and user-friendly display on small, medium, and large screens.
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.
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.
The "Filtering Option" allows you to add a filter menu. When this feature is enabled, all the fields designated as filters will be displayed in this popover, keeping the list uncluttered and focused.
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.
Utilize the 'Search Fields' attribute to define which fields within the List component should be searchable, allowing users to quickly locate the needed information.
Activating Search: GoTo activate the search feature, navigate to the Search section and turn on the 'Show Search' toggle. This action will introduce a search box within the List component. You can customize this feature by modifying the placeholder text and adjusting the search box's position as required.
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:
The "On Click section" lets you define what will happen when users interact with the list component by clicking on an item.
Here are the available interactions for the List component:
Explore each section to gain insights on configuring these features and enhancing interactivity for your end-users within the Avonni List component.
The Avonni List component for Experience Cloud Sites offers comprehensive customization options for its appearance, allowing you to align it perfectly with your site's aesthetic.
Here are the styling attributes available for customization in the Avonni List:
Border: Adjust the border thickness, style, and color to define or highlight the list's boundaries.
Size: Customize the overall size of the list, including width and height, to fit your layout.
Spacing: Control the space between list items, headers, and the list body to improve readability and visual appeal.
Header: Style the header section, including title, caption, and avatars, to make it visually distinct and informative.
Header Title: Customize the title's font, size, and color to make it stand out or align with your site's theme.
Header Caption: Style the caption under the header title for a concise description or context about the list.
Header Avatar: Include and style an avatar or image in the header for visual representation or branding.
Item: Adjust the appearance of individual list items, including background, alignment, and spacing.
Item Vertical Alignment: Control the alignment of list items vertically for a consistent and polished look.
Item Header: Customize the appearance of item headers within the list for clear segmentation and readability.
Item Description: Style the item description text to provide detailed information in a visually appealing manner.
Item Background: Set the background color or image for list items to differentiate or highlight individual entries.
Item Fields: Style the fields within each item, such as changing font or color, for clarity and visual hierarchy.
Item Fields Value: Customize the presentation of the field values for clear data representation.
Item Fields Label: Style the labels of the fields to distinguish them from the values and enhance readability.
Pagination Buttons: Style the pagination buttons for navigating the list, ensuring they are user-friendly and match your site's aesthetics.
Footer: Customize the footer section for additional information or actions related to the list, ensuring it complements the overall design.
