AX - Kanban
Overview
AX - Kanban is an Experience Cloud component that displays Salesforce records as draggable cards organized into workflow columns on Experience Sites pages.
Use it to let portal users visualize and manage workflows—like support case statuses, project phases, or approval stages. Users drag cards between columns to update record values, while you control which fields appear on cards and which picklist values define the columns. Configure everything in Experience Builder without code.
Perfect for customer support portals showing case progress, partner portals managing deal stages, project collaboration spaces, or anywhere portal users need visual workflow management.
Getting Started
Use this simple tutorial to learn the basics of the Kanban component and start building your use cases.
Configuration
Data Source
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.
Key Points
Choosing the right data source ensures your Kanban displays the information most relevant to your users.
Filtering and grouping streamline the board, making it easier to visualize and manage specific work items.
Data Mapping
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 information pulled from Salesforce fields is displayed correctly on 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.
How it Works
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
Board & Card Settings
Hide Column Header hides the column headers, Highlight On Click highlights the clicked card, and Read Only disables drag-and-drop and inline edits. The header supports a Header Icon Name and Icon Size, a caption, and Header Is Joined to sit flush with the board below.
Group By Attributes control how records are grouped into columns — collapsed state, hiding the undefined group, showing empty sub-groups, and the undefined-group label. Column Order Direction sets the column order (default, asc, desc, or custom), and Summarize Attributes configure a per-column summary (such as a sum of a field).
Avatar Attributes, Image Attributes, and Field Layout Attributes style each card's avatar, image, and the layout of its fields.
Interactions
This section lets you customize how users interact with your Kanban cards, making the board more dynamic and responsive.
Link to
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.
On Click
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.
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.
Styling
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.
Important Notes
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
Use Cases
Example 1: Partner Opportunity Kanban
Give your partners a clear, interactive view of their sales pipeline, right inside your Experience Cloud portal. With a drag-and-drop Kanban board, partner users can visualize, manage, and advance their opportunities without ever leaving the portal.
What You'll Achieve
Empowered partner visibility: Give partner users a real-time, visual overview of their opportunity pipeline organized by stage
Intuitive pipeline management: Enable drag-and-drop functionality so partners can update opportunity stages effortlessly
At-a-glance deal insight: Surface key details like account name, deal amount, and close date directly on each card
How to Set It Up
Links
AX - TabsExample 2: Case Status Kanban
Give your customers visibility into their support journey with a dedicated Kanban board inside your support portal. By displaying cases organized by status, customers can track progress at a glance, reducing the need to follow up for updates and creating a smoother, more transparent support experience.
What You'll Achieve
Customer-facing transparency: Let customers monitor the status of every submitted case in a clear, organized board view
Reduced inbound status calls: Proactively show progress so customers spend less time chasing updates
Improved support satisfaction: Deliver a polished, intuitive experience that builds trust and confidence in your support team
How to Set It Up
Mis à jour
Ce contenu vous a-t-il été utile ?