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.
Last updated
Was this helpful?
To get your Kanban board up and running, you'll need to connect it to your Salesforce data and configure how that data is displayed.
Before your Kanban board can display anything meaningful, it needs to know where to get its data. Avonni offers flexible options to connect your board to various data sources:
Once you've connected your Avonni Kanban component to a data source (e.g., an Avonni Query Data Source), you need to map fields from your data to the different visual elements of the Kanban board. This tells the component what data to display and where to display it.
Group Field Name)The Group Field Name property is the most important mapping setting. It determines which field from your data source will be used to create the columns of your Kanban board.
How it Works: The Kanban component looks at all the unique values in the field you select for Group Field Name. Each unique value becomes a separate column on your board.
Example (Task Status): To create a Kanban board where Tasks are grouped by their Status (e.g., "Not Started," "In Progress," "Completed"):
Ensure your data source retrieves Task records and includes the Status field.
Select the Kanban component on the canvas.
In the Properties Panel, find the Group Field Name property.
Click the resource selector and choose the Status field from your data source.
Sub Group Field Name - Optional)The Sub Group Field Name property allows you to create a second level of grouping within each column. This creates subcategories within each main column.
Example (Task Status and Priority): To group Tasks by Status (as columns) and then within each status, group them by Priority:
Set Group Field Name to Status (as in the previous example).
Set Sub Group Field Name to Priority.
Your Kanban board will now have columns for each Status. Within each column, the Tasks will be further grouped by their Priority.
Summarize Field - Optional)The Summarize Field property allows you to display a summary value at each column's top (or bottom, depending on the component's configuration).
Example (Total Tasks per Status): To show the number of Tasks in each Status column:
Set Group Field Name to Status.
Set Summarize Field to Id (or any other field that uniquely identifies a Task – you're essentially counting the records).
You could also, for instance, sum the Amount field of Opportunities grouped by StageName.
Card Attributes)This section controls what information is displayed on each individual card within the Kanban board.
Cover Image (Optional): If your data source includes a field containing image URLs, you can map that field to the Cover Image property to display an image on each card.
Title: Select the field from your data source that should be displayed as the title of each card. For our Task example, you would likely map this to the Subject field.
To configure the card content for our Task Kanban:
Select the Kanban Component: Click on the Kanban component in the canvas.
Find the "Card Attributes" Section: In the Properties Panel, locate the section for configuring card attributes (this might be labeled "Card Attributes," "Item Display," or similar).
Map the Title:
Click the resource selector next to the Title property.
Select the Subject field from your data source.
You could add additional mappings for other card elements (e.g., a description, a due date) if your data source includes those fields and the Kanban component supports them
Filtering allows users to narrow down the items displayed on the Kanban board, making it easier to focus on specific tasks or categories.
Select the fields from your data source that you want to make available as filters. For example, you could allow users to filter by priority, due date, assignee, or any other relevant field
Actions and interactions make your Kanban board more dynamic and user-friendly.
Add Buttons to Cards: You can add buttons to each card to provide quick access to common actions, such as editing the record, deleting it, or opening a related page.
On Item Action Click: Specify what happens when a user clicks an action button on a card.
On Header Action: Define actions for buttons you've added to the Kanban header.
On Item Drop: Configure actions when a user drags and drops a card into a different column. This is often used to update the record's status automatically.
Tutorial
This section allows you to customize your Kanban board's overall appearance and behavior.
Variant: Choose how you want your Kanban board to look:
Base: This is the traditional Kanban layout, with vertical columns representing different stages or categories.
Path: This variant displays the stages as a horizontal path, making it easy to visualize the flow of items through a process.
Hide Column Header: If you want a cleaner look, you can hide the columns' headers.
Read Only: If you don't want users to be able to drag and drop cards to change their status or position, you can make the Kanban board "Read Only." This will prevent any accidental or unauthorized modifications
The header sits at the top of your Kanban board and provides a space for you to add contextual information and actions.
Customize the Header Content:
Title: Give your Kanban board a clear and descriptive title.
Caption: Add a subtitle or brief description to provide more context.
Icons: Include an icon next to the title or caption to enhance the header visually.
Add Actions:
Actions: You can add custom buttons to the header to trigger actions related to the Kanban board, such as creating a new item, refreshing the data, or filtering the items.
Enable Search: Allow users to search for specific items on the board.
Control Column Order:
Default: Use the default column order.
Ascending/Descending: Sort columns alphabetically or numerically.
Custom: Define a specific column order and hide columns.
Control Field Display:
Standard: Show field labels above the content.
Label Hidden/Inline/Stacked: Adjust how labels are displayed.
Fine-tune the Kanban's appearance:
Layout & Spacing: Adjust margins, padding, and size.
Header Styling: Customize header colors, fonts, etc.
Column Styling: Customize column width, background, etc.
Card Styling: Customize card appearance (colors, borders, etc.)
Manual
Enter data directly into the component configuration. This is suitable for small, static datasetsta.
Variable
Use a variable as your data source. This is useful for data that changes based on user interactions or other component logic.
Query
Fetch data directly from Salesforce using a query. This is the most common option for displaying Salesforce records.