Kanban Board

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

     2. In the “UI Design” (1) module, drag and drop the Kanban Board element (4) under the “Special” (3) category from the “Elements” (2) panel on the left side.

‍

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.

You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” provides access by verifying user account information.

For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.

It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.

1. Click on the element on the screen.
2. Open the “Properties” panel on the right side.
3. Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

• Always Visible: Ensures that the screens in your app are always visible. ‍
• Hidden: Allows hiding screens in your application. ‍
• Sometimes Visible: Makes screens in your application conditionally visible.

Allows you to make elements editable.

• Enabled: Selecting this option makes the element editable.
• Disabled: In this case, the element cannot be edited.
• Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.

By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.

The sections defined below vary depending on the element.

• Layout‍: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
• Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
• Fill: You can use the Fill setting to customize the element's background with color or images.
• Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
• Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.