Kanban

The Kanban portlet is a visual task management portlet that organizes work into columns, allowing users to track the progress of tasks in real-time. It supports workflows by visualizing the status of work items as they move through different stages.

General

General data is required for all portlets, see General.

Events

A filter portlet cannot receive events from other portlets. However, it can send events to portlets, and these will be shown in this section. See Events for more information.

Advanced settings

Compact mode: In compact mode, the Kanban cards will display the same information but with a smaller font size and a more condensed card layout.

Hide task and restrictions counter: By default, the number of tasks in a column is displayed next to the column title. Check this box to hide the counter.

Data

To set up a data source, see Data.

Data source columns

Click 'Execute' in the data source section to fetch the columns. Each column can be configured with the following settings:

Manage: The columns can be configured in a grid view for a better overview.

  • Display name

  • Manage as Select the column type. There are several column types to choose from, with 'Text' being the default:

    • Text: Used to display the column as a text field.

    • Number: Used for integer number fields.

    • Decimal: Used for numbers with decimals.

    • Date: Displays the column as a date without time.

    • Date & Time: Displays both date and time.

Task mapping

  • Unique identifier: The column containing the unique ID for tasks.

  • Status: The status of the task. Status is used to organize the columns on the Kanban board.

  • Sort by: Determines the order in which tasks are displayed within each column.

  • Sort direction: Specifies whether the sorting order should be ascending or descending.

  • Group by: Groups tasks into swimlanes based on the selected value.

  • Grouping sort direction: Specifies whether the swimlane order should be ascending or descending.

Presentation

Status columns

Map status values to columns: Automatically maps all columns based on the values for Task status.

Add: Click to manually add a column.

  • Title: The display name of the column.

  • Status data source property : The data source for the status column.

  • Min cards per column: Sets the minimum number of tasks for the column. If the column contains fewer than the minimum, it will be automatically highlighted in yellow.

  • Max cards per column: Sets the maximum number of tasks for the column. If the column exceeds this limit, it will be automatically highlighted in red.

  • Text color: Changes the color of the column header text.

  • Header color: Changes the background color of the column header.

  • Visible: Determines whether the column is visible or hidden.

Card

The information to be shown on the Kanban cards is configured in this section.

In the card header and rows you can use both fixed values and dynamic values from the data source by placing dynamic information within curly brackets. For example, 'Id: {TaskId}' will display 'Id' followed by the task’s ID number, such as 'Id: 1025'

Header: The information to be displayed in the card header.

Rows: Click Add to include the rows that will be displayed beneath the header.

  • Label: Sets a header for the row text.

  • Text: Sets the text to be displayed on the row.

Card Color Rule: If the card color is sourced from the data, the mapping is configured here. The accepted format is hexadecimal (hex).

Color rules

It is possible to set up color rules to display a colored stripe on the card. This serves as a visual aid to quickly identify or distinguish cards.

Note: If multiple color rule conditions are met, the last one in the list will be displayed.

Click Add to add a new rule.

  • Field: The data on which the condition should be based.

  • Operator: Select the required operator.

  • Value: The value needed to meet the condition, depending on the operator.

Interaction

The Kanban portlet can perform different actions that trigger an app or a component.

Drag and Drop

Open the drop-down menu and connect the app or component that should be initiated when the user performs a drag-and-drop action, such as dragging and dropping a card between columns. When using a card action, data is sent from the portal to the green start ring in the format shown here. Input variables are set to 'Text' by default; adjust the type (e.g., 'Number,' 'Date') as needed to suit your requirements.

This action will send OperationType = DragAndDrop.

{
    Input: {
        Row: {
            "Place props that you want to use from Kanban Portlet"
        },
        TaskId: text,
        OperationType: text,
        SourceStatus: text,        
        TargetStatus: text,
        SourceSwimlane: text,
        TargetSwimlane: text,
        CurrentItemOrderId: text?,
        NextItemOrderId: text?,
        PrevItemOrderId: text?
    }*?
}

Double Click

Open the drop-down menu and connect the app or component that should start when the user performs a double-click action, such as double-clicking on a card. This can be used, for example, to edit data on a card.

When using a card action, data is sent from the portal to the green start ring in the format shown here. Input variables are set to 'Text' by default; adjust the type (e.g., 'Number,' 'Date') as needed to suit your requirements.

This action will send OperationType = DoubleClick.

{
    Input: {
        Row: {
            "Place props that you want to use from Kanban Portlet"
        },
        TaskId: text,
        OperationType: text
    }*?
}

Custom button

See Custom button.

Tooltip

Show Tooltip

If unchecked, no tooltip will be displayed when hovering over a task. When checked, the data specified in the HTML will be shown in the tooltip.

Edit HTML

Configure the desired tooltip data using HTML to define the layout, and use curly brackets to specify the variables to be shown. Only plain HTML is allowed; style or script elements are forbidden.

Icons

Add rules to define icons to be shown on the tasks.

Click Add to add a new rule.

  • Background: The icon to be used as the single or background icon.

  • Foreground: The icon to be used as the foreground icon

  • Field: The data on which the condition should be based.

  • Operator: Select the required operator.

  • Value: The value needed to meet the condition, depending on the operator.

Style

To configure style, see Style.

Last updated