> 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 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 {% @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 **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 `true`. * **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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` 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 optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.