Kanban Board

The Kanban Board widget provides a classic, agile tool for visualizing and managing workflows. It displays tasks or items as cards organized into columns that represent different stages of a process.

This widget is ideal for project management, task tracking, and any process-oriented application where you need a clear, visual overview of work in progress. Users can drag and drop cards between stages to update their status.

A Kanban Board in Heisenware

Data Binding

Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.

Input

Property	Type	Description
onCardChange	Object	Fired when a user moves a card to a different stage. The payload is the complete data object for the moved card, with its stage key updated.
onColumnClick	String	Fired when a user clicks on a column (stage). The payload is the name of the stage that was clicked.
onCardClick	Object	Fired when a user clicks on any part of a card. The payload is the data object for that card.
onTitleClick	Object	Fired when a user clicks on a card's title, if the title is configured to be clickable. The payload is the data object for that card.

Output

Property	Type	Description
cards	Array	An array of data objects, where each object is rendered as a card on the board. See the Data Structure section for details.

Data Structure

To populate the Kanban board, you must provide an array of card objects. The widget uses key fields within each object to determine its stage, title, subtitle, and status color. You specify which fields in your data correspond to these roles in the configuration.

For example, if you configure Stage Key as "stage", Title Key as "taskName", and Status Key as "priority", your data for a single card should look like this:

{
  "id": 101,
  "taskName": "Design new login screen",
  "stage": "In Progress",
  "priority": "High"
}

Configuration

Kanban Board Settings

These properties control the overall structure and behavior of the board.

Label	Description	Type	Property
Stages	An array of strings that define the columns (stages) of the Kanban board, in order.	Array	stages
Card List Width	Sets the width of each column (stage) in pixels.	Number	cardWidth
Card title is clickable	If true, makes the title of each card a clickable link that fires the onTitleClick event.	Boolean	titleIsClickable

Status Mappings

These properties define how your data fields are mapped to the card's visual elements, such as its title and status color.

Label	Description	Type	Property
Stage Key	The name of the field in your card objects that determines which stage (column) the card belongs to.	String	stageKey
Title Key	The name of the field used for the main title of the card.	String	titleKey
Subtitle Key	The name of the field used for the subtitle or description on the card.	String	subTitleKey
Status Key	The name of the field whose value is used to look up the status color from the mappings below.	String	statusKey
Status Mappings	Defines a list of status values and their corresponding colors. This is used to display a colored border on each card.	Array	statusMappings

Status Mapping Properties

Each item in the Status Mappings array links a status value to a specific color.

Label	Description	Type	Property
Status	The specific status value from your data (e.g., "High", "Urgent", "Low").	String	status
Color	The color to apply to the card's border when its status matches.	String (Color)	color