Kuika's Kanban Board element allows you to visually manage your tasks and projects. This element groups tasks under categories (lanes) with its card-based structure and creates a dynamic workflow using the drag-and-drop method.

Available only in web applications.

Areas of Use

• Project management and sprint planning
• Team workflow tracking
• Software development processes
• Marketing and content production management
• Training, consulting, and task sharing systems

Usage Scenario – Task Tracking Board

In a project management application, team members manage their tasks on the Kanban Board. Tasks are divided into two main categories (lanes):

• Web Design (design tasks)
• Marketing (marketing tasks)

Task cards are located under each lane, and users can drag and drop these cards to different lanes.

In the scenario:

• When the application opens, all lanes and tasks are automatically loaded from the data source.
• Users can create new tasks or edit existing ones.
• When a card is dragged, the database is updated and the interface refreshes instantly.

Connecting the Data Source

• Go to the Datasources module.
• Then click the + icon next to the Tables heading.
• Create the following tables.

• Then create the following actions in the Actions > SQL Actions tab.

Lane Actions

GetKanbanLanesAll: Retrieves all lane data.

SELECT * FROM KanbanLaneORDER BY LaneIndex ASC;

CreateKanbanLane: Used to add a new lane.

‍INSERT INTO KanbanLane (Id, Title, LaneIndex)VALUES (NEWID(),@title,(SELECT COALESCE(MAX(LaneIndex), -1) + 1 FROM KanbanLane));‍

DeleteKanbanLane: When a lane is deleted, the tasks within it are also deleted.

DELETE FROM KanbanCard WHERE LaneId = @Id;DELETE FROM KanbanLane WHERE Id = @Id;

DragKanbanLane: Used to update the lane order.

‍UPDATE KanbanLaneSET LaneIndex = @newIndexWHERE Id = @laneId;

Card Actions

GetKanbanCardsAll: Retrieves all task (card) data.

SELECT * FROM KanbanCardORDER BY CardIndex ASC;

CreateKanbanCard: Used to add a new task.

‍INSERT INTO KanbanCard (Id, LaneId, CardIndex, Title, Description)VALUES (NEWID(),@laneId,(SELECT COALESCE(MAX(CardIndex), -1) + 1 FROM KanbanCard WHERE LaneId = @laneId),@title,@description);

DeleteKanbanCard: Updates the sorting index when a card is deleted.

‍DECLARE @lane UNIQUEIDENTIFIER;DECLARE @index INT;SELECT @lane = LaneId, @index = CardIndex FROM KanbanCard WHERE Id = @Id;DELETE FROM KanbanCard WHERE Id = @Id;UPDATE KanbanCardSET CardIndex = CardIndex - 1WHERE LaneId = @lane AND CardIndex > @index;

DragKanbanCard: Allows the card to be dragged and moved to a different lane.

‍UPDATE KanbanCardSET LaneId = @targetLaneId, CardIndex = @targetCardIndexWHERE Id = @draggedCardId;

3. Using Features in a Scenario Context

Lane Options:

• Action → GetKanbanLanesAll
• Field to Lane ID → Id
• Field to Lane Index → LaneIndex

Card Options:

• Action → GetKanbanCardsAll
• Field to Card ID → Id
• Field to Card Lane ID → LaneId
• Field to Card Index → CardIndex

Events:

• onCardDragged: Triggered when the card is moved and the DragKanbanCard action runs.
• onLaneDragged: Triggered when the lane order changes and executes the DragKanbanLane action.

4. UI Design Module Operations

• Go to the UI Design module.
• Select the Elements > Special > Kanban Board element from the left panel.
• Drag and drop it onto the screen.
• In the Properties panel:
  
  • Lane Action → GetKanbanLanesAll
  • Card Action → GetKanbanCardsAll
  • Draggable → Active
  • Visual Mode → Light
  • Lane Title Field → Title
  • Card Title Field → Title
  • Card Description Field → Description

5. Scenario Flow

• When the application opens, the “Web Design” and “Marketing” lanes are loaded.
• Under Web Design:
  
  • Wireframing – Splash screen, designs
  • Dashboard – User interface layout
  • Landing Page – Homepage mockup
• Under Marketing:
  
  • Blog Content – Content for the upcoming month
  • Website Icons – 3D icon design

When the user completes the “Landing Page” task, they can drag this card to the Marketing lane. This triggers the onCardDragged action, and the task's new lane information is recorded as follows:

{“cardId”: “c3”,“cardLaneId”: “lane1”,“cardTargetLaneId”: ‘lane2’,“cardTargetIndex”: 1}‍

The database is updated, and the task immediately appears under the new lane.

Limitations

• The Kanban Board only pulls data through a lane-card relationship.
• A “Refresh Action” must be defined for real-time viewing.
• The CardIndex field should be optimized on boards with a large number of tasks.

Tips and Best Practices

• Visualize the status using colors or icons based on task statuses (e.g., “done”).
• Automatically update the database using the onCardDragged and onLaneDragged actions.
• Make lane headers dynamic to enable user- or project-based filtering.
• Add an “Add New Task” button to make it easier to create new cards.
• Keep description fields short to improve card readability.

When the Scenario is Complete

• All tasks and categories are loaded dynamically.
• Cards can be moved using drag-and-drop.
• Changes are reflected in the database instantly.
• Team members track tasks from a single board.