Unleashing the Power of a Kanban Board Widget
There are 2 versions of the Kanban Board widget:
Kanban board (the original, first version) > does not support drag&drop
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 |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Property | Datatype | Description |
---|---|---|
Text Input | Result |
---|---|
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.
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.
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
Description
Text
Tooltip
Text
User
Text
Message
Text
Message context
Text
Change the color of the message. You can find the possible values below.
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.
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
*Custom date format
Text
dd-mm-yy hh:mm:ss
"Default"
"Primary"
"Success"
"Info"
"Warning"
"Danger" message and error background
In this example Tostring(concept)
is used.
When empty uses Description.
Choose date format Long with time: Short without time: