Comment on page
Kanban Board
Unleashing the Power of a Kanban Board Widget
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:
https://kanban-widget-demo.staging.wem.io/
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.
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.
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 |  Tostring(concept)
is used. |
Description | Text |  |
Tooltip | Text |  |
User | Text |  |
Message | Text |  |
Message context | Text | |
Notification count | Number |  |
Attachment count | Number |  |
Selected Column | Text datafield | Field to store selected column (concept-id) to be used for drag&drop in the Change Columns flow.
ONLY available in DragDrop version. |
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. |
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. |
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:
  |
*Custom date format | Text | dd-mm-yy hh:mm:ss |
Text Input | Result |
|---|---|
"Default" |  |
"Primary" |  |
"Success" |  |
"Info" |  |
"Warning" |  |
"Danger" message and error background |  |
Last modified 6mo ago