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.

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.

Basic Properties

These control the data source, grouping, and display of the Kanban component.

Property	Type	Description	Example
Object Api Name	String	API name of the Salesforce object for Kanban cards (e.g., Opportunity).	Opportunity
Filter	String	SOQL WHERE clause to filter records (e.g., StageName != 'Closed Lost').	Status = 'Open'
Order By	String	Field to sort records (e.g., CloseDate DESC).	Priority__c ASC
Maximum Number of Records	Integer	Limits the number of records displayed (e.g., 20).	50
Group Field Name	String	Field to group records into columns (e.g., StageName).	Status
Summary Field Name	String	Numeric field for column totals (e.g., Amount).	Estimated_Hours__c
Title Field Name	String	Field for card titles (e.g., Name).	Subject
Description Field Name	String	Field for card descriptions (e.g., Description).	Details__c
Filter Fields	String	Comma-separated fields for the filter panel (e.g., OwnerId,StageName).	Region__c,Status
Header Title	String	Main title in the Kanban header (e.g., “Sales Pipeline”).	“Open Support Cases”
Header Caption	String	Subheading in the header (e.g., “Grouped by Status”).	“Showing Active Items”
Header Icon Name	String	SLDS icon for the header (e.g., standard:opportunity).	standard:task
Show Search	Boolean	Displays a search bar if true.	true
Display as Card	Boolean	Shows the Kanban in a card layout if true.	true

Best Practice: Use Filter to show relevant records; set Group Field Name to match your workflow stages. Dynamic values (e.g., {!Record.FieldApiName}) work only on Lightning Record Pages.

Note: No Interactions or Style tabs are available in App Builder; functionality is managed via properties.

---

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

1

Navigate to Lightning App Builder

Edit your Account record page

2

Drag the AX - Kanban component

3

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)

4

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 Summary Field Name to Amount (shows total dollar amounts at the top of each stage column)

5

Customize Header

• Set Title Header to Open Opportunities Kanban

• Set Header Icon to standard:opportunity

6

Configure Display Options

Check Display as Card for professional container styling

7

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

1

Navigate to Lightning App Builder

Edit your Project record page

2

Drag the AX - Kanban component

3

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)

4

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 adds the milestone date to each card)

5

Customize Header

• Set Title Header to Project Milestones

• Set Header Icon to standard:solution

• Check Show number of records

6

Configure Display Options

Check Display as Card for professional container styling

7

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.

---

Summary

The Avonni Kanban component enhances Lightning pages with a visual workflow tool for managing records. It’s perfect for tracking sales or project stages