Kanban
The Avonni Kanban provides a visual, drag-and-drop interface for managing Salesforce records through workflow stages. Ideal for project management, sales tracking, and customer service
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
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 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.
Properties
Variant — the visual layout of the board:
Base
Each stage as a separate column with cards, resembling a traditional bulletin board.
Path
Each step displayed as part of a progression sequence, with corresponding cards beneath each step.
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.
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.
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.
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 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.
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.
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.
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.
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.
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
Clicked Header Action Name
Text (String)
The name of the header action button the user clicked.
Component Metadata
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.
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).
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.
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.
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.
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.
Last updated
Was this helpful?