AX - Kanban

Overview

AX - Kanban is a Lightning App Builder component that displays your Salesforce records as draggable cards organized into columns on record, app, and home pages.

Use it to visualize and manage any workflow—like sales stages, case statuses, project phases, or custom picklist values. Users can drag cards between columns to update record values, filter and search for specific records, and view numeric summaries (such as totals or counts) at the column level.

Perfect for sales pipelines, support queues, project management boards, or any process where visual workflow management improves team efficiency.

Getting Started

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

Key features

Data Integration: Groups records from any Salesforce object by a configurable field and displays them as cards.
Drag-and-Drop: Move cards between columns to instantly update the group field on the underlying record.
Column Summaries: Show a numeric total per column from a configurable field.
Interactivity: Search, filtering, and clickable cards linking to record detail pages.
Record Actions: Optional create, edit, delete, and duplicate actions per card.
Metrics: Define aggregation expressions (e.g., SUM, COUNT, AVG) computed across the displayed records and shown as summary metrics.
Header Customization: Add a title, caption, icon, and record count.

Use Cases

Opportunity Page: Group opportunities by stage for quick drag-and-drop updates.
Case Management Page: Organize cases by status or agent for faster resolution.
Project Page: Track tasks by status (e.g., To Do, In Progress, Done).
Sales Pipeline Overview: Display deals by stage with region filters.
Service Team Dashboard: Manage cases by priority or queue.
Hiring Tracker: View applicants by status (Applied, Interviewed, Hired).

Configuration

Add the Kanban component to a Lightning page in App Builder and configure it 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 displayed as Kanban cards. Examples: Opportunity, Case, or custom objects like Project_Task__c.

Filter

String

—

SOQL WHERE clause to restrict which records are displayed. Example: StageName != 'Closed Lost' or Status = 'Open'.

Order By

String

—

Field API name used to sort retrieved records before rendering. Sorting affects the default order of cards within columns. Example: CloseDate or Priority__c.

Maximum Number of Records

Integer

250

The maximum number of records retrieved and displayed. Used to maintain performance and avoid visual clutter on boards with large datasets.

Group Field Name

String

—

Yes

Field API name used to group records into columns. Example: StageName, Status, or OwnerId.

Title Field Name

String

—

Field API name used as the main title for each Kanban card. Examples: Name, Subject, or Title__c.

Description Field Name

String

—

Field API name used to populate the description text on each Kanban card. Examples: Description, Summary__c, or Details__c.

Summarize Field Name

String

—

Field API name containing a numeric value used to calculate a column total. Common examples include Amount, Estimated_Hours__c, or Case_Count__c.

Show Search

Boolean

false

If true, displays a search bar above the Kanban board, allowing keyword-based searches across visible fields.

Filter Fields

String

—

Comma-separated list of field API names displayed in the filter panel for user-driven filtering. Examples: OwnerId,StageName,Region__c.

Metric Aggregation Fields

String

—

Comma-separated list of aggregation expressions in the form Function(FieldApiName) — e.g.

Variant

String

base

Changes the visual appearance of the Kanban board. Valid values: base (default) or path (with path-specific styling). Options: base, path.

Clickable

Boolean

false

If true, card's titles become clickable links that redirect to the record's detail page. Useful for navigation-focused list displays.

Header - Title

String

—

Text displayed as the main title in the Kanban header. Useful for providing context, such as “Sales Pipeline” or “Open Support Cases.”

Header - Caption

String

—

Subheading text displayed under the header title to provide additional information. Example: “Grouped by Stage” or “Showing Open Items Only.”

Header - Icon Name

String

—

SLDS icon name (e.g., standard:task) displayed beside the header title for visual context. Example: standard:opportunity for sales pipelines.

Header - Show Number of Records

Boolean

false

If true, displays the total number of items in the kanban 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 kanban.

Action - Enable Record Edit

Boolean

false

If true, add an item action that allows users to edit a record in the kanban.

Action - Enable Record Delete

Boolean

false

If true, add an item action that allows users to delete a record in the kanban.

Action - Enable Record Duplicate

Boolean

false

If true, add an item action that allows users to duplicate a record in the kanban.

Display as Card

Boolean

true

If true, wraps the Kanban board in a styled card container for better visual presentation in dashboards or record pages.

Use Case Examples

Example 1 : Opportunity Stage Tracker on your Account Page

Scenario: Create a visual pipeline board showing opportunities organized by sales stage with drag-and-drop functionality to update stages and track total amounts.

Steps

Navigate to Lightning App Builder

Edit your Account record page

Drag the AX - Kanban component

Configure Data Source

Set Object Api Name to Opportunity
Set Filter to StageName != 'Closed Lost' AND AccountId = '{{Record.Id}}' (excludes lost opportunities from the pipeline view and display only opportunities related to the current account)

Configure Kanban Structure

Set Group Field Name to StageName (creates columns for each sales stage)
Set Title Field Name to Name (displays opportunity names on each card)
Set Summarize Field Name to Amount (shows total dollar amounts at the top of each stage column)

Customize Header

Set Header Title to Open Opportunities Kanban
Set Header Icon Name to standard:opportunity

Configure Display Options

Check Display as Card for professional container styling

Save & Review

Result: Users see a visual pipeline with opportunities grouped by stage, total amounts displayed per column, and the ability to drag opportunities between stages to update their progress

Example 2 : Custom Project Milestones Tracker

Scenario : Display and interact with project milestones in a Kanban view. Make project overview and task management easier for your teams.

Prerequisites :

Create a Project__c custom object.
Create a second Project_Milestone__c custom object. This object stores the stages and deadlines of your project.
Create 3 custom fields on the Project_Milestone__c object
- A picklist field Status__c with values New, In Progress, Done
- A Lookup field to the Project object Project__c
- A date field Target_Date__c

Navigate to Lightning App Builder

Edit your Project record page

Drag the AX - Kanban component

Configure Data Source

Set Object Api Name to Project_Milestone__c
Set Filter to Project__c = {{Record.Id}} (display only milestones related to the current project)

Configure Kanban Structure

Set Group Field Name to Status__c (creates columns for each milestone stage)
Set Title Field Name to Name (displays milestone names on each card)
Set Description Field Name to Target_Date__c (shows the milestone target date on each card)

Customize Header

Set Header Title to Project Milestones
Set Header Icon Name to standard:solution
Check Show Number of Records

Configure Display Options

Check Display as Card for professional container styling

Save & Review

Key Considerations

Data Source: Use Filter to limit records; ensure Group Field Name is valid.
Performance: Set Maximum Number of Records to manage load times.
Drag-and-Drop: Test column updates to confirm record field changes.
Accessibility: Ensure card text is readable; test with keyboard navigation.
Limitations: No file upload; respects sharing/FLS rules.

Troubleshooting Common Issues

Cards Not Displaying: Check Object Api Name and Filter syntax; verify field permissions.
Drag Not Working: Ensure Group Field Name is updatable and permissions allow edits.
Search Missing: Confirm Show Search is true.
If Issues Persist: Contact our support team at [email protected] for assistance.

Last updated 4 days ago

Was this helpful?