Swimlane

lowcodera Swimlane Component

Last updated 1 year ago

A versatile component for creating interactive matrixes for a wide range of business scenarios e.g. SWOT Analysis, Portfolio Prioritization

Configuration of Datasets

There are 6 Datasets which can be configured to operate the lowcodera Swimlane component.

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

Columns dataset – defines the collection of columns displayed on the Swimlane

Rows dataset - defines the collection of rows displayed on the Swimlane

Toolbar dataset – defines the collection of user defined context menu options.

Connections dataset – defines the collection of relationships between Work Items

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

Columns Dataset

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

Attribute

Type

Description

String

The unique identifier for column

title

String

The name of the column header

color

String

The color of the text for the title in the column header

background

String

The background color of the column header

icon

string

widthUnits

Number

The number of sub-columns available for this column

cellsHeaders

Array/Object

Defines the cell header titles for any rows in this column

cellsBackgrounds

Array/Object

Defines the background settings for all rows in this column

Table(
    {
        title: "Positive",
        id: "Positive",
        background: "#353839",
        widthUnits: 3,
        color: "white",
        icon: "plus",
        cellsHeaders: [
            "Strengths",
            "Opportunities"
        ],
        cellsBackgrounds: [
            "#1fb6ff",
            "#13ce66"
        ]
    },
    {
        title: "Negative",
        id: "Negative",
        background: "#353839",
        widthUnits: 3,
        color: "white",
        icon: "minus",
        cellsHeaders: [
            "Weakness",
            "Threats"
        ],
        cellsBackgrounds: [
            "#fab900",
            "#ff7e33"
        ]
    }
)

Rows Dataset

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

Attribute

Type

Description

String

The unique identifier for the row

title

String

The name of the row header

color

String

The color of the text for the title in the row header

background

String

The background color of the row header

icon

string

Table(
    {
        id: "Internal",
        title: "Internal",
        color: "white",
        background: "#353839",
        icon: "sign-in-alt"
    },
    {
        id: "External",
        title: "External",
        color: "white",
        icon: "sign-out-alt",
        background: "#353839"
    }
)

Work Items Dataset

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

Attribute

Type

Description

String

The unique identifier for the Work Item

cardType

String

The type of card that will get displayed. Choose from "basic card", "striped card", "image", "persona", "sticky note"

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. Supports HTML.

columnId

String

reference to the id of the column this item will appear in

rowId

String

reference to the id of the row this item will appear in

areaNumber

Number

Denotes the sub-column the item appears in

order

Number

Denotes the order of the item within it's column/sub-column

background

String

stripeColor

String

When the card type is set "striped card", defines the color of the stripe

image

String

url for image to be displayed on the card

assignedTo

String

The text which will represent who the Work Item is assigned to

dueDate

Date

The due date of the work item

labels

String

The tags which are associated with this Work Item. References the ID's of items in the labels dataset

icon

String

Table(
    {
        id: "1000",
        title: "Patented technology",
        description: "We have patents on Non-Invasive Corneal Sculpting (NICS) and two novel devices",
        columnId: "Negative",
        rowId: "External",
        areaNumber: 1,
        order: 1,
        cardType: "striped card",
        titleColor: "#000",
        stripeColor: "#e93939",
        icon: "star"
    },
    {
        id: "1001",
        title: "FDA approval",
        description: "No need to wait for FDA approval",
        columnId: "Positive",
        rowId: "Internal",
        areaNumber: 2,
        order: 1,
        cardType: "striped card",
        titleColor: "#000",
        stripeColor: "#f0f0f0",
        icon: "star"
    }
)

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

Attribute

Type

Description

eventName

String

The unique identifier for the item which will be used for the "OnChange" Event

title

String

The display name of the context menu item

icon

String

color

String

The color of the title and icon

mode

String

Used to specify if the menu item applies to work items, the column cell, or both. Accepted values are "Item", "Cell", "Both".

Table(
    {
        eventName: "AddWorkItem",
        title: "Add WorkItem",
        icon: "plus",
        color: "#2b2d42",
        mode: "Both"
    },
    {
        eventName: "DeleteWorkItem",
        title: "Delete WorkItem",
        icon: "trash",
        color: "#F0706A",
        mode: "Item"
    },
    {
        eventName: "vote",
        background: "#fff",
        title: "Vote",
        icon: "vote-yea",
        color: "#2b2d42",
        mode: "Item"
    }
)

Connections dataset

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

Attribute

Type

Description

workItemAId

String

The WorkItem ID of the source item

workItemBId

String

The WorkItem ID of the destination item

color

String

The color of the line

dashWidth

Number

The width of the line endpoint

thickness

Number

The thickness of the line

ClearCollect(
    colWorkItemConnections,
    {
        workItemAId: "1001",
        workItemBId: "1004",
        color: "red",
        dashWidth: 2,
        thickness: 1
    },
    {
        workItemAId: "1001",
        workItemBId: "1006",
        color: "red",
        dashWidth: 2,
        thickness: 1
    }
)

Labels dataset

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

Attribute

Type

Description

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

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

Component Properties

The lowcodera Swimlane component has various configuration properties which are documented below.

Property

Description

Items Dataset

The Work Items dataset

Columns Dataset

The Columns dataset

Rows Dataset

The Rows dataset

Toolbar Dataset

The Toolbar dataset

Connections

The Connections dataset

Labels Data Set

The Labels dataset

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 description

Work Item Tags Font Size

Font size of Work Item Tags

Work Item Footer Font Size

Font size of Work Item footer content

Work Item Padding

Sets the padding of overall card

Work Item Sections Padding

Sets the padding between sections of the card

Work Item Background

Min Work Item Height

Sets the minimum height for the card

Show Work Item ID

Sets visibility of Work Item ID

Show Work Item Icon

Sets visibility of Work Item icon

Show Row Header

Sets the visibility of the row header

Show Column Header

Sets the visibility of the column header

Show Tags

Sets visibility of card labels

Work Item Title Clickable

Specifies whether the title of the card is clickable

Show Work Item Description

Sets visibility of Description

Show Work Item Assigned To

Sets visibility of car Assignee

Show Work Item Due Date

Sets visibility of Due Date

Work Item Due Date Format

Date format of due date. Default is “DD/MM/YYYY”

Row Header Title Orientation

Horizontal or Vertical orientation for row header titles

Work Item Title Align

Sets the alignment for the title on the card [Left, Center, Right]

Work Item Description Align

Sets the alignment for the description on the card [Left, Center, Right]

Background

Cells Background

Cells Header Font Size

Sets the font size of any cell headers if they are defined in the columns dataset

Cells Header Font Color

Sets the font color of any cell headers if they are defined in the columns dataset

Cells Header Align

Sets the alignment of any cell headers if they are defined in the columns dataset. Left, Center, Right]

Cells Header Font Weight

Sets the font weight of any cell headers if they are defined in the columns dataset. [Bold, Normal]

Show Master Column

Boolean to specify the visibility of the Swimlane master column

Master Column Title

The title of the master column

Master Column Icon

Master Column Background

Master Column Cell Title

The title of the master column internal cell header

Master Column Cell Title Color

The color of the title for the master column internal cell header

Master Column Cell Background

Master Column Width

Sets the width of the master column

Min Row Height

Specifies the minimum height of a row in the Swimlane

Output Properties & Events

For handling changes and user interactivity on the Swimlane, you can make use of the EventType output property. As well as default events, custom events can be defined in the Toolbar Dataset. For example, when a user drags a card between columns 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

Triggered when a card is dragged by a user

WorkItemSelected

Triggered when the user clicks on a card Title

CurrentColumnID

Returns the Column ID of the item

CurrentRowID

Returns the Row ID of the item

CurrentWorkItemID

Returns the ID of the current item

CurrentAreaNumber

Returns the Area Number (sub column) of the current item