Skip to main content

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

ToolJet - Kanban widget

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.

ToolJet - Kanban widget

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 deafult its enabled, you can programmatically set {{true}} or {{false}} enable/disable button by clicking on the Fx next to it

General

Tooltip: Set a tooltip text to specify the information about the data/kanban when the user moves the mouse pointer over the widget.

Layout

ToolJet - 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 - List view 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.
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 - List view 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. Similary 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 addded 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}}