Kanban

The Avonni Kanban component displays Salesforce records as a drag-and-drop board, grouping cards into columns that represent workflow stages. It is ideal for project management, sales pipeline tracking, and customer service queues.

Overview

Connect your board to a data source, map your fields to define how columns and cards are built, then customize layout, filtering, and search to fit your process.

See it in a real project

Listings board: A listings board by stage, one swimlane per agent, totals per column.

Opportunity Pipeline Board: A pipeline board where a validation rule can refuse a move.

Configuration

To configure the Kanban, select it on the canvas. The Edit Kanban panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

Data Source

Before your Kanban board can display anything meaningful, it needs to know where to get its data.

Source

Description

Query

Fetch records directly from a Salesforce object. The most common option for displaying live Salesforce data.

Variable

Use a page variable that already holds the collection you want to display on the board.

Data Mapping

Once you connect the Kanban to a data source, you need to map your fields to the board's visual elements. This tells the component what data to display and where to display it.

Grouping Your Kanban Columns

The Group Field Name setting is the most important mapping. It determines which field from your data source creates the columns of your board. Each unique value in that field becomes a separate column.

Example: To group Tasks by Status, select the Kanban on the canvas, find Group Field Name in the Properties panel, and choose the Status field from your data source.

Subgrouping Within Columns

To add a second level of organization (swimlanes) inside each column, use the Sub Group Field Name setting.

For example, to group Tasks first by Status and then by Priority, set Group Field Name to Status and Sub Group Field Name to Priority. This produces Status columns that are further divided into horizontal Priority sections.

Summarizing Column Data

Use Group Summaries to put one or more summary values in the header of every column. Each entry maps its own field, chooses how to aggregate it and formats the result on its own, so a column can show a total and an average side by side.

Setting

What it does

Field

The record field to aggregate. Required.

Aggregate Function

Sum (default), Average, Count, Distinct Count, Min / Earliest, or Max / Latest.

Treat Blank Values As Zero

Counts blank values as 0 instead of skipping them. Requires Aggregate Function = Average or Count.

Prefix / Suffix

Optional text shown before and after the value.

Display As

Number (default), Currency, Percent, or Date. Date requires Aggregate Function = Min / Earliest or Max / Latest.

Type Attributes

Formatting for the chosen display type: currency code and display, minimum and maximum fraction, integer and significant digits, and the day, month, year, weekday and era parts of a date.

Example: On an Opportunities board grouped by StageName, add a Group Summary on Amount with Aggregate Function = Sum and Display As = Currency to see total pipeline value per stage.

A board configured before this release keeps working: its single summarize field is converted into one Group Summary with Aggregate Function set to Sum, and whatever formatting the old Summary section held is carried over into that summary's Type Attributes.

Totals On Each Swimlane

Sub Group Summaries is the same collection applied to the swimlane headers that Sub Group Field Name creates. Each swimlane then carries its own aggregate beside its record count, under the column totals above it. The settings are the ones listed above.

Configuring Card Content

The Card Attributes mapping section controls what appears on each card:

Cover Image — map a field containing image URLs to display an image on the card.
Title — select the field used as the card title (for example, Subject for Tasks).
Linkify — turns each card's title into a link to its Salesforce record.
Avatar — map the card avatar (initials, fallback icon, image, or presence) from your record fields.
Fields — map additional record fields to display on the card.
Description, Start Date, Due Date, Annotation Icons, Infos — additional card elements you can map from your data source fields.

Filter Fields

In the Data Mappings section, select which fields are available to end-users as filters. Only the fields you select here will appear in the filter menu.

Search Fields

By default, the search covers all searchable fields you map in the Data Mappings section. Use Search Fields to limit the search to specific mapped fields.

Content

The Content section controls the fundamental display style and board behavior.

Variant — choose the primary layout for the board. Base (default) uses vertical columns for stages. Path displays stages as a horizontal chevron-style path, ideal for visualizing linear progressions.
Show Item Count — when enabled, the number of items in each column is shown in parentheses beside the column label.
Show Sub Group Item Count — when enabled, the number of items in each subgroup is shown in parentheses beside the subgroup label.
Hide Column Header — enable for a more minimal look by hiding the header at the top of each column.
Highlight On Click — when enabled, the last clicked card is highlighted. If an interaction opens a side panel on item click, the last clicked card is highlighted automatically regardless of this setting.
Read Only — when enabled, cards and columns cannot be dragged. Use this to create a view-only display.

Header

The Header section controls the title bar at the top of the Kanban board.

Title — the title displayed in the header (e.g., "Project Tasks").
Caption — an optional subtitle displayed above the title for added context.
Avatar — display an image, fallback icon, or initials in the header. Advanced options let you set the avatar Size and Variant (Circle or Square).
Help Text — add a hoverable help icon with additional guidance for users.
Is Joined — when enabled, removes the header's bottom rounding and shadow so it sits flush with another component below it.
Actions — add custom buttons to the header to trigger board-level actions such as creating a new record or refreshing the data. Use Visible Actions Buttons to control how many buttons are shown before the rest overflow into a menu. Use Hide Actions or Disable Actions to control action visibility at runtime.
Show More Details Panel — when enabled, a side panel opens to display additional record details when a card is clicked.

Group By

The Group By section controls how column groups are presented when columns are created from the mapped group field.

Hide Undefined Group — when enabled, records with no value in the group field are not shown. The undefined group only appears for non-required, updateable fields.
Undefined Group Label — customize the label for the undefined group (default: "Undefined"). Requires Hide Undefined Group to be off.
Collapsed — when enabled, all groups start in a collapsed state.
Show Empty Sub Groups — when enabled, subgroups with no items are still displayed.

Column Order Direction

Control the order in which columns appear on the board.

Direction — choose Default (picklist or alphabetical order), Ascending Order (A–Z), Descending Order (Z–A), or Custom.
Columns Custom Order — when Direction is set to Custom, drag and drop the column values in the canvas to define your preferred sequence. Requires Direction = Custom.

Card Actions

The Card Actions section lets you add per-card action buttons that appear at the top-right of each card.

For each action, define a Label (the display text), a Name (unique identifier used in interactions), and optionally mark it as Disabled or Hidden.

Card Avatar

Configure the avatar displayed on each card.

Icon Name — the Lightning Design System icon used as the card avatar.
Icon Size — size of the avatar: X-Small, Small, Medium (default), Large, X-Large, or XX-Large.
Initials Auto Formatted — when enabled, initials are automatically derived from the card title. If the title has two words, it uses the first letter of each; for a single word, it uses the first two letters.
Variant — Circle or Square (default) avatar shape.
Position — Left (left-of-title, default) or Right (right-of-title).
Presence Position — position of the presence badge on the avatar: Top-Left, Top-Right, Bottom-Left, or Bottom-Right (default).

Card Image

Configure the optional image displayed on each card (mapped via the Cover Image field in Data Mappings).

Image Fallback — a fallback image shown when the card's cover image fails to load.
Position — Top (default) or Bottom of the card content.
Height — image height in pixels. Requires Position = Top or Bottom.
Crop Fit — how the image fills its container: Cover (default), Contain, Fill, or None.
Crop Position X / Y — fine-tune the crop anchor point as a percentage along each axis.

Card Fields Layout

Control how custom fields are displayed on each card.

Variant — determines how field labels appear: Label Hidden (default, compact view), Standard (label above the value), Label Inline (label beside the value), or Label Stacked (label above, with a modern stacked effect).

Filter

The Filter section controls how the filter menu appears to end users. Filter fields are enabled in the Data Mappings section.

Display As Popover — when enabled, replaces the inline filter row with a single filter button that opens a popover overlay, keeping the board surface clean.
Use Record Picklist Values — when enabled, filter options for picklist fields are derived only from values present in the currently loaded records. This prevents users from selecting a filter value that would return no results.
Use Cascading Filter Values — when enabled, applying one filter dynamically narrows the options available in other filters to only the values present in the matching records. This overrides Use Record Picklist Values.

Filter Operators

Each filter in the menu carries a mode selector — tooltipped Filter mode — that sets how its value is matched. There is nothing to configure in the builder: the operators on offer follow the field's type, and users pick one as they filter.

Text, picklist, multi-select picklist and lookup filters — Equals (default), Not Equals, Empty, Not Empty.
Number, currency, percent, date, date/time and time filters — Between (default), Not Between, Equals, Not Equals, Less Than, Less or Equal, Greater Than, Greater or Equal, Empty, Not Empty.
Checkbox filters — no Filter mode selector; they always match on equality.

Selecting Empty or Not Empty hides the value input, since neither operator takes a value.

Search

The Search section adds a search box to the board so users can quickly find specific cards.

Show Search — enable to display the search bar on the board.
Placeholder — customize the placeholder text inside the search box (default: "Search"). Requires Show Search to be on.
Position — set where the search bar appears: Left (default), Right, Center, or Fill (stretches to fill available space). Requires Show Search to be on.

Sort

The Sort section, at the bottom of the Properties tab, controls whether users can reorder cards inside a column.

Sortable — when enabled, a card can be dragged up and down within its own column to sequence it, without changing the column it belongs to. Turning it on also adds the Reorder interaction to the Interactions tab.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

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 on the board. Use this to navigate to a record detail page, open an edit form, or trigger any flow logic tied to the selected card.

Item Action Click

Fires when a user clicks a per-card action button. Use the targetName output to identify which action was clicked and route your flow logic accordingly.

Header Action

Fires when a user clicks a board-level header action button. Use the targetName output to identify which action was clicked and trigger the appropriate board-wide operation, such as creating a new record or refreshing the data source.

Item Drop

Fires after a user successfully drops a card into a new column. The Kanban automatically updates the record's group field to reflect the new column — use this interaction for secondary automations triggered by the move, such as showing a confirmation toast, refreshing other components, or logging an activity.

Reorder

Fires when a user drags a card to a new position inside the same column. This interaction only appears when Sortable is enabled in the Sort section, and it carries an Update Records Order action that writes the new sequence back to Salesforce.

Styling

The Style tab gives you fine-grained control over the Kanban's appearance. Configure it from the Style tab of the Edit Kanban panel.

Controls the outer spacing around the Kanban board, creating space between it and other elements on the page.

Top / Right / Bottom / Left: Adjust the space on each side.

Controls the inner spacing between the board's border and its header and columns.

Top / Right / Bottom / Left: Adjust the inner spacing on each side.

Controls the board's overall dimensions.

Width / Height: Set fixed dimensions for the board.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.

Customizes the border surrounding the board.

Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.

Styles the board's header, its border, title, caption, and avatar.

Header: Background color, padding (top, right, bottom, left), and bottom margin.
Header Border: Color, size, style, radius, and the joined-state bottom border.
Header Title: Color, font size, font style, and font weight.
Header Caption: Color, font size, font style, and font weight.
Header Avatar: Background color, foreground color, and border radius.

Styles each column's header, summary, and width.

Column Header: Set the path background color of each column header.
Column Header Summary: Text color, font size, font weight, height, and line height of the summary row, plus the text color and font size of the summaries' prefixes and suffixes.
Column Sizing: Min Width and Max Width to control how many columns are visible at once.

Styles the cards, including their fill, borders, and text fields.

Card Color: Background (default, hover, focus, highlight) and border (default, focus, highlight) colors.
Card Title: Text color, link color (and hover), font size, font style, font weight, and line clamp.
Card Description: Text color, font size, font style, font weight, and line clamp.
Card Info: Text color, link color (and hover), font size, font style, and font weight.

Output Variables

The Kanban exposes these output variables you can reference elsewhere on the page after the user interacts with it.

Item Click

When a user clicks a card, these variables update with the clicked card's data.

Output variable

Type

What it returns

Clicked Item Name

Text (String)

The unique name (key field value) of the card the user clicked.

Clicked Item sObject

Record (SObject)

The full Salesforce record associated with the clicked card.

Clicked Item Group Value Name

Text (String)

The column value (group field value) of the column containing the clicked card.

Example: When a user clicks an Opportunity card, use Clicked Item sObject to populate a record-detail panel beside the board.

Item Action Click

When a user clicks a per-card action button, these variables identify which card and action were involved.

Output variable

Type

What it returns

Clicked Item Action - Action Name

Text (String)

The name of the card action button the user clicked.

Clicked Item Action - Item Name

Text (String)

The unique name (key field value) of the card on which the action was clicked.

Clicked Item Action - Item sObject

Record (SObject)

The full Salesforce record associated with the card on which the action was clicked.

Clicked Item Action - Group Value Name

Text (String)

The column value of the column containing the card on which the action was clicked.

Example: Use Clicked Item Action - Action Name to branch your interaction logic — route to an edit form when the action is "Edit" and show a delete confirmation when it is "Delete".

Item Drop

When a user drags a card into a new column, these variables capture the moved card's details.

Output variable

Type

What it returns

Dropped Item Group Value

Text (String)

The column value (group field value) of the column the card was dropped into.

Dropped Item Key Field

Text (String)

The key field value that uniquely identifies the dropped card.

Dropped Item sObject

Record (SObject)

The full Salesforce record of the dropped card. Requires a Query data source.

Example: After a user moves an Opportunity from "Prospecting" to "Qualification", use Dropped Item sObject to refresh a related activity timeline component.

Header Actions

Output variable

Type

What it returns

Clicked Header Action Name

Text (String)

The name of the header action button the user clicked.

Others

Output variable

Type

What it returns

Number of Items

Number

The total number of cards currently loaded on the board.

Build with AI

MCP name: dcKanban · Toolset: dynamic

Ask your AI assistant: "Create an Avonni Dynamic Component with a Kanban of Opportunities grouped by stage, with a card action that opens the record."

The avonni-dynamic-components skill generates the component's metadata file locally. Nothing is deployed. Styling hooks are available through the MCP server's get_component_styles tool.

Set up the AI assistant

Last updated 2 days ago

Was this helpful?