# Kanban Board
{% hint style="info" %}
There are 2 versions of the Kanban Board widget:
1. Kanban board (the original, first version) *> does not support drag\&drop*
2. Kanban board DragDrop > new version, supports Drag & Drop and Double-Click.
For the Drag\&Drop widget, a demo is accessible at:\
\
This project is also available in the App Store in MyWEM, so you can get a copy of this working example project to play with in your own workspace.
{% endhint %}
### The Kanban Board
The kanban board is a visual project management tool used to track and visualize work in progress. The board typically consists of columns representing different stages of work, and tasks- or work items which are represented by cards that move across the columns as progress is made. By providing a clear visual representation of the workflow, a kanban board helps teams visualize their work, identify bottlenecks, and promote collaboration and efficiency. \
In the following image you can see the kanban widget used for a ticket management system.
### Properties
#### General
| Property | Datatype | Description |
| ------------------ | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Datasource | List | This is the list that contains the content or data you want to show as the cards. This can be a list from your datamodel or you can use a filter as the list. |
| SelectedCard | Reference | This should be a reference field that the Datasource as Referenced list. This is used as the selected card in your session. |
| VisibleColumns | ConceptSet |
Set of concepts that represent the columns. You can use getchildren(concept parent)
or { 'concept', 'concept2', etc}
|
| Subject | Text |  |
| Column | Single select | This datafield defines the column in which a card is located. |
| Color | text | Defines the color of the card. Can be written as color name, hex value, etc. |
| Date | Date Time |  |
| Priority | Text |
In this example Tostring(concept) is used.
|
| Description | Text |  |
| Tooltip | Text |
When empty uses Description.
|
| User | Text |  |
| Message | Text |  |
| Message context | Text | Change the color of the message. You can find the [possible values](#values) below. |
| Notification count | Number |  |
| Attachment count | Number |  |
| Selected Column | Text datafield |
Field to store selected column (localname) to be used for drag\&drop in the Change Columns flow. ONLY available in DragDrop version.
|
#### Behavior original widget (without drag\&drop feature)
| Property | Datatype | Description |
| -------------- | -------- | ---------------------------------------------------------------------- |
| OnClick | Dropdown | Choose what happens when a card or kanban item is selected. |
| Exit/flowchart | Dropdown | Choose which exit or flowchart should be used when a card is selected. |
#### Behavior Drag\&Drop widget
| Property | Datatype | Description |
| ------------------------ | -------- | -------------------------------------------------------------------------------------------------------------- |
| OnColumnChange | Dropdown | Choose what happens when a card is being dragged onto another column. |
| Exit/flowchart | Dropdown | Choose exit or flowchart to be used when a card is dropped in a column. |
| OnDoubleClick | Dropdown | Choose what happens when a card is being doubleclicked on (single click is needed for grab to start dragging). |
| ClickExit/ClickFlowchart | Dropdown | Choose exit or flowchart to be used when a card is double-clicked. |
#### Appearance
| Property | Datatype | Description |
| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| HeaderText | Text | Header or title of the kanban board |
| Show Counters | Yes/No | Toggle on if the notification and Attachment count should be shown. |
| Background | Dropdown | Bootstrap context colors |
| Min width | Number | Minimum size in pixels |
| Min height | Number | Minimum size in pixels |
| Date format | Dropdown |
Choose date format Long with time: Short without time:
|
| \*Custom date format | Text | dd-mm-yy hh:mm:ss |
### Values
| Text Input | Result |
| ------------------------------------- | -------------------------------- |
| "Default" |  |
| "Primary" |  |
| "Success" |  |
| "Info" |  |
| "Warning" |  |
| "Danger" message and error background |  |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.wem.io/platform/wemtipsandtricks/widgets/global-widgets/kanban-board.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.