Kanban Board

lowcodera Kanban Board Component

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

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

Properties

Attribute	Type	Description
id	String	The unique identifier for the board
title	String	The name of the board which is presented at the top
color	String	The color of the text for the title
backgroundColor	String	The background color of the board
icon	String	The icon which is presented next to the title at the top.
enableAdd	Boolean	Determines whether the board supports the option to add new work items to its

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
    }
);

Work Items Dataset

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

Properties

Attribute	Type	Description
id	String	The unique identifier for the Work Item
title	String	The Title of the Work Item that appears on the card
description	String	The description of the Work Item that appears on the card
assignedTo	String	The text which will represent who the Work Item is assigned to
labels	String	The tags which are associated with this Work Item
dueDate	Date	The due date of the work item
icon	String	Defines the icon to represent the work item
iconColor	String	Defines the color of the Work Item icon
color	String	Sets the color of the outside border of the card
order	Number	Defines the position of the Work Item on the board

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
    }
)

Labels dataset

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

Properties

Attribute	Type	Description
id	String	The unique identifier for label
title	String	The name of the label
color	String	The color of the text for the title
backgroundColor	String	The background color of the label
icon	String	The icon for the label

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"
    }
);

Component Properties

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	WorkItemDragged Set when a Work Item card is dragged by a user AddWorkItem Set when a user selects a Boards Add new item icon WorkItemSelected Set when the user clicks on a Work Item Title
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