# Kanban Board

Visually depict work at various stages of a process using cards to represent work items and columns to represent each stage of the process.

![lowcodera Kanban Board](/files/EqCbNWMhK8n0f1xhWtjL)

## Configuration of Datasets

There are 3 Dataset which need to be configured to operate the lowcodera Kanban component.

**Boards dataset** – defines the number of boards and their respective properties. Boards are reflected as columns in Kanban.

**Work Items dataset** – defines the individual work items which are laid out as cards on the Kanban Board

**Labels dataset** – defines the various tags which can be added to the Work Item cards.

### Boards Dataset

 The boards dataset expects a JSON collection with various attributes which are defined below

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th width="168.34220072551398"></th><th width="151.33333333333331"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for the board</td></tr><tr><td>title</td><td>String</td><td>The name of the board which is presented at the top</td></tr><tr><td>color</td><td>String</td><td>The color of the text for the title</td></tr><tr><td>backgroundColor</td><td>String</td><td>The background color of the board</td></tr><tr><td>icon</td><td>String</td><td>The icon which is presented next to the title at the top.</td></tr><tr><td>enableAdd</td><td>Boolean</td><td>Determines whether the board supports the option to add new work items to its</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
ClearCollect(
    CollBoards,
    {
        id: "1",
        title: "Not started",
        color: "#000",
        backgroundColor: "#ffffe0",
        icon: "folder-open",
        enableAdd: true
    },
    {
        id: "2",
        title: "In progress",
        color: "#000",
        backgroundColor: "#add8e6",
        icon: "tasks",
        enableAdd: true
    },
    {
        id: "3",
        title: "Completed",
        color: "#000",
        backgroundColor: "#e6ffe6",
        icon: "check-circle",
        enableAdd: true
    },
    {
        id: "4",
        title: "Blocked",
        color: "#000",
        backgroundColor: "#f08080",
        icon: "ban",
        enableAdd: true
    }
);
```

{% endtab %}
{% endtabs %}

### Work Items Dataset

The Work Items dataset expects a JSON collection with various attributes which are defined below.

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th width="236"></th><th width="150"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for the Work Item</td></tr><tr><td>title</td><td>String</td><td>The Title of the Work Item that appears on the card</td></tr><tr><td>description</td><td>String</td><td>The description of the Work Item that appears on the card</td></tr><tr><td>assignedTo</td><td>String</td><td>The text which will represent who the Work Item is assigned to</td></tr><tr><td>labels</td><td>String</td><td>The tags which are associated with this Work Item</td></tr><tr><td>dueDate</td><td>Date</td><td>The due date of the work item</td></tr><tr><td>icon</td><td>String</td><td>Defines the icon to represent the work item</td></tr><tr><td>iconColor</td><td>String</td><td>Defines the color of the Work Item icon</td></tr><tr><td>color</td><td>String</td><td>Sets the color of the outside border of the card</td></tr><tr><td>order</td><td>Number</td><td>Defines the position of the Work Item on the board</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
ClearCollect(
    collWorkItems,
    {
        id: "1000",
        title: "Charts does not have label",
        boardId: "1",
        description: "<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry",
        assignedTo: "RB",
        labels: "1,2",
        date: "2021-01-01T00:00:00",
        icon: "file",
        iconColor: "green",
        color: "red",
        order: 2
    },
    {
        id: "1002",
        title: "Some enhancements",
        boardId: "2",
        description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
        assignedTo: "MC",
        labels: "1",
        date: "2021-01-01T00:00:00",
        icon: "bug",
        iconColor: "red",
        color: "green",
        order: 1
    }
)
```

{% endtab %}
{% endtabs %}

### Labels dataset

The Labels dataset expects a JSON collection with various attributes which are defined below.

{% tabs %}
{% tab title="Properties" %}

<table data-header-hidden><thead><tr><th></th><th width="175.33333333333331"></th><th></th></tr></thead><tbody><tr><td><strong>Attribute</strong></td><td><strong>Type</strong></td><td><strong>Description</strong></td></tr><tr><td>id</td><td>String</td><td>The unique identifier for label</td></tr><tr><td>title</td><td>String</td><td>The name of the label</td></tr><tr><td>color</td><td>String</td><td>The color of the text for the title</td></tr><tr><td>backgroundColor</td><td>String</td><td>The background color of the label</td></tr><tr><td>icon</td><td>String</td><td>The icon for the label</td></tr></tbody></table>
{% endtab %}

{% tab title="Sample" %}

```
ClearCollect(
    labels,
    {
        id: "1",
        title: "Bug",
        color: "white",
        backgroundColor: "maroon",
        icon: "file"
    },
    {
        id: "2",
        title: "BAU",
        color: "white",
        backgroundColor: "blue",
        icon: "archive"
    },
    {
        id: "3",
        title: "Enhancement",
        color: "white",
        backgroundColor: "green",
        icon: "arrow"
    }
);
```

{% endtab %}
{% endtabs %}

## Component Properties

&#x20;The lowcodera Kanban component has various configuration properties which are documented below.

| **Property**                    | **Description**                                      |
| ------------------------------- | ---------------------------------------------------- |
| Items Dataset                   | The Work Items dataset                               |
| Boards Data set                 | The Boards dataset                                   |
| Labels Data Set                 | The Labels dataset                                   |
| Draggable                       | Sets whether items are draggable between boards      |
| Min Width                       | Specifies the minimum width for a board              |
| Board Title Font Size           | Font size of Board title                             |
| Work Item ID Font Size          | Font size of Work Item ID                            |
| Work Item Title Font Size       | Font size of Work Item Title                         |
| Work Item Description Font Size | Font size of Work Item Title                         |
| Show Work Item Icon             | Sets visibility of Work Item icon                    |
| Show Work Item ID               | Sets visibility of Work Item ID                      |
| Show Tags                       | Sets visibility of Work Item labels                  |
| Work Item Title Clickable       | Specifies whether titles of Work Items are Clickable |
| Show Work Item Description      | Sets visibility of Work Item Description             |
| Show Work Item Assigned To      | Sets visibility of Work Item Assignee                |
| Show Work Item Due Date         | Sets visibility of Work Item Due Date                |
| Work Item Due Date Format       | Date format of due date. Default is “DD/MM/YYYY”     |

## Output Properties & Events

For handling changes and user interactivity on the Kanban, you can make use of the EventType output property. For example, when a user drags a card between boards you may wish to patch these changes to a data source. There are also other output properties which you can use in your PowerFX for handling changes in the OnChange property of the component.

| Property             | Description                                                                                                                                                                                                                                       |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| EventType            | <p>WorkItemDragged</p><p>Set when a Work Item card is dragged by a user</p><p> </p><p>AddWorkItem</p><p>Set when a user selects a Boards Add new item icon</p><p> </p><p>WorkItemSelected</p><p>Set when the user clicks on a Work Item Title</p> |
| CurrentBoardID       | Returns the board ID of the current item                                                                                                                                                                                                          |
| CurrentWorkItemOrder | Returns the position of the current item on the board                                                                                                                                                                                             |
| CurrentWorkItemID    | Returns the Work Item ID of the current board                                                                                                                                                                                                     |

&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.lowcodera.com/kanban-board.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.