Using Kanban Board: Software Development Project Management

In this example scenario, we will describe how to manage tasks and categories in a software development project using a Kanban Board. We will discuss how to configure the Kanban Board using Tasks and Categories data sources, how to customize the ordering of tasks, and how to manage events.

Scenario Software Development Project

The following categories will be used in a software development project:

  • Todo (To Be Done)
  • In Progress
  • Completed

Each category will have specific tasks and these tasks will represent work steps in the software development process.

    1. Adding and Configuring the Kanban Board Element

We start the project by adding the Kanban Board element from the UI Design module.

Tasks belonging to each category will be pulled from the Tasks data source and each task will be placed in the category it belongs to.

Lane Settings (Category Configuration)

  • Action: Connect to the “Categories” data source for category data.
  • Field To Lane ID: Use the “id” field in the Categories data source to determine the unique ID of the categories.
  • Field To Lane Index: Use the “index” field to sort the categories.
"Action": "Categories",  
"Field to Lane ID": "id",  
"Field to Lane Index": "index"

Card Settings (Task Configuration)

  • Action: Connect the “Tasks” data source for task data.
  • Field To Card ID: The unique ID of each task will be retrieved from the “task_id” field in the Tasks data source.
  • Field To Card Lane ID: The category ID of each task will be retrieved from the “lane_id” field.
  • Field To Card Index: The “task_index” field will be used to sort the tasks.
 "Action": "Tasks",  
 "Field to Card ID": "task_id", 
 "Field to Card Lane ID": "lane_id",  
 "Field to Card Index": "task_index"

       2. Managing Kanban Board Events

Handling events that occur when tasks (cards) and categories (lanes) are moved allows the Kanban Board to work dynamically and facilitates the tracking of projects.

onCardDragged Event (When Task Moved)

This event is triggered when a task is moved to another category . For example, when a task in the “Todo” category is moved to the In Progress category, the following data structure is obtained.

"onCardDragged": {    
"cardId": "task1",     
"cardIndex": 2,   
"cardLaneId": "lane_todo",     
"cardTargetIndex": 1,   
"cardTargetLaneId": "lane_in_progress"  

Using this data structure, it can be tracked that the task has been moved to its new category and the record in the database can be updated.

onLaneDaragged Event (When Category Moved)

This event is triggered when the order of the categories changes. For example, when the “In Progress” category is moved to come after the “Todo” category, the following data structure is created:

"onLaneDragged": {    
"laneId": "lane_in_progress",       
"laneIndex": 1,              
"laneTargetIndex": 2   

This event can be used to update the sorting of categories and manage changes to the interface.

    3. Filtering and Customizing Tasks

Filtering and customizing tasks based on certain criteria can improve the user experience. For example, you may want to see only high priority tasks.

Filtering Example

"filter": {    
"priority": "high"

This structure shows only high priority tasks.

   4. Database Updates and Synchronization

Task movements in Kanban Board should always be synchronized with the database. onCardDragged and onLaneDragged events provide data updates by reflecting the sorting information of tasks and categories to the database.

For example, you can update the database when a task is moved to a category:

‍"updateCard": {   
"cardId": "task1",      
"newLaneId": "lane_in_progress",      
"newIndex": 1 

With Kanban Board:

  • Organize workflow through task sequencing and category interaction,
  • With database synchronization, it can ensure that data is kept up to date,
  • You can create a dynamic structure with event management.

In this example scenario, configurations were presented over Tasks and Categories data sources. However, for more complex projects, extended scenarios can be created by integrating different data sources.