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.
• Metrics: Define aggregation expressions (e.g., SUM, COUNT, AVG) computed across the displayed records and shown as summary metrics.
• 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.

Properties

Label	Type	Default	Required	Description
Object API Name	String	—	Yes	API name of the Salesforce object used to retrieve records for the list. Examples: Contact, Opportunity, Product2, Custom_Object__c.
Filter	String	—		SOQL WHERE clause applied to the records query to limit results. Example: Status = 'Active'.
Order By	String	—		Field API name used to sort returned records in ascending order. Example: Name, CloseDate.
Maximum Number of Records	Integer	—		The maximum number of records to retrieve and display. Helps maintain performance and avoid visual overload.
Title Field Name	String	—		Field API name used as the title for each list item card. Examples: Name, Subject, Title__c.
Description Field Name	String	—		Field API name used as the description text for each list item card. Examples: Description, Summary__c, Details__c.
Field Names	String	—		Comma-separated list of field API names that display additional details for each card. Examples: OwnerId,StageName,Amount.
Show Search	Boolean	false		If true, displays a search bar above the list for keyword searches on configured fields.
Searchable Fields	String	—		Comma-separated list of field API names used for keyword search functionality. Examples: Name,Email,ProductCode.
Filterable Fields	String	—		Comma-separated list of field API names displayed in the filter panel for user-driven filtering. Examples: Status,OwnerId,StageName.
Sortable Fields	String	—		Comma-separated list of field API names displayed in the sort panel for user-driven sorting. Examples: Status,OwnerId,StageName.
Metric Aggregation Fields	String	—		Comma-separated list of aggregation expressions in the form Function(FieldApiName) — e.g. SUM(Amount), COUNT(Id), AVG(Score__c) — computed across the displayed records and shown as summary metrics.
Divider	String	bottom		Controls the visual separators for list items, letting you tune density, scannability, and grouping. Valid values: top, bottom, around, card. Options: card, around, top, bottom.
Clickable	Boolean	false		If true, cards become clickable links that redirect to the record's detail page. Useful for navigation-focused list displays.
Show Pagination	Boolean	true		If true, enables pagination controls at the bottom of the list to navigate large datasets.
Number of Records Per Page	Integer	25		When pagination is enabled, defines how many records appear per page.
Header - Title	String	—		Text displayed as the main title in the component's header. Example: “Open Opportunities” or “Top Accounts.”
Header - Caption	String	—		Subheading text displayed below the header title to provide extra context. Example: “Sorted by Stage” or “Filtered by Priority.”
Header - Icon Name	String	—		The Lightning Design System name of the icon (e.g.,…
Header - Show Number of Records	Boolean	false		If true, displays the total number of items in the list at the top of the component.
Action - Show More Details Panel	Boolean	false		If true, enables a side panel that displays additional record details when a row is selected, providing deeper context without leaving the page.
Action - Full Screen	Boolean	false		If true, displays a button that allows users to expand the data table to full screen, improving visibility for large datasets or detailed analysis.
Action - Enable Record Create	Boolean	false		If true, displays a button that allows users to create a new record in the list.
Action - Enable Record Edit	Boolean	false		If true, add an item action that allows users to edit a record in the list.
Action - Enable Record Delete	Boolean	false		If true, add an item action that allows users to delete a record in the list.
Action - Enable Record Duplicate	Boolean	false		If true, add an item action that allows users to duplicate a record in the list.
Display as Card	Boolean	true		If true, displays the component inside a styled card container for better visual presentation.

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 as Card for styled container presentation
• Check Show Number of Records 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 Name 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.

---

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.