AX - List

AX - List is an Experience Cloud component that displays Salesforce records as customizable cards in grid or list layouts on Experience Sites pages.

Use it to show portal users filtered record sets—like their orders, cases, contracts, or any related data—with full control over which fields appear on each card. Users can search, filter, paginate through results, and click cards to navigate to records. Pull data from any standard or custom object in Experience Builder.

Perfect for customer order history, case lists, document libraries, product catalogs, or anywhere portal users need to browse and search through their Salesforce records.

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.

You bring your list to life in the Data Mappings section by defining and customizing it.

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.

The Variant sets the list style: Vertical (the default — a standard vertical list), Horizontal (a single-line row of items), or Check List (each item gets a checkbox). Highlight On Click visually highlights the clicked item, Show Number of Items displays a count beside the header title, and Api Name gives the component a unique identifier for referencing.

Configure the list header with a Header Title and Header Caption — each with its own Header Title Text Style / Header Caption Text Style setting (Heading 1 to Heading 4, Paragraph 1 / Paragraph 2) — a Header Icon Name and Header Icon Size, Header Is Joined to sit the header flush with the content below, and Header Actions to add action buttons to the header.

Avatar Attributes customize the avatar shown on each item — its Variant (Square / Circle), Size, Position, Fallback Icon Name, Presence indicator and its position, and automatic initials formatting.

When the Variant is Check List, Check List Attributes add a Show Check Counter (a checked/total count) and Strike-Through on Check (strikes out completed items).

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.

An image can be added to any item. The Image Attributes section customizes its position, size, crop fit, and a fallback source.

The Filter Menu Attributes section allows you to add a filter menu. Every field designated as a filter is shown there, keeping the list uncluttered and focused. Type chooses where the filters appear — Horizontal (the default) across the top, in a Popover, or in a Panel beside the list (see Side Panel Attributes) — and Picklist Filter Sort Order, Use Record Picklist Values and Use Cascading Filter Values control how picklist options are listed.

Every filter also carries an operator, picked from a menu at the top of the filter. Text, picklist, multi-select picklist and lookup filters offer Equals (the default), Not Equals, Empty and Not Empty. Number, date and time filters offer Between (the default), Not Between, Equals, Not Equals, Less Than, Less or Equal, Greater Than, Greater or Equal, Empty and Not Empty. Empty and Not Empty take no value, so the filter's inputs are hidden while either is selected. Checkbox filters have no operator menu.

The Pagination Attributes area lets you split long lists into smaller parts in the Avonni List Component. Turn Show Pagination on to render the controls, set Number of Items per Page (1 to 200), choose their Alignment (Left, Center or Right), and relabel or re-icon the First, Previous, Next and Last buttons. This makes it easier to handle extensive lists.

Utilize the Search Fields mapping to define which fields within the List component should be searchable, allowing users to quickly locate the needed information. With a Query source, the fields behind each item's label and description are searched as well, on top of the ones you list here.

Activating Search: to activate the search feature, open Search Engine Attributes 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 setting to set the location of the search bar. Options include Left, Right, Center, Fill and Panel — Panel moves the search box into the side panel beside the list, configured under Side Panel Attributes.

Sort Attributes let users reorder the list. Turn Sortable on to enable drag-and-drop reordering, pick a Sortable Icon Name and a Sortable Icon Position (Left or Right) for the drag handle, and enable Show Sorted By Value to surface the current sort. On Reorder defines the interaction that runs after an item is moved — use it with Update Records Order to persist the new order back to Salesforce.

Side Panel Attributes configure the panel the List can show beside its items. The panel only appears once the search or the filter menu is positioned in it — set Position to Panel in Search Engine Attributes, or Type to Panel in Filter Menu Attributes.

No Results Message replaces the default empty state with your own text when no item matches the search or the filters — or when the data source returns nothing at all. No Results Message Attributes controls what the empty state shows: Hide No Results Image drops the illustration and Hide No Results Message drops the text. Both are off by default.

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.