AX - List

Overview

AX - List is a Lightning App Builder component that displays your Salesforce records as customizable cards in grid or list layouts on record pages, app pages, and home pages.

Use it to display related records, search results, or filtered datasets, with complete 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 and use dynamic field values for titles, descriptions, and additional details.

Perfect for related record displays, custom dashboards, searchable directories, or anywhere you need a flexible alternative to standard related lists.

Getting Started

Use this simple tutorial to learn the basics of the List component and start building your use cases.

Key features

• Data Integration: Retrieves records from any Salesforce object (standard or custom).

• Flexible Layouts: Card-based grid or list with configurable columns and dividers.

• Interactivity: Supports filters, search, pagination, and record linking.

• Custom Fields: Display titles, descriptions, and additional fields per card.

• Header Customization: Add titles, captions, and icons for context.

• Dynamic Bindings: Use {{Record.FieldApiName}} for record-specific data.

Component Comparison

This is a streamlined version of the List component designed for quick implementation in Lightning App Builder. If you need advanced capabilities like custom row actions, click interactions, complex styling controls, conditional formatting, or component-to-component communication, consider using the List component in Dynamic Components for complete customization and interaction capabilities.

Use Cases

• Account Page: List related Contacts or Opportunities with key fields like status or amount.

• Campaign Page: Display campaign members, filterable by engagement or response.

• Property/Product Page: Show listings or items in a grid with price, availability, or category.

• Sales/Product Showcase: Highlight top deals or clients with dynamic filters.

• Task/Workload Overview: Present team tasks with priority or status filters.

• Partner/Customer Directory: Create a searchable, filterable list of accounts or VIPs.

---

Configuration

Add the List component to a Lightning Record Page in App Builder and configure via the Properties Panel.

Public Properties

These control data, display, and behavior.

Property	Label	Type	Description	Example
sObjectApiName	Object Api Name	String	API name of the Salesforce object for records (e.g., Contact, Opportunity, Product2).	Opportunity
filter	Filter	String	SOQL WHERE clause to filter records (e.g., Status = 'Active').	AccountId = '{{Record.Id}}'
orderBy	Order By	String	Field API name for sorting in ascending order (e.g., Name).	CloseDate
limit	Maximum Number of Records	Integer	Maximum records to display.	50
titleFieldName	Title Field Name	String	Field for card titles (e.g., Name, Subject, Title__c).	Name
descriptionFieldName	Description Field Name	String	Field for card descriptions (e.g., Description, Summary__c).	Description
fieldNames	Field Names	String	Comma-separated field API names for extra card details (e.g., OwnerId,StageName).	OwnerId,StageName,Amount
clickable	Clickable	Boolean	Makes cards clickable, linking to record detail pages.	On
headerTitle	Header Title	String	Main title above list (e.g., “Open Opportunities”).	"Top Accounts"
headerCaption	Header Caption	String	Subheading for context (e.g., “Sorted by Stage”).	"Filtered by Region"
headerIconName	Header Icon Name	String	SLDS icon for header (e.g., standard:account).	standard:contact
showSearch	Show Search	Boolean	Displays search bar for keyword searches.	On
filterableFields	Filter Fields	String	Comma-separated field API names for filter panel (e.g., Status,OwnerId).	Status,OwnerId
searchableFields	Search Fields	String	Comma-separated field API names for search (e.g., Name,Email).	Name,Email
divider	Divider	String	Separator style: top (line above), bottom (line below), around (both), card (card container).	card
showNbItems	Show Number of Items	Boolean	Displays total item count at top.	On
showPagination	Show Pagination	Boolean	Enables pagination controls at bottom.	On
nbItemsPerPage	Number of Items per Page	Integer	Records per page when pagination is enabled.	10
displayAsCard	Display as Card	Boolean	Wraps list in a styled card container.	On

Best Practice: Use {{Record.FieldApiName}} in filter or headerTitle (e.g., {{Record.Name}}) for context-aware displays on Record Pages. Choose a divider based on content: a card for rich visuals, a bottom for compact lists.

---

Use Case Examples

Example 1: Account Contacts List

Scenario : This example shows Contacts related to an Account with clickable cards.

1

Navigate to Lightning App Builder

Edit your Account record page

2

Drag the AX - List component

3

Configure Data Source

• Set Object Api Name to Contact

• Set Filter to AccountId = {{Record.Id}} (shows contacts related to current account)

4

Configure Contact Display

• Set Title Field Name to Name (displays contact names as card titles)

• Set Description Field Name to Title (shows job titles as descriptions)

• Set Field Names to Email,Phone (displays additional contact information)

• Check clickable to enable navigation to contact detail pages

5

Enable Search

• Check Show Search for keyword searching

• Set Searchable Fields to Name,Email (enables search across names and email addresses)

6

Set Header and Visual Styling

• Set Header Title to {{Record.Name}}'s contacts (dynamic header with account name)

• Set Header Icon Name to standard:contact

• Check Display A sCard for styled container presentation

• Check Show Number Items to display total contact count

7

Save and test the list functionality

Result: A visually appealing card-based list of contacts with search capabilities, role filtering, and clickable navigation to individual contact detail pages

Example 2: Campaign Member Grid

Scenario: Display campaign members in a paginated grid layout with status filtering, perfect for managing large campaign audiences and tracking member engagement.

Steps

1

Navigate to Lightning App Builder

Edit your Campaign record page

2

Drag the AX - List component onto your page layout

3

Configure Data Source

• Set Object Api Name to CampaignMember

• Set Filter to CampaignId = {{Record.Id}} (shows members of the current campaign)

• Set Order By to LastName (alphabetical sorting by last name)

4

Configure Member Display

• Set Title Field Name to LastName (displays member last names as card titles)

• Set Field Names to Status,Email (shows campaign status and email addresses)

5

Enable Search and Filtering

• Check Show Search for keyword searching across member information

• Set Searchable Fields to Name,Email (allows for text search)

• Set Filterable Fields to Status (allows filtering by campaign member status)

6

Customize Display and Header

• Set Divider to around (creates bordered cards for clear separation)

• Check Show Pagination to enable page navigation

• Set Number of records per page to 12 (displays 12 members per page)

• Set Header Title to {{Record.Name}}'s campaign members

• Set Header Icon to standard:contact

• Check Display As Card for styled container presentation

Result: A clean, paginated grid of campaign members with status filtering capabilities, presented in a professional card container for efficient campaign management.

---

Key Considerations

• Dynamic Bindings: Use {{Record.FieldApiName}} for filters/headers to tie to the current record.

• Divider Choice: card for rich, separated items; bottom for compact lists; test visually.

• Performance: Set limit for large datasets; use pagination to avoid overload.

• Search/Filters: Limit searchableFields/filterableFields for speed; test relevance.

• Clickable Cards: Ensure clickable is On for navigation; verify record ID access.

• Accessibility: Use clear titles/captions; ensure cards are keyboard-navigable.

---

Troubleshooting Common Issues

• No Records Shown: Check sObjectApiName, filter syntax, or permissions; test query in SOQL.

• Bindings Fail: Verify {{Record.FieldApiName}} context; use Record Page preview.

• Search/Filters Missing: Enable showSearch/filterableFields; map fields correctly.

• Layout Clutter: Adjust divider or columns; test pagination for long lists.

• Cards Not Clickable: Toggle clickable On; ensure record IDs are accessible.

• Slow Loading: Reduce limit or fields; optimize SOQL filters.

---

Summary

The Avonni List component offers a visually engaging, card-based way to browse and interact with Salesforce records on Lightning Record Pages. With filters, search, and clickable cards, it’s perfect for dynamic data displays.

Need More Advanced Features?

This App Builder version provides essential data table functionality with simple configuration. For advanced capabilities like custom actions, complex styling, and specialized data visualizations, explore the Data Table in Dynamic Components for unlimited customization options.