跳到主要内容
版本:v1.x.x

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.

ToolJet - Widget Reference - Kanban widget

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.

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

信息

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

ToolJet - Widget Reference - Kanban widget

Properties

ToolJet - Widget Reference - Kanban widget
警告

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.

PropertiesdescriptionExpected value
ColumnsEnter 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 dataEnter 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 CardThis 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.

ToolJet - Widget Reference - Kanban widget

Layout

ToolJet - Widget Reference - Kanban widget
LayoutdescriptionExpected value
Show on desktopToggle 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 mobileToggle 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

ToolJet - Widget Reference - Kanban widget
StyleDescription
DisableIf 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}} .
VisibilityThis 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}}).
WidthThis property sets the width of the column.
Min widthThis property sets the min width of the column.
Accent colorYou 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

ToolJet - Widget Reference - Kanban widget
VariableDescription
columnsThe 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}}
lastAddedCardThe 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}}
lastRemovedCardThe 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}}
lastCardMovementThe 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}}
lastUpdatedCardThe variable lastUpdatedCard holds id, title, and columnId of the latest modified card. You can get the values using {{components.kanbanboard1.lastUpdatedCard.columnId}}
selectedCardThe 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}}