> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-kanban.md). # 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. {% @arcade/embed url="" flowId="bHAoEympRTWVCTcBhYDV" %} ### 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 totals and metrics recalculate after the move. * **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 per column and shown as summary metrics on the board. * **Header Customization:** Add a title, caption, icon, and record count. * **Variant:** Style the board as **base** (default) or **path**. * **Full Screen and Details Panel:** **Action - Full Screen** adds a button that expands the board to full screen, and **Action - Show More Details Panel** opens a side panel with more details about the selected record. ### 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). *** {% hint style="info" %} **See it in a real project** [Listings board](https://docs.avonnicomponents.com/projects/use-cases/boards-and-pipelines/listings-board): A listings board by stage, one swimlane per agent, totals per column. {% endhint %} ## 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 | — | | Comma-separated field API names used to sort retrieved records before rendering, each optionally followed by ASC or DESC and NULLS FIRST or NULLS LAST; ascending by default. | | 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. SUM(Amount), COUNT(Id), AVG(Score\_\_c) — computed per column and displayed as summary metrics on the Kanban … | | 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 kanban board 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 {% @arcade/embed url="" flowId="KaIUZxMUt19qobpIu9M5" %} **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** {% stepper %} {% step %} #### **Navigate to Lightning App Builder** Edit your Account record page {% endstep %} {% step %} #### **Drag the AX - Kanban component** {% endstep %} {% step %} #### **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) {% endstep %} {% step %} #### **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) {% endstep %} {% step %} #### Customize Header * Set **Header - Title** to `Open Opportunities Kanban` * Set **Header - Icon Name** to `standard:opportunity` {% endstep %} {% step %} #### **Configure Display Options** Check **Display as Card** for professional container styling {% endstep %} {% step %} #### **Save & Review** {% endstep %} {% endstepper %} **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 {% @arcade/embed url="" flowId="bwA4yPINZ2JXDPBNRwXZ" %} **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` {% stepper %} {% step %} #### **Navigate to Lightning App Builder** Edit your Project record page {% endstep %} {% step %} #### **Drag the AX - Kanban component** {% endstep %} {% step %} #### **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) {% endstep %} {% step %} #### **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) {% endstep %} {% step %} #### Customize Header * Set **Header - Title** to `Project Milestones` * Set **Header - Icon Name** to `standard:solution` * Check **Header - Show Number of Records** {% endstep %} {% step %} #### **Configure Display Options** Check **Display as Card** for professional container styling {% endstep %} {% step %} #### **Save & Review** {% endstep %} {% endstepper %} *** ## 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 checked. * **If Issues Persist:** Contact our support team at for assistance. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-kanban.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.