Kanban Board Element Properties

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: Yeni bir lane eklemek için kullanılır.

‍

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 KanbanCardSET laneId = @targetLaneId,     cardIndex = @targetCardIndex WHERE id = @draggedCardId; ‍UPDATE KanbanCardSET cardIndex = cardIndex - 1 WHERE laneId = @currentLaneId   AND cardIndex > @currentCardIndex   AND id != @draggedCardId; ‍UPDATE KanbanCardSET 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.