ToolJet/docs/versioned_docs/version-2.0.0/widgets/kanban-board.md

id	title
kanban	Kanban

Kanban

Kanban widget allows you to visually organize and prioritize your tasks with a transparent workflow. You can set the number of columns to display, enable/disable the add cards button, and bind data to the cards.

Events

To add an event, click on the widget handle to open the widget properties on the right sidebar. Go to the Events section and click on Add handler.

• Card added
• Card removed
• Card moved
• Card selected
• Card updated

Just like any other event on ToolJet, you can set multiple handlers for any of the above mentioned events.

:::info Check Action Reference docs to get the detailed information about all the Actions. :::

Properties

:::caution Please keep in mind that you need to provide an id for each card in the Card data field
and this id must be of type string. :::

Properties	description	Expected value
Columns	Enter the columns data - id and title in the form of array of objects or from a query that returns an array of objects.	{{[{ "id": "1", "title": "to do" },{ "id": "2", "title": "in progress" },{ "id": "2", "title": "Completed" }]}} or {{queries.xyz.data}}
Card data	Enter the cards data - id, title and columnId in the form of array of objects or from a query that returns an array of objects.	{{[{ id: "01", title: "one", columnId: "1" },{ id: "02", title: "two", columnId: "1" },{ id: "03", title: "three", columnId: "2" }]}} or {{queries.abc.data}}
Enable Add Card	This property allows you to show or hide the Add Cards button at the bottom of every column.	By default its enabled, you can programmatically set {{true}} or {{false}} enable/disable button by clicking on the Fx next to it

General

Tooltip

A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.

Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.

Layout

Layout	description	Expected value
Show on desktop	Toggle on or off to display the widget in desktop view.	You can programmatically set the value by clicking on Fx to set the value {{true}} or {{false}}
Show on mobile	Toggle on or off to display the widget in mobile view.	You can programmatically set the value by clicking on Fx to set the value {{true}} or {{false}}

Styles

Style	Description
Disable	If disabled or set to {{false}} the widget will be locked and becomes non-functional. By default, its disabled i.e. its value is set to {{true}} .
Visibility	This is to control the visibility of the widget. If {{false}}/disabled the widget will not visible after the app is deployed. By default, it's enabled (set to {{true}}).
Width	This property sets the width of the column.
Min width	This property sets the min width of the column.
Accent color	You can change the accent color of the column title by entering the Hex color code or choosing a color of your choice from the color picker.

Exposed variables

Variable	Description
columns	The columns variable is an array of objects that includes the columns data in the respective objects. Since the columns variable is an array you'll need to specify the index of the object in the array to get the data within that object. Each object within a column has two keys - id and title and an array cards which is again an array of objects. Example: If you want to get the title of second card then you'll use {{components.kanbanboard1.columns[1].title}} - here we have specified the array index as [1] and then key which is the title. Similarly you can get the card details using {{components.kanbanboard1.columns[0].cards[1].title}}
lastAddedCard	The variable lastAddedCard holds the properties of the card that has been added lastly. It holds the following data - id, title, and columnId of the last added card. You can get the values using {{components.kanbanboard1.lastAddedCard.title}}
lastRemovedCard	The variable lastRemovedCard holds the properties of the card that has been recently deleted from the kanban. It holds the following data - id, title, and columnId of the recently deleted card. You can get the values using {{components.kanbanboard1.lastRemovedCard.title}}
lastCardMovement	The variable lastCardMovement holds the properties of the card that has been recently moved from its original position. It holds the following data - originColumnId, destinationColumnId, originCardIndex, destinationCardIndex and an object cardDetails which includes title. You can get the values using {{components.kanbanboard1.lastCardMovement.cardDetails.title}} or {{components.kanbanboard1.lastCardMovement.destinationCardIndex}}
lastUpdatedCard	The variable lastUpdatedCard holds id, title, and columnId of the latest modified card. You can get the values using {{components.kanbanboard1.lastUpdatedCard.columnId}}
selectedCard	The variable selectedCard holds id, title, columnId, and description of the selected card in the kanban. You can get the values using {{components.kanbanboard1.selectedCard.description}}