Kanban
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
Tutorials
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:
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.
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.
Interactions
The Avonni Kanban Component allows customizable interactions to enhance user experience and functionality. Here's a more precise explanation of these interaction settings:
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.
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.
Base
The Base variant depicts each stage as a separate column, resembling a traditional bulletin board filled with cards.
Path
The 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.
Remember to choose the field you want to use for grouping the cards in the Data Mappings section. This ensures that each card is sorted into the correct column based on that selected field.
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.
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.
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.
Margin: Control the spacing around the entire component to position it correctly within its surrounding elements.
Padding: Adjust the inner spacing within the component to fine-tune its content's layout and visual appeal.
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
Possible Use Cases
Sales Pipeline Management
Provides an overview of all ongoing deals at various stages—from lead generation to closing. Columns can be based on values that admins have in their related picklist fields, like "New Lead," "Contact Made," "Proposal Sent," and "Closed Won/Lost," or they can be customized to your specific needs. Move sales records through these stages with simple drag-and-drop actions.
Offers a visual way to track project milestones and tasks. Columns can represent standard stages like "To Do," "In Progress," "Review," and "Completed," or they can be based on the values in related picklist fields. Tasks can be moved from one column to another as they progress.
Helps in managing customer support queries efficiently.
Columns can represent stages like "New," "In Progress," and "Resolved." Customer queries or tickets can be moved through these stages, helping the support team manage workload.
Onboarding process
Streamlines the employee onboarding process. Use columns for stages like "Initial Interview," "Background Check," "Orientation," and "Fully Onboarded." Each new employee can be represented as a card that moves through these stages.
Inventory management
Offers a visual way to manage inventory levels. Columns can represent "Low Stock," "In Stock," and "Overstocked," and inventory items can be moved accordingly.
Content Scheduling
Helps in planning and tracking a content calendar. Columns can be used for "Idea," "Draft," "Review," and "Published." As content moves through these stages, it can be updated in real-time.
Last updated
Was this helpful?