Kanban

Connect to Your Data

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:

Mapping Data to Your Kanban

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.

Grouping Your Kanban Columns

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"):

  1. Ensure your data source retrieves Task records and includes the Status field.

  2. Select the Kanban component on the canvas.

  3. In the Properties Panel, find the Group Field Name property.

  4. Click the resource selector and choose the Status field from your data source.

Subgrouping Within Columns

To add a second level of organization (often called "swimlanes") inside each Kanban column, use the Sub Group Field Name property.

For example, to group tasks first by Status and then by Priority, you would set:

• Group Field Name to Status.

• Sub Group Field Name to Priority.

This creates a board with Status columns that are further divided into horizontal Priority sections.

Summarizing Column Data

To provide a quick overview of key values, you can display a sum total at the top of each Kanban column. This feature automatically calculates and shows the sum of a specific numeric, currency, or percent field for all cards within that column.

Configuration Steps:

1. Ensure Grouping is Set: Confirm that your primary Group Field Name is set (e.g., StageName for Opportunities).

2. Find the Summarize Property: In the component's properties, locate the Summarize Field Name setting.

3. Select the Field to Sum: From the dropdown list, choose the Number, Currency, or Percent field you wish to total for each column. Only fields of these specific data types will be available for selection.

Example: Summing Opportunity Amounts per Stage

Imagine your Kanban board displays Opportunities grouped by their StageName. You want to see the total potential revenue in each stage.

• Action: In the Summarize Field Name property, you would select the Amount field (which is a currency field).

• Result: The header of each StageName column (e.g., "Negotiation/Review") will now automatically display the sum total of the Amount field for all Opportunity cards within that column. This gives you an instant overview of your pipeline's value at each stage.

Configuring Card Content

This section controls what information is displayed on each 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:

1. Select the Kanban Component: Click on the Kanban component in the canvas.

2. 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).

3. 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.

Configuring Kanban Board Filters

Filtering allows users to narrow down the cards displayed on the Kanban board, making it easier to focus on specific tasks or categories. Setting up filters in the Avonni Kanban component is a two-part process: first, you enable which fields can be used as a filter, and second, you decide how the filter controls are presented to the user.

Step 1: Enable Fields for Filtering

You must first specify which fields from your data source are available for users to filter by.

1. Select the Kanban Component: Click on the Kanban component on your canvas.

2. Navigate to Data Mappings section: Find the Filters attributes.

3. Click into this field and select all the fields you want to empower your users to filter by, such as Priority, Assignee, or Due Date.

Only the fields you select in this step will appear in the filter menu for your end-users

Step 2: Configure Filter Display Options

Once you have enabled one or more fields to be filterable, you can adjust how the filter controls are presented to the user. These settings are found in the main Filter section of the Kanban component's Properties Panel.

Displaying Filters in a Popover

By default, enabled filters might display in a row above the Kanban columns. If you have multiple filters, this can occupy valuable screen space. To create a cleaner, more compact interface, you can consolidate them into a single button.

• Setting: Display as popover (Boolean - Checkbox)

• How it Works: Enable this option to replace the row of individual filters with a single filter button. When a user clicks this button, a pop-up window (also known as a popover) appears, containing all the available filter controls.

Streamlining Picklist Filter Choices

To provide a more intelligent and user-friendly experience when filtering by picklists, you can hide options that would yield no results.

• Setting: Hide empty picklist values (Boolean - Checkbox)

• How it Works: When this is enabled, any filter based on a picklist field will automatically hide choices that are not present in any of the records currently loaded on the Kanban board. This prevents users from selecting a filter value that will only show them an empty column.

By combining these settings, you can create a robust, influential, and tailored filtering experience that allows users to quickly find the exact information they need on the Kanban board.

Add Actions and Interactions

To transform your Kanban board from a simple visual display into a functional, interactive tool, you can configure Actions and Interactions. Actions are the clickable elements (such as buttons), and Interactions define what happens when a user acts (such as clicking a button or dragging a card).

You can configure these in the Interactions section of the Kanban component's properties.

Card-Level Actions

This allows you to add specific action buttons or a menu of options to each card on the board.

How it Works:

1. Define Card Actions: First, in the Card Attributes section of the Kanban properties, you add your action items. For each, you'll define a Label (e.g., "View Details," "Edit") and a unique Name (e.g., view_details, edit_record). These will appear as buttons or a menu on each card.

2. Configure the Interaction: Next, select the Kanban component and go to the Interactions section. Add logic to the On Item Action Click event. Here, you'll set up conditions to check which action Name was clicked and then trigger the appropriate response (like Maps to the record page or Open Flow Dialog to launch an edit screen).

Drag-and-Drop Automation

This is one of the most powerful and time-saving features of the Kanban board. By default, when a user drags a card to a new column, the Kanban component automatically attempts to update the record's grouping field (e.g., changing the Status or StageName to match the new column's value).

The On Item Drop interaction allows you to define additional automated actions that should trigger after this successful drag-and-drop update is completed.

• When it Fires: Triggers the moment a user successfully drops a card into a new column and after the underlying record update is processed.

• Common Use Cases (What to use it for):

  • Provide User Feedback: Use a Show Toast interaction to immediately confirm the change (e.g., "Opportunity stage updated to 'Negotiation'.").

  • Refresh Other Components: Use Refresh All Queries to update other components on the same page (such as charts or data table) that summarize the data displayed in the Kanban.

  • Log Activities: Trigger a Flow to create a completed Activity record on the parent record, noting that its status was changed via the Kanban board.

Board-Level Actions (On Header Action Click)

These are for actions that apply to the entire Kanban board, not a specific card.

• How it Works: You first add buttons to the Kanban's Header section (e.g., "New Task," "Refresh"). Then, you use the On Header Action Click interaction to define what each of those buttons does, such as launching a Flow to create a new record or refreshing the data source for the entire Kanban.

By combining these different types of interactions, you can create a highly efficient and dynamic tool that allows users to not only visualize their work but also act on it directly.

Validation Rules Support

It's crucial to know that the Avonni Kanban component respects your existing Salesforce Validation Rules.

• How it Works: When a user drags a card to a new column, the component attempts to update the corresponding record. If this update violates a Validation Rule that you have configured in Salesforce Setup (e.g., a rule stating that a specific field must be filled out before moving to a particular stage), the move will be prevented.

• User Feedback: The user will be shown an error message, typically the one you defined in the Salesforce Validation Rule itself, explaining why the move is not allowed. This ensures that invalid state changes cannot be made and your data remains consistent, all directly from the Kanban interface.

Customizing Your Kanban Board

After connecting your data source and defining your column groupings, you can customize the layout, appearance, and functionality of the Kanban board. All settings are found in the Properties Panel when the Kanban component is selected.

Overall Layout & Variant

This section controls the fundamental display style of your Kanban board.

• Variant: Choose the primary layout for your board:

  • Base (Default) The traditional Kanban layout features vertical columns that represent different stages or categories (e.g., "To Do," "In Progress," "Done").

  • Path: Displays the stages as a horizontal, chevron-style path. This is excellent for visualizing the linear progression of items through a defined process.

• Hide Column Header: (Boolean) For a more minimal look, enable this option to hide the headers at the top of each column.

Header Configuration

The header sits at the top of your Kanban board and provides a space for a title and board-level actions.

• Title, Caption, and Icon: Give your Kanban board a clear Title (e.g., "Project Tasks"), an optional Caption for more context, and an Icon Name to visually represent the board's purpose.

• Header Actions: You can add custom buttons to the header to trigger actions related to the entire board, such as creating a new item (e.g., "New Task" button launching a Flow), refreshing the data, or exporting information.

Card Display (Field Attributes)

Control what information is displayed on each Kanban card.

• Adding Fields: In the component's properties, you can select which fields from your data source appear on the cards. This allows you to show more detail than just a title, such as an owner, due date, or priority.

• Field Label Display (Variant): Control how the labels for these additional fields are shown on the card (e.g., Standard with the label above the value, or Label Hidden for a more compact view).

Column Order

By default, columns often appear in alphabetical order or the order defined by your picklist field. You can override this with the Column Order property.

• Options:

  • Ascending / Descending: Sort the columns alphabetically (A-Z or Z-A).

  • Custom: This powerful option allows you to define a specific, non-alphabetical order for your columns (e.g., "Backlog," "In Progress," "Review," "Done"). When you select Custom, an interface appears, allowing you to drag the column values into your desired sequence and hide columns you don't want to display.

Board Functionality

These settings control the primary interactive features of the Kanban board.

• Enable Search: (Boolean) Adds a search box to your Kanban board, allowing users to quickly find specific cards by filtering based on their search term.

• Read Only: (Boolean) If enabled, this locks the board, preventing users from dragging and dropping cards to change their status or position. This is useful for creating a view-only display.

By using these customization options, you can tailor the Avonni Kanban component to create a highly visual, functional, and user-friendly tool that perfectly fits your specific process and user needs.

Style

You can fine-tune nearly every visual aspect of the Avonni Kanban board to match your branding and improve data readability. Most styling options are configured using the Style Panel or within the component's Properties Panel, allowing you to create and apply reusable styles to different parts of the component.

Overall Layout & Spacing

These settings affect the entire Kanban component container, controlling its position and general spacing.

• Margin: Adjust the space outside the Kanban board's border to separate, separating it from other components on the page.

• Padding: Control the space inside the Kanban board's main border, between the edge and its content (like the header and columns).

• Size: Define the overall width and height of the component to fit your page layout.

Header Styling

Customize the main header area that sits above the columns to make it stand out.

• Background & Borders: Change the background color of the header section or adjust its borders.

• Title & Caption Styling: Control the font size, font weight (boldness), and text color for the title and caption to create visual hierarchy.

• Icon Styling: Customize the size and color of the header icon.

Column Styling

Control the appearance of the individual columns (e.g., "To Do," "In Progress," "Done").

• Column Header: Customize the font, color, and background of each column's header to make them distinct.

• Column Body: Set a background color for the area where cards are placed within each column.

• Borders: Adjust the style and color of the borders that separate the columns.

• Width: Define the width of the columns to manage how many are visible at once.

Card Styling

Customize the look of the individual cards that represent your Salesforce records.

• Background & Borders: Change the background color, border color, border style, and corner radius (for rounded corners) of each card.

• Text: Adjust the font styles for the various fields displayed on the cards to emphasize important information.

By combining these styling options, you can transform a standard Kanban board into a visually compelling tool that is both highly functional and perfectly aligned with your application's design