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.
The following categories will be used in a software development project:
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": "Categories",
"Field to Lane ID": "id",
"Field to Lane Index": "index"
Card Settings (Task Configuration)
"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:
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.