Kanban
Last updated
Last updated
The Avonni Kanban Component provides a visual, drag-and-drop interface for managing workflow processes within the Salesforce Experience Cloud. It leverages the familiar Kanban methodology, displaying Salesforce records (standard or custom) as cards within customizable columns.
Workflow Stages: Define columns to represent distinct stages of your workflow (e.g., "To Do," "In Progress," "Completed").
Card Customization: Configure which Salesforce fields are displayed on each card, providing essential context at a glance.
Drag-and-Drop Functionality: Update the status of a record/task by simply dragging its card to the appropriate column.
Real-time Updates: Changes are reflected instantly across your Experience Cloud site, fostering seamless collaboration.
This essential step in configuring your Avonni Kanban component establishes the connection between your Kanban board and the relevant data within your Salesforce environment.
Here's how it works:
Object Selection: Begin by choosing the specific Salesforce object (e.g., Accounts, Opportunities, custom objects, etc.) that contains the data you want your Kanban board to display.
Optional Filtering: If you wish to display only a subset of data from the selected object, use the filtering feature to set specific conditions. For instance, you might filter to show only "Open" opportunities or accounts within a certain region.
Grouping (Optional): Group your data to effectively organize your Kanban board. For example, grouping opportunities by "Stage" can create columns for "Prospecting," "Negotiation," etc.
Sorting: Select an "Order By" field and direction (ascending or descending) to determine the order in which the Kanban cards should appear.
Additional Fields: If you need to include fields in your Kanban that aren't directly used for display or interactions, add them in the "Additional Fields" section. This is particularly useful for fields you want to be searchable within Kanban's search bar.
Choosing the right data source ensures your Kanban displays the information most relevant to your users.
Filtering and grouping streamline the board, making visualizing and managing specific work items easier.
The "Data Mappings" section establishes a precise connection between your Salesforce data and the visual elements of your Kanban board. Here's why this is crucial:
Accurate Display: Data mappings ensure that the information pulled from Salesforce fields is correctly displayed on the Kanban cards and within the board's columns. For example, you might map the Salesforce "Opportunity Name" field to the title of each Kanban card.
Functionality: Mappings also control how users interact with the Kanban board. For instance, mapping a "Status" field to the Kanban columns allows users to drag and drop cards to update the status directly within the board.
Select a Salesforce field from your configured data source.
Map it to a Kanban attribute such as card title, description, column name, etc.
Repeat this process for all the essential fields you want to include on the Kanban board
This section lets you customize how users interact with your Kanban cards, making the board more dynamic and responsive.
Define what happens when a user clicks on a specific link within a Kanban card.
Common Uses: Navigate to a record detail page, open an external website, or trigger a Salesforce Flow.
Determine actions that occur when a user clicks anywhere on a Kanban card.
Common Uses: Expand the card for more details, open a modal window, or initiate a process.
| Interaction Type | Description |
|---|---|
Displays a brief pop-up notification on the screen, providing quick feedback or information after clicking a map marker. | |
Redirects the user to a different page in your site or URL, guiding them to more detailed information about the clicked location. | |
Opens a modal window with an alert message, presenting important information or warnings about the selected location. | |
Triggers a confirmation dialog box, used for actions that require additional user confirmation, like event attendance. | |
Opens a dialog that runs a Salesforce Flow, initiating workflows or processes related to the clicked location. |
Width: Controls the overall horizontal width of the Kanban board.
Height: Controls the overall vertical height of the Kanban board.
Overflow: Dictates how content is handled if it exceeds the board's dimensions (options might include 'visible', 'hidden', or 'scroll').
Size: Thickness of the border around the entire Kanban board.
Style: Appearance of the border (e.g., solid, dashed).
Color: Color of the border.
Radius: How rounded the corners of the board are.
Background Color: Sets the background color of the Kanban's header section.
Padding (top, bottom, left): Controls internal spacing within the header.
Margin Bottom: Creates space between the header and the columns below.
Border Color, Size, Style, Radius: Customize the appearance of a border within the header (likely to separate it visually).
Bottom Border (Is Joined): These attributes likely control whether the bottom border merges visually with the column headers.
Color, Font Size, Font Weight, Font Style: Control the appearance of the header's title and any caption text.
Background/Foreground Color: Set the colors of the avatar element.
Foreground Color Utility: Likely allows you to use pre-defined color utility classes.
Border Radius: Controls how rounded the avatar element is.
Path Background Color: Color of the background area where the column progress path is displayed.
Summary Text/Font Attributes: Control the appearance of any summary text within the column header.
Min/Max Width: Set the minimum and maximum width allowed for columns, affecting how they resize.
Background Colors: Colors for normal, hover, and focus states.
Border Colors: Colors for normal and focus states.
Title/Description/Info Text & Font Attributes: Control the appearance of various text elements within a card.
Line Clamp: Limits the number of lines displayed for titles/descriptions to prevent overflow.
Specificity: The exact styling attributes may vary slightly based on Avonni's implementation.
Visual Hierarchy: Use these attributes strategically to create a clear visual hierarchy and guide the user's eye
