Kanban

Overview

The Avonni Kanban component, designed for Salesforce App Builder, displays records as draggable cards organized into customizable columns, ideal for managing workflows visually on Lightning pages.

Key Features

• Draggable cards with column grouping

• Custom filters and search

• Column-level numeric summaries

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.

---

Examples

Example 1: Opportunity Stage Tracker on Opportunity 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 Opportunity record page

2

Drag the AX - Kanban component

3

Configure Data Source

• Set Object Api Name to Opportunity

• Set Filter to StageName != 'Closed Lost' (excludes lost opportunities from the pipeline view)

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

Configure Display Options

Check Display as Card for professional container styling

6

Save and test the Kanban functionality

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

---

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