Kanban Board

1. Log in to the Kuika platform.
2. Open the project you will work on from the Apps screen.
3. Go to the UI Design module.

4. Select the Special category from the Elements panel on the left side.
5. Drag and drop the Kanban Board element into the workspace.

‍

The customizable properties of Kuika's Kanban Board element make it easy to manage data connections and workflows. It allows dynamic organization of tasks (card) and categories (lane).

To be able to edit the properties of the Kanban Board element, you need to create SQL actions and tables in the Datasources module.

1. Go to the Datasources module.

2. Click on the “+” icon opposite the Tables field under the Sources heading and select New Table.

3. Then create the sample tables above.
4. Then click on the “+” icon opposite the Actions field under the Sources heading and select New SQL Actions.

The following sample SQL actions can be used to add, update and delete data on Kanban Board or you can create your own actions:

Lane Options Actions:

1. GetKanbanLanesAll: Get all lane data.

SELECT * FROM KanbanLane;

2. CreateKanbanLane: Used to add a new lane.

INSERT INTO KanbanLane (Id, laneIndex, title, description)VALUES (    NEWID(),     (SELECT COALESCE(MAX(laneIndex), -1) + 1 FROM KanbanLane),     @title,     @description);

‍

3. DeleteKanbanLane: When a lane is deleted, it also deletes all tasks in it and updates the lane indexes.

‍

DELETE FROM KanbanCardWHERE laneId = @Id;‍DECLARE @DeletedLane TABLE (    Id UNIQUEIDENTIFIER,    laneIndex INT);‍DELETE FROM KanbanLaneOUTPUT DELETED.Id, DELETED.laneIndex INTO @DeletedLaneWHERE Id = @Id;‍UPDATE KanbanLaneSET laneIndex = laneIndex - 1WHERE laneIndex > (SELECT laneIndex FROM @DeletedLane);‍

4. DragKanbanLane: Used to change the order of the lanes.

UPDATE KanbanLaneSET laneIndex = laneIndex + 1WHERE laneIndex >= @newLaneIndex    AND laneIndex < @draggedLaneIndex    AND id != @draggedElementId;‍UPDATE KanbanLaneSET laneIndex = @newLaneIndexWHERE id = @draggedElementId;‍UPDATE KanbanLaneSET laneIndex = laneIndex - 1WHERE laneIndex > @draggedLaneIndex    AND laneIndex <= @newLaneIndex    AND id != @draggedElementId;‍

‍

Card Options Actions:

1. GetKanbanCardsAll: Gets all task data.

SELECT * FROM KanbanCard;

2. 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);

‍

3. DeleteKanbanCard: Ensures that the index is updated when deleting a task.

DECLARE @DeletedCard TABLE (    laneId UNIQUEIDENTIFIER,    cardIndex INT);‍DELETE FROM KanbanCardOUTPUT DELETED.laneId, DELETED.cardIndex INTO @DeletedCardWHERE Id = @Id;‍UPDATE KanbanCardSET cardIndex = cardIndex - 1WHERE cardIndex > (SELECT cardIndex FROM @DeletedCard)  AND laneId = (SELECT laneId FROM @DeletedCard);

‍

4. DragKanbanCard: Allows tasks to be dragged and moved to different lanes or queues.

UPDATE KanbanCard
SET laneId = @targetLaneId, 
    cardIndex = @targetCardIndex 
WHERE id = @draggedCardId; 

UPDATE KanbanCard
SET cardIndex = cardIndex - 1 
WHERE laneId = @currentLaneId 
  AND cardIndex > @currentCardIndex 
  AND id != @draggedCardId; 

UPDATE KanbanCard
SET cardIndex = cardIndex + 1 
WHERE laneId = @targetLaneId 
  AND cardIndex >= @targetCardIndex 
  AND id != @draggedCardId;

The above actions allow you to integrate your Kuika Kanban Board with a SQL database. Thus, you can dynamically manage your tasks and categories, update your data and create a workflow that fits the needs of your system.

Then you can make the following edits from the Properties panel of the UI Design module Kanban Board element.

Lane Options

• Action: It is a datasource property used to link lane (category) data in Kanban Board. It connects to the source that provides data for each lane.
• Field to Lane ID: It is the key-value pair of the ID property in the lane data retrieved with the datasource. It allows lanes to be uniquely identified. A property key of String or Guid type must be connected.
• Field to Lane Index: It is the key-value pair of the index property in the lane data extracted with Datasource. Allows sorting of lanes and a property key of type Number must be bound.

Card Options

• Action: It is the datasource property used to link card (task) data in Kanban Board. It connects to the source that provides data for each task.
• Field to Card ID: It is the key-value pair of the ID property in the card data retrieved with the datasource. It allows each card to be uniquely identified. A property key of String or Guid type must be bound.
• Field to Card Lane ID: It is the key-value pair of the property that specifies which lane the cards pulled with Datasource belong to. A property key of String or Guid type must be bound.
• Field to Card Index: This is the key-value pair of the sorting (index) property in the card data retrieved with Datasource. It allows cards to be sorted within the lane and a property key of type Number must be bound.
• Field to Card Sort Key: Allows the cards retrieved from the datasource to be sorted according to the property key selected to sort them into lanes. For example, alphabetical sorting can be done according to a property such as title. This feature is optional and can be sorted according to the selected property key.

Events

• onCardDragged: An event triggered when a card (task) is dragged. Provides relevant information when tasks are moved to their new location.
  
  • cardId: Unique ID of the moved card.
  • cardIndex: The card's old sequence number.
  • cardLaneId: ID of the lane to which the card is attached.
  • cardTargetIndex: Card's new sequence number.
  • cardTargetLaneId: ID of the lane to which the card is newly attached.
• onLaneDragged: An event triggered when a lane (category) is dragged. Keeps track of the new order and position of the lanes.
  
  • laneId: Unique ID of the moved lane.
  • laneIndex: Lane's old sequence number.‍
  • laneTargetIndex: Lane's new sequence number.

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.

Authorization

• Anonymous Access: Allows users to access without entering account information.
• All Roles Access: Provides access by verifying users' account information.
• For element-level authorization, edit Authorization settings in the Properties panel.

Visibility

• Always Visible: Element is always visible.
• Hidden: Element is hidden.
• Sometimes Visible: The element is visible depending on a specific condition.

To configure the setting:

1. Select the element on the screen.
2. Open the Properties panel on the right edge.
3. In the Visibility field, select an option according to your needs.

Editability

• Enabled: Elements can be edited.
• Disabled: Element cannot be edited.
• Sometimes Enabled: The element can be edited or uneditable according to certain conditions.

Interface Design with Style Panel

By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:

• Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
• Text: Font, style, color, size and spacing settings.
• Fill: Customize the background with color or images.
• Border: Add borders and corner radius settings.
• Shadow: Add a shadow effect to add depth to elements.

By following these steps, you can configure the Area Chart element to suit your needs.

Actions

Kuika supports the following system actions:

• Arithmetic, Authorization, Condition, Device, Export, Geolocation, Inversion, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.
  
• You can also use SQL actions that you create yourself.
  
• You can use the +ADD ACTION button from the Properties panel to add an action.
  

Actions support may not be available in some elements.