×
Menu
Index

5.1. Kanban Project board

 

What is a Kanban board?

 

According to Wikipedia:

 
Kanban (Japanese signboard) is a lean method to manage and improve work across human systems. This approach aims to manage work by balancing demands with available capacity, and by improving the handling of system-level bottlenecks.
 
Work items are visualized to give participants a view of progress and process, from start to finish - usually via a Kanban board. Work is pulled as capacity permits, rather than work being pushed into the process when requested.
 
Project board
 

Setup of a Kanban Board

 
If you want to use a Kanban, you need to configure the columns you want. It's up to you to decide how much columns you want. In most cases this will be 3 up to 5 columns. For each column you can define the value of the status.
 
Each item will also get this status, to define in which column it must be shown. Moving an item from one column to another, will also change the status of that item. If there is a maximum number of items that can be added to a column, if the maximum is reached, it won't be possible to add extra items. Last is to define if it should be possible to collapse the column.
 
Next step is to define the data you want to hold for each item. There is some typical data as: who, what and status. However you can keep a lot of extra information for each item. When adding or editing a Kanban item you will get a modal form. The content and the layout of the form is defined by the iApi.
 
Sample for the configuration of a project named EON with four project columns.
 
 
Result in project board with the above configuration.
 
 
The following code in the menu creates a project board.
 
{
    "title": "Project demo",
    "endpoint": "/files/projects",
    "itemid": "EON",   
    "pagetype": "kanban",                    
    "id": "kanbaneon",                    
    "buttons": [
       "add",                   
       "exit",
       ],
    "onclick": {
       "endpoint": "/files/projdata",
       "pagetype": "modalform",
       "pagesize": "lg",
       "buttons": [
          "save",
          "exit"
          ]
       }
}
 
 
  • title: Menu option
  • endpoint: Endpoint where to get the definition of the columns
  • itemid: Name of the Kanban Board
  • pagetype: Type of the page, kanban for a kanbanboard, modalkanban to open the board in a modal form
  • id: Unique name (internal)
  • buttons: Buttons that must be available
  • onclick: With the Kanban the onclick is used to get the data to fill the board.
  • endpoint: Endpoint where to get the data. BOA will add the name of the project as a key
  • pagetype: Adding and editing data will be in a modalform
  • pagesize: The size of the modal form is lg (large)
  • buttons: Buttons for the form.
 
 
 
 
 
Kanban project board in a modal form.
 

Columns Kanban project

 
At startup BOA will send the request from the menu to the endpoint to get the data for the configuation of the Kanban.
 
Request: url/endpoint?key=itemid
 
Sample: url/files/projects?key=EON
 
Result: columns for the Kanban project.
 
{
    "file": "projects",
    "data": [
       {
       "id": "1",
       "name": "EON",
       "text": "Wish list",
       "status": "1",
       "maxitems": 5,
       "collaps": false
       },
       {
       "id": "2",
       "name": "EON",
       "text": "To Do",
       "status": "2",
       "maxitems": 0,
       "collaps": true
       },
       {
       "id": "3",
       "name": "EON",
       "text": "In progress",
       "status": "3",
       "maxitems": 3,
       "collaps": false
       },
       {
       "id": "4",
       "name": "EON",
       "text": "Done",
       "status": "4",
       "maxitems": 0,
       "collaps": true
       }
     ]
 }
 
  • file: name of the used data table
  • data: array with json objects for the columns.
  • column data: For each column the following data must be provided:
  • id: unique id
  • name: name of the project board
  • text: header of the column
  • status: status to set for items of this column
  • maxitems: if the number of items in the column must be limited.
  • collaps: if collapse for the column must be provided.
 
 
 
Project board with second column collapsed.
 

Items of the Kanban

 
When the project is started and the request to get the columns is send and received, BOA will fill the board with the existing items. The request is send to the onclick endpoint from the kanban json data.
 
Request: url/onclick.endpoint?key=itemid&labels=1
 
Sample: url/files/projdata?key=EON&labels=1
 
Result: items for the Kanban project.
 
{
 "file": "projdata",
 "labels": [
     {
     "display": "",
     "fieldname": "id",
     "length": 8,
     "inputtype": "hidden"
     },
     {
     "display": "Label:",
     "tooltip": "",
     "fieldname": "label",
     "length": 2,
     "pattern": "[0-9]{1,2}",
     "inputtype": "text",
     "kanbantype": "tags",
     "newline": true,
     "labelwidth": 2,
     "fieldwidth": 2
     },
     {
     "display": "Subject:",
     "tooltip": "",
     "fieldname": "subject",
     "length": 40,
     "inputtype": "text",
     "kanbantype": "text",
     "newline": true,
     "labelwidth": 2,
     "fieldwidth": 8
     },
     {
     "display": "Description",
     "tooltip": "",
     "fieldname": "descrip",
     "length": 0,
     "inputtype": "multiline",
     "kanbantype": "content",
     "newline": true,
     "labelwidth": 2,
     "fieldwidth": 4,
     "fieldheight": 10
     },
     {
     "display": "Status:",
     "tooltip": "",
     "fieldname": "status",
     "length": 1,
     "pattern": "[0-9]{1}",
     "inputtype": "text",
     "kanbantype": "status",
     "newline": true,
     "labelwidth": 2,
     "fieldwidth": 4
     },
     {
     "display": "Color:",
     "tooltip": "",
     "fieldname": "color",
     "length": 7,
     "inputtype": "text",
     "kanbantype": "color",
     "newline": true,
     "labelwidth": 2,
     "fieldwidth": 2
     },
     {
     "display": "Sort Order:",
     "tooltip": "",
     "fieldname": "sortorder",
     "length": 8,
     "inputtype": "sort",
     "newline": true,
     "labelwidth": 2,
     "fieldwidth": 2
     }
 ],
 "data": [
     {
     "id": "4",
     "label": 1,
     "subject": "Status 2 Label 1",
     "descrip": "Status 2 Label 1",
     "status": "1",
     "color": "#5dc3f0",
     "sortorder": 4
     },
     {
     "id": "35",
     "label": 5,
     "subject": "Testing kanban",
     "descrip": "Description for testing",
     "status": "1",
     "color": "       ",
     "sortorder": 35
     },
     {
     "id": "39",
     "label": 5,
     "subject": "BBB1",
     "descrip": "BBB12222",
     "status": "2",
     "color": "       ",
     "sortorder": 39
     }
     …
     ]
 ]
 }
 
 
  • file: name of the used data table
  • labels: labels as used with the forms. See the documentation for the form definitions.
  • widgettype: this is a special type specific for the Kanban. Each item has several elements. These elements are named widgettype. This way the different elements can be named:
  • text: the subject of the item. This comes in the header.
  • content: the content of the item, this is the body of the item.
  • tags: keywords to place in the footer of the item.
  • status: defines in which column the item must be shown. See the column configuration for the definition of the status. When an item is moved from one column to another, the status will change. This will be updated by a PUT.
  • color: color value in hex. format.
 
 
inputtype sort: this is a form element to define the sortorder in the columns. An item can be moved in the column. To save the new position there is a special inputtype needed. This will be send to the endpoint with a PUT. When an item is moved in a column, all the items from that column can get a new order. In that case all the new positions will be send to the endpoint in one request.
 
data: There can be extra data elements that can be used when editing or adding an item. A complete form will appear, and all the data can be filled in. So also data that isn't visible in the project board itself.