> 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/dynamic-components/components/kanban.md). # 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. ## 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 have connected the Kanban to a data source, you need to map your fields to the different visual elements of the board. 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** To display a running total at the top of each column, map a numeric, currency, or percent field to **Summarize Field Name**. The component automatically sums that field for all cards within each column. * **Example:** On an Opportunities board grouped by `StageName`, set **Summarize Field Name** to `Amount` to see total pipeline value per stage.
**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). * **Description**, **Start Date**, **Due Date**, **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.
### 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. ### Summary The **Summary** section controls how the column totals are formatted when a **Summarize Field Name** is set in Data Mappings. * **Currency Code** — override the currency code used when displaying currency summaries. * **Currency Display As** — choose how the currency symbol is shown: **Symbol** (default), **Code**, or **Name**. * **Minimum / Maximum Fraction Digits** — control the number of decimal places displayed. * **Minimum Integer Digits** — set a minimum number of digits before the decimal point. * **Minimum / Maximum Significant Digits** — control the total number of significant digits shown. ### 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 is two words, the first letter of each is used; for a single word, the first two letters are used. * **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 is presented 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**.
### 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. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.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 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. ### 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. ### Header Action Click 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. ## 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. {% tabs %} {% tab title="Margin" %} 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. {% endtab %} {% tab title="Padding" %} 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. {% endtab %} {% tab title="Size" %} 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. {% endtab %} {% tab title="Border" %} 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. {% endtab %} {% tab title="Header" %} 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. {% endtab %} {% tab title="Column" %} 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. * **Column Sizing:** Min Width and Max Width to control how many columns are visible at once. {% endtab %} {% tab title="Card" %} 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. {% endtab %} {% endtabs %} ## 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. | --- # 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/dynamic-components/components/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.