Swimlane

lowcodera Swimlane Component

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

Properties

Attribute	Type	Description
id	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	Reference to Font Awesome icon to appear on column header
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

Sample

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

Properties

Attribute	Type	Description
id	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	Reference to Font Awesome icon to appear on column header

Sample

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.

Properties

Attribute	Type	Description
id	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	Supports CSS expression to format the backgorund of the work item
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	The Font Awesome icon to represent the work item when using "basic card" and "striped card" types

Sample

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

Toolbar dataset

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

Properties

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	The Font Awesome icon for the context menu item
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".

Sample

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.

Properties

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

Sample

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.

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 Font Awesome icon to use on the label

Sample

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.

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.