> 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/flow/flow-components/kanban.md). # Kanban ## Overview
The Avonni Kanban provides a visual, drag-and-drop board for managing Salesforce records through workflow stages. Records display as cards grouped into columns, and users can move cards between columns by dragging — automatically triggering record updates or flow interactions. *** ## Tutorials
Kanban Basics [VIDEO]/files/1c13fcTJxrI4r8XJQGTt/pages/GgSCUaduxGywbcyvOH0j
*** ## Configuration To configure it, click the component on the Flow screen. The Edit Kanban Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab. ### Data Source The **Data Source** setting determines where the Kanban's card data comes from. | Data Source | Best For | | ---------------------------------------------------------------- | ----------------------------------------------------------- | | [**Variable**](/flow/component-builder/data-sources/variable.md) | Records from a Flow collection variable | | [**Query**](/flow/component-builder/data-sources/query.md) | Live Salesforce records, complex filters, or large datasets | ### Data Mapping The **Data Mappings** section aligns the data retrieved from Salesforce with the Kanban board's structure and functionality.
#### Group Field Name Select the field that determines how records are grouped into columns (e.g., "Status" or "Stage").
#### Sub Group Field Name Choose a field to create subcategories within each group (e.g., "Priority" within each "Status" column). #### Summarize Field Select a numerical field to display a summary total at the top of each column (e.g., total opportunity amount).
#### Card Attributes * **Cover Image:** Specify the field containing the URL for the card's cover image. * **Title:** Choose the field displayed as the card's title.
#### Filtering Options Select the fields you want to enable filtering on.

How to add filters

### Properties * **Variant** — the visual layout of the board:
VariantDescriptionImage
BaseEach stage as a separate column with cards, resembling a traditional bulletin board.
PathEach step displayed as part of a progression sequence, with corresponding cards beneath each step.
{% hint style="info" %} Remember to choose the field you want to use for grouping the cards in the Data Mappings section. This ensures that each card is sorted into the correct column based on that selected field. {% endhint %} * **Show Item Count** — displays the number of cards in each column header. * **Show Subgroup Item Count** — displays card counts within each subgroup. * **Hide Column Header** — hides the header row above each column for a cleaner look. * **Highlight On Click** — when enabled, the last clicked card is visually highlighted. * **Read Only** — disables all drag-and-drop functionality, preserving the board's current state. ### Summary Configure the summary value displayed at the top of each column (e.g., the sum of a numeric field across all cards in that column). ### Group By Configure how records are grouped into columns: * **Hide Undefined Group** — hides the column for records with no value in the group field. * **Undefined Group Label** — the label shown for the undefined group column if it is visible. * **Collapsed** — when enabled, columns start in a collapsed state. * **Show Empty Sub Groups** — shows subgroup sections even when they contain no cards. ### Column Order Direction Define the sequence in which columns are displayed on the board.
* **Direction**: Default (as defined), Ascending Order (A to Z or low to high), Descending Order (Z to A or high to low), or **Custom**. * **Custom** lets you define a specific sequence for columns and hide specific columns from view. ### Card Actions Configure action buttons displayed in the top-right corner of each card.

View of an Item Action

* **Actions** — add action items (e.g., Edit, Delete). Each action has a name, label, and optional disabled/hidden conditions. ### Card Avatar Display an avatar on each card. Configure: * **Position** — where the avatar appears on the card: Left or Right. * **Variant**, **Size**, **Initials** (auto-formatted), **Fallback Icon**, **Presence Type**, and **Presence Position**. ### Card Image Display an image on each card. Configure: * **Image Fallback**, **Position** (Top or Bottom), **Height**, **Crop Fit** (Cover, Contain, Fill, None), and **Crop Position X/Y**. ### Card Fields Layout The **Variant** attribute in field settings provides flexibility in determining how fields are visually represented on each card. | Variant | Description | | ----------------- | --------------------------------------------------------------------------- | | **Standard** | Default display with the label shown prominently above the field content. | | **Label Hidden** | Label is hidden; only the field content is visible. | | **Label Inline** | Label is displayed inline (side-by-side) with the field content. | | **Label Stacked** | Label is positioned directly above the field content with clear separation. | ### Header Customize the board's header — the area above all columns.
* **Title**, **Caption**, **Icons**, and **Action buttons** (wired to the **On Header Action** interaction). ### Search Enable a search bar within the Kanban board, providing the ability to locate specific cards quickly. ## Interactions [Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Kanban. Configure them from the **Interactions** tab of the Edit Kanban panel. ### Item Click Fires when a user clicks a card. Use this to navigate to a detail screen, open a modal, or pre-fill a form with the clicked record's data. ### Action Click Fires when a user clicks an action button on a card. The `targetName` output variable identifies which action was clicked, letting you route logic differently per action (e.g., Edit vs. Delete). ### Header Action Click Fires when a user clicks an action button in the board header. The `targetName` output variable identifies which header action was clicked, allowing different behaviors per button (e.g., Add New vs. Refresh). ### Item Drop Fires when a user drags a card into a different column. Use this to trigger a record update, run a sub-flow, or navigate to a confirmation screen after the drop. {% @arcade/embed url="" flowId="9elo6uBUiMP3M5vfljPX" %} *** ## Output Variables The Kanban exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Kanban component, and pick the output variable you need. ### Item Clicks When users click on a Kanban card, these variables tell you which card was clicked and which column it belongs to. | Output variable | Type | What it returns | | --------------------------------- | ---------------- | --------------------------------------------------------- | | **Clicked Item** | Record (SObject) | The full Salesforce record of the card the user clicked. | | **Clicked Item Name** | Text (String) | The name of the clicked card. | | **Clicked Item Group Value Name** | Text (String) | The name of the column where the clicked card is located. | > **Example:** When a user clicks a card on a sales pipeline Kanban, use **Clicked Item** to display the Opportunity details on the next screen, and **Clicked Item Group Value Name** to show which stage it's currently in. ### Action Clicks When users click an action button on a Kanban card, these variables identify which action was triggered and on which card. | Output variable | Type | What it returns | | ---------------------------------------- | ---------------- | ------------------------------------------------------------------------- | | **Clicked Item Action Item** | Record (SObject) | The full Salesforce record of the card where the user clicked an action. | | **Clicked Item Action Name** | Text (String) | The name of the action the user clicked (e.g., "Edit", "Delete"). | | **Clicked Item Action Item Name** | Text (String) | The name of the card where the action was clicked. | | **Clicked Item Action Group Value Name** | Text (String) | The name of the column where the card with the clicked action is located. | > **Example:** A card action called "Convert" is triggered on a Lead Kanban. Use a **Decision** element to check if **Clicked Item Action Name** equals "Convert", then run a sub-flow to convert the lead using the data from **Clicked Item Action Item**. ### Item Drop (Drag and Drop) When users drag a card from one column to another, these variables capture the drop event. | Output variable | Type | What it returns | | ---------------------------- | ---------------- | ----------------------------------------------------------------------------------------------- | | **Dropped Item** | Record (SObject) | The full Salesforce record of the card that was dropped into a new column. | | **Dropped Item Key Field** | Text (String) | The key field value (usually the record ID) of the dropped card. | | **Dropped Item Group Value** | Text (String) | The name of the column where the card was dropped. Use this to update the record's field value. | > **Example:** A user drags an Opportunity card from "Proposal Sent" to "Negotiation". Use **Dropped Item Key Field** to identify the record and **Dropped Item Group Value** ("Negotiation") to update the Opportunity's Stage field with an **Update Records** element. ### Edited Records When cards are moved between columns, the Kanban tracks which records have been modified. | Output variable | Type | What it returns | | ----------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Edited Records** | Record Collection (SObject\[]) | All records that were modified (moved to a different column), containing just the changed fields and the key field. Use with an **Update Records** element. | | **Edited Records Serialized** | Text (String) | The edited records as a JSON string. | | **Edited Records Full Data** | Record Collection (SObject\[]) | The full data of edited records (all fields, not just the changed ones). | > **Example:** After users drag several cards between columns during a pipeline review, pass **Edited Records** into an **Update Records** element to save all the stage changes back to Salesforce in one step. ### Header Actions | Output variable | Type | What it returns | | ------------------------------ | ------------- | ------------------------------------------------------ | | **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked. | ### Component Metadata | Output variable | Type | What it returns | | ------------------- | ------- | --------------------------------------------------------- | | **Number of Items** | Integer | The total number of cards currently loaded in the Kanban. | *** ## Styling The Kanban component offers extensive styling options from the Style tab. {% tabs %} {% tab title="Layout and Spacing" %} * **Margin:** Control the spacing around the entire component. * **Padding:** Adjust the internal spacing within the component. * **Size:** Modify the overall size of the component container. * **Border:** Add a border around the component (style, color, thickness). {% endtab %} {% tab title="Header Styling" %} * **Header Title:** Font, size, color, and weight of the main header title. * **Header Caption:** Style the subtitle independently. * **Header Avatar:** Size, shape, and appearance of header avatars. * **Header Actions:** Style the appearance of action buttons in the header. {% endtab %} {% tab title="Column Styling" %} * **Column Header:** Font, size, color, and background of column labels. * **Column Header Summary:** Style the summary text shown in column headers. * **Column Sizing:** Control the width and dimensions of columns. {% endtab %} {% tab title="Card Styling" %} * **Card Color:** Background color of individual cards. * **Card Title:** Font, size, color, and weight of the card title. * **Card Description:** Style descriptive text on cards. * **Card Info:** Style additional information such as icons, labels, or badges. {% endtab %} {% endtabs %} *** ## Troubleshooting Common Issues * **Tiles can't be dragged between columns** — The **Read Only** property is toggled on. Open the **Properties** tab and turn **Read Only** off. * **Tiles can't be dragged** — The user clicked on a header action menu inside the tile (the dropdown trigger), not on the tile body. Click and hold anywhere on the tile body — outside the action menu — to start the drag. * **Tile drags, then snaps back to its original column (field missing or not editable)** — The **Group Field Name** in **Data Mappings** points to a field that doesn't exist or is not editable for the running user. In **Data Mappings**, confirm the **Group Field Name** matches a real, editable field and check Field-Level Security. * **Tile drags, then snaps back to its original column (validation rule)** — A validation rule or required field blocks the record update triggered by the drop. Check the running user's debug logs for the validation error and adjust the rule or fill the required field before the Kanban screen. * **Drag-and-drop works in preview but not at runtime** — The **Key Field** in **Data Mappings** is empty or has duplicate values across records. Set **Key Field** to `{{Record.Id}}` or another unique field. * **Drop fires but the record never updates** — An **On Item Drop** interaction of type **Update Records** is wired but misconfigured; when this interaction type is present, the Kanban hands off the save logic to the interaction. Either remove the interaction (the Kanban will save automatically) or finish wiring the **Update Records** interaction with the correct field assignments. * **Tiles can be moved within a column but not across columns** — The **Group Field Name** is mapped to a relationship field and the intermediate object isn't included in the query fields. Use a direct field on the source object as the **Group Field Name**, or add parent object fields to the **Query Fields** list. * **No columns appear on the board** — The **Group Field Name** is not mapped, or no records have a value for that field. In **Data Mappings**, confirm **Group Field Name** is set, and if the column source is a picklist, check that records have a value. * **The board shows tiles in preview but is empty at runtime** — The flow variable feeding the **Data Source** is empty when the screen loads. Place the **Get Records** element before the screen element and confirm the collection variable is populated. * **Output variables (Dropped Item, etc.) are empty in the next screen** — No drop has happened yet, or the drop was rejected. Add a **Decision** element after the screen to handle the null case. *** --- # 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: ``` GET https://docs.avonnicomponents.com/flow/flow-components/kanban.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.