# Kanban
*** ## Tutorials
Kanban Basics [VIDEO]/files/1c13fcTJxrI4r8XJQGTt/pages/GgSCUaduxGywbcyvOH0j
*** ## Displaying and Managing Data ### **Choose your Data Source** You'll need to connect your Kanban board to the correct data in Salesforce to get started. You have two options:
ManualFor a predefined set of items that don’t require dynamic updates.
VariableGreat when your table data is linked to variable collections in your flow./pages/ziXlgb71wxsEEwGKKCqQ
QueryPerfect for tables reflecting dynamically changing data or real-time updates. /pages/viMlx8xVDeuY59H0WnZo
### **Map your Data** The "Data Mappings" section aligns the data retrieved from Salesforce with the Kanban board's structure and functionality.
#### **Data Mappings Configuration** #### **Group Field Name** Select the field to determine 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 at the top of each column (e.g., total number of tasks).
#### **Card Attributes** * **Cover Image:** Specify the field containing the URL for the card's 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

By setting up these data mappings correctly, you ensure that your Kanban board displays the most relevant information in an organized and visually appealing manner, enhancing productivity and user experience. *** ## Adding Actions and Interactions ### Actions Actions like edit or delete can be displayed at the top right corner of each item (or card), providing quick access to commonly used functionalities.

View of an Item Action

### Interactions The Avonni Kanban Component allows customizable interactions to enhance user experience and functionality. Here's a more precise explanation of these interaction settings: | Interaction Type | Description | Example/Application | | ------------------------ | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | | **On Item Action Click** | Defines the outcome of clicking an action button on a Kanban item. | Clicking an 'edit' button could open a form for editing the item's details. | | **On Header Action** | Sets interactions for clicks on action buttons in the Kanban's header. | Actions might include adding a new item to a column or refreshing the board. | | **On Item Drop** | Configures automatic actions for items dragged and dropped into a different column. | An 'update records' action could be set to save changes automatically when an item is moved to a new column. | {% @arcade/embed flowId="9elo6uBUiMP3M5vfljPX" url="" %} *** ## Properties ### Display Options **Variant**: This property allows you to change the appearance of the Kanban board to better align with your aesthetic or functional requirements.
Selected VariantDescriptionImage
BaseThe Base variant depicts each stage as a separate column, resembling a traditional bulletin board filled with cards.
PathThe Path variant displays each step as part of a journey or sequence, with corresponding cards situated beneath each step. This layout makes it easy to visualize the progression of items through various stages.
{% hint style="info" %} Remember to choose the field you want to use for [grouping the cards](#group-field-name-attribute) in the Data Mappings section. This ensures that each card is sorted into the correct column based on that selected field. {% endhint %} * **Hide Column Header**: When enabled, this hides the headers of each column or group to provide a cleaner look. * **Read Only**: When activated, this property disables the drag-and-drop functionality of both tiles and columns to preserve the board's current state. ### Header This section allows customization of various elements in the header, such as: * **Title**: The main title is displayed at the top of the Kanban board. * **Caption**: A subtitle or additional information below the main title. * **Icons**: Customizable icons that can be added next to the title or caption. * **Actions**: Custom buttons action.
### Search This enables a search bar within the Kanban board, providing the ability to locate specific items quickly. ### Column Order Direction The "**`Column Order Direction`**" setting in the Kanban component allows users to define the sequence in which columns are displayed on the board. This feature offers flexibility in visualizing and organizing workflow stages or categories based on personal or business preferences. * **Default**: This is the standard order that columns appear upon initial setup. It's based on the natural order in which columns are defined or inputted into the system. * **Ascending Order**: Columns are displayed from the lowest value to the highest. This could be alphabetical (A to Z) or numerical, depending on the column titles or the underlying data you're working with. * **Descending Order**: The inverse of ascending; columns are displayed from the highest value to the lowest. Again, this could be alphabetical (Z to A) or numerical. * **Custom**: Provides the highest level of flexibility. Users can: * Define a sequence for columns, irrespective of their default, ascending, or descending order. * Hide specific columns from view, allowing for a cleaner and more focused visualization.
### Field Attributes The **`Variant`** attribute in field settings provides flexibility in determining how fields are visually represented on the Kanban. | Variant Attribute | Description | Use Case | | ----------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | **Standard** | Default display with the label shown prominently above the field content. | Ideal for clear, straightforward field identification. | | **Label Hidden** | Label for the field is hidden; only the field content is visible. | Reduces visual clutter; useful when labels are not necessary due to context. | | **Label Inline** | Label is displayed inline (side-by-side) with the field content. | Saves horizontal space; suitable for compact layouts. | | **Label Stacked** | Label is positioned directly above the field content with clear separation. | Creates a distinct hierarchy between label and content, enhancing readability. | *** ## 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 (group value) where the clicked card is located. For example, if the Kanban is grouped by Opportunity Stage, this returns the stage name like "Prospecting" or "Closed Won". | > **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"). Use in a **Decision** element to route the flow based on which action was pressed. | | **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 record 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 to match the new column. | > **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 this with an **Update Records** element to save changes back to Salesforce. | | **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). Useful when you need the complete record for downstream logic. | > **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. Use in a **Decision** element to route the flow based on which header button was pressed. | ### Component Metadata | Output variable | Type | What it returns | | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Number of Items** | Integer | The total number of cards currently loaded in the Kanban. Useful for displaying a count or making decisions when the board is empty. | *** ## Style The Kanban component offers extensive styling options to perfectly match your application's design and provide a great user experience. Here's how you can customize its appearance. {% tabs %} {% tab title="Layout and Spacing" %} * **Margin:** Control the spacing around the entire component to position it correctly within its surrounding elements. * **Padding:** Adjust the internal spacing within the component to fine-tune the layout and visual appeal of its content. * **Size:** Modify the overall size of the component container to fit your layout requirements. * **Border:** Add a border around the component to provide visual definition. You can customize the border's style (solid, dashed, etc.), color, and thickness {% endtab %} {% tab title="Header Styling" %} * **Header Title:** Customize the appearance of the main title in the header. You can adjust the font, size, color, and weight to create a visually appealing and informative heading. * **Header Caption:** If you include a caption or subtitle beneath the title, you can style it independently to provide additional context or information. * **Header Avatar:** If your component uses avatars in the header (e.g., to represent users or profiles), you can customize their size, shape, and appearance. * **Header Actions:** Style the appearance of any interactive elements (buttons, icons, etc.) that appear in the header {% endtab %} {% tab title="Column Styling" %} * **Column Header:** Customize the appearance of the labels that identify each column. This includes options for font, size, color, and background. * **Column Header Summary:** If your columns display summary information (e.g., totals, counts), you can style this text to make it stand out. * **Column Sizing:** Control the width and other dimensions of the columns to create the desired layout and ensure content is displayed effectively. {% endtab %} {% tab title="Card Styling" %} * **Card Color:** Set the background color of the individual cards or items within the component. * **Card Title:** Customize the title that appears on each card. Adjust the font, size, color, and weight. * **Card Description:** If your cards include descriptive text, you can style its appearance to provide clear and concise information. * **Card Info:** Style any additional information on the cards, such as icons, labels, or badges. {% endtab %} {% endtabs %} *** ## Troubleshooting | Problem | Cause | Fix | | -------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Tiles can't be dragged between columns** | The **Read Only** property is toggled on. This disables item drag-and-drop entirely. | 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. Drag won't initiate from a dropdown. | 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** | The **Group Field Name** in **Data Mappings** points to a field that doesn't exist on the object, was renamed, or is not editable for the running user. The component tries to save the new group value, the update fails, and the tile reverts. | In **Data Mappings**, confirm the **Group Field Name** matches a real, editable field on the source object. Check the user's profile for **Edit** permission on that field (Field-Level Security). | | **Tile drags, then snaps back to its original column** | A **validation rule** or **required field** on the source object blocks the record update triggered by the drop. | Check the running user's debug logs for the validation error, or test the same change directly on a record page. Adjust the validation rule or fill the required field through the flow before the Kanban screen. | | **Drag-and-drop works in preview but not at runtime** | The **Key Field** in **Data Mappings** is empty or the same value appears on multiple records. Without a unique key per record, the Kanban can't identify which record was moved. | Set **Key Field** to `{{Record.Id}}` (the default) 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 instead of running its own auto-save. | Either remove the interaction (the Kanban will save the record 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 (e.g., `Account.Owner.Name`) and one of the intermediate objects isn't included in the query fields. The save logic exits silently when it can't traverse the relationship. | Use a direct field on the source object as the **Group Field Name**, or add the parent object's fields to the **Query Fields** list so the relationship can be resolved. | | **No columns appear on the board** | The **Group Field Name** is not mapped, or no records returned by the query have a value for that field. | In **Data Mappings**, confirm **Group Field Name** is set. If the column source is a picklist, also check that records actually have a value (not all blank). | | **The board shows tiles in Component Builder preview but is empty at runtime** | The flow variable feeding the **Data Source** is empty when the screen loads — the **Get Records** element hasn't run yet, or the variable was reset earlier in the flow. | Place the **Get Records** element before the screen element, and confirm the collection variable is populated by adding a Debug element or a temporary Display Text. | | Output variables (**Dropped Item**, **Dropped Item Key Field**, **Dropped Item Group Value**) are empty in the next screen | No drop has happened yet, or the drop was rejected (snapped back). Output variables only populate after a successful drag-and-drop. | Add a **Decision** element after the screen to handle the case where the output is null, and verify the drop actually completes (the tile stays in the new column). | *** A couple of notes on placement: this section should be the last H1 on the page (after **Interactions**, before any closing horizontal rule --- # Agent Instructions: 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.