> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/kanban-board.md).

# 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;