Swimlane

lowcodera Swimlane Component

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

Swimlane Component

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.

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	Specifies the default background of the card. Supports CSS
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	Sets the overall background of the component. Supports CSS
Cells Background	Sets the default background of cells in the Swimlane. Supports CSS
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	The Font Awesome icon used next to the master column title
Master Column Background	The background of the master column. Supports CSS
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	The background of the master column internal cell. Supports CSS
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