Kanban Component

Basics

To create the component, use the kanban XML element and bind it to data container. To do this, you can use Jmix Studio.

create kanban component

The new kanban element will be added in both the Jmix UI structure panel and in the XML. You can configure attributes like id, height, width, etc., in the same way as it is done for other UI components.

<kanban:kanban id="kanban"
               height="100%"
               width="100%"/>

If you don’t use the view designer, declare the kanban namespace in your view’s XML descriptor manually:

<view xmlns="http://jmix.io/schema/flowui/view"
      xmlns:kanban="http://jmix.io/schema/kanban/ui"
      title="msg://kanbanView.title">

Next, specify which data and columns you want to display:

  • To display columns, add the columns element with the columnsEnum attribute.

  • To configure the mapping of entity fields, use the propertiesMapping element.

The following example demonstrates how to create a basic kanban:

<data>
    <collection id="kanbanTasksDc"
                class="com.company.onboarding.entity.KanbanTask">
        <loader id="kanbanTasksDl" readOnly="true">
            <query>
                <![CDATA[select e from KanbanTask e]]>
            </query>
        </loader>
        <fetchPlan extends="_base"/>
    </collection>
</data>
<layout>
    <kanban:kanban id="kanban" dataContainer="kanbanTasksDc"
                   width="100%" height="100%">
        <kanban:columns>
            <kanban:column dataField="todo"
                           label="msg://kanban.column.todo.label"/>
            <kanban:column dataField="in-progress"
                           label="msg://kanban.column.in_progress.label"/>
            <kanban:column dataField="verification"
                           label="msg://kanban.column.verification.label"/>
            <kanban:column dataField="done"
                           label="msg://kanban.column.done.label"/>
        </kanban:columns>
    </kanban:kanban>
</layout>
kanban basic

Data Binding

LIVE DEMO

Data binding refers to linking a visual component to a data container. Kanban can display data loaded into either a collection container or a key-value container.

Collection Container

Typically, you bind a kanban to data declaratively in the XML descriptor using the dataContainer attribute. This attribute should refer to a collection container, that holds the data you want to display. Please see the relevant example in the previous section.

Key-Value Container

It is also possible to bind the kanban to a key-value container. For example:

<data>
    <keyValueCollection id="keyValueKanbanTasksDc">
        <properties idProperty="id">
            <property name="id" datatype="uuid"/>
            <property name="status" datatype="string"/>
            <property name="text" datatype="string"/>
        </properties>
        <loader>
            <query>
                <![CDATA[select t.id, t.status, t.text from KanbanTask t]]>
            </query>
        </loader>
    </keyValueCollection>
</data>
<layout>
    <kanban:kanban id="kanbanKeyValue"
                   dataContainer="keyValueKanbanTasksDc"
                   width="100%" height="100%">
        <kanban:columns>
            <kanban:column dataField="todo"
                           label="msg://kanban.column.todo.label"/>
            <kanban:column dataField="in-progress"
                           label="msg://kanban.column.in_progress.label"/>
            <kanban:column dataField="verification"
                           label="msg://kanban.column.verification.label"/>
            <kanban:column dataField="done"
                           label="msg://kanban.column.done.label"/>
        </kanban:columns>
    </kanban:kanban>
</layout>

Programmatic Binding

If you need to define a data container programmatically, you need to remove the dataContainer attribute:

<kanban:kanban id="programmaticallyKanban"
               width="100%" height="100%">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label"/>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
</kanban:kanban>

After that, in the view controller, use the ContainerKanbanItems class to bind the Kanban to a data container:

@ViewComponent
private Kanban<KanbanTask> programmaticallyKanban;

@ViewComponent
private CollectionContainer<KanbanTask> kanbanTasksDc;
@Autowired
private DataManager dataManager;

@Subscribe
public void onInit(InitEvent event) {
    programmaticallyKanban.setItems(new ContainerKanbanItems<>(kanbanTasksDc, UUID.class));
}

Properties Mapping

Properties mapping allows you to define how data from your entities is displayed in the Kanban board.

  • Jmix Entity: You have a Jmix entity (for example, KanbanTask) that represents a task in your application. This entity has various attributes like title, status, dueDate, etc.

  • Kanban Card: You want to display these task attributes visually on a Kanban card in your Jmix application.

  • Mapping: Jmix’s Kanban component provides a mechanism to link the entity attributes to the corresponding fields on the Kanban card.

The propertiesMapping element defines a mapping of entity properties to a set of task card fields. A task card displayed on the Kanban board has a predefined set of fields:

id

The task’s unique ID. Required for display.

status

The task’s status. Must correspond to the dataField of a column or sub-column. Required for display.

text

The text of the task. Required for display.

color

A color used to visually highlight the task’s card.

dueDate

The task’s due date.

priority

The task’s priority.

progress

The task’s progress in percentages, a number from 0 to 100.

swimlane

The swimlane of the task. Must correspond to the dataField of a swimlane from the swimlanes definition, if one is defined.

tags

A comma-separated list of tags.

userAvatar

The avatar of the user assigned to the task.

username

The name of the user assigned to the task.

Declarative Mapping

Typically, you map a kanban to entity properties in the XML descriptor using the propertiesMapping element.

Note how the attribute’s values are specified. The value can be an attribute of the root entity (text = "text") or an attribute of its child entity (username = "assignee.username") - use dot notation to traverse the object graph.

The following example shows a kanban that is mapped to some field of its task entity:

properties mapping 
<kanban:kanban id="declarativePropertiesMappingKanban" dataContainer="kanbanTasksDc"
               width="100%" height="100%"
               taskUserAvatarVisible="true">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label"/>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
    <kanban:propertiesMapping id="id" status="status" text="text"
                              username="assignee.username"
                              userAvatar="assignee.picture"/>
</kanban:kanban>

Programmatic Mapping

You can define propertiesMapping programmatically. To do this, don’t specify it in the kanban XML markup. After that, in the view controller, set it using the setPropertiesMapping(JmixKanban.PropertiesMapping) method.

<kanban:kanban id="programmaticPropertiesMappingKanban" dataContainer="kanbanTasksDc"
               width="100%" height="100%"
               taskUserAvatarVisible="true">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label"/>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
</kanban:kanban>
@ViewComponent
private Kanban<KanbanTask> programmaticPropertiesMappingKanban;

@Subscribe
public void onInit(InitEvent event) {
    JmixKanban.PropertiesMapping propertiesMapping = new JmixKanban.PropertiesMapping("id", "status", "text");
    propertiesMapping.setUserAvatar("assignee.picture");
    propertiesMapping.setUsername("assignee.username");
    programmaticPropertiesMappingKanban.setPropertiesMapping(propertiesMapping);
}

Save Delegate

LIVE DEMO

There are three ways to change data using the kanban component:

  • Change the attribute mapped to status by dragging a kanban task card from one column to another.

  • Change the attribute mapped to swimlane by dragging a kanban task card from one swimlane to another.

  • Change the attribute mapped to priority by selection a different priority using the corresponding icon.

Visual components, including kanban, keep temporary changes in a data container until a confirmation action is triggered to commit them to the database.

To automatically commit changes when the user edits tasks, create a handler for saveDelegate and save the changes with DataManager:

<data>
    <collection id="kanbanTasksDc"
                class="com.company.onboarding.entity.KanbanTask">
        <loader id="kanbanTasksDl" readOnly="true">
            <query>
                <![CDATA[select e from KanbanTask e]]>
            </query>
        </loader>
        <fetchPlan extends="_base"/>
    </collection>
</data>
<layout>
    <kanban:kanban id="saveDelegateKanban" dataContainer="kanbanTasksDc"
                   width="100%" height="100%">
        <kanban:columns>
            <kanban:column dataField="todo"
                           label="msg://kanban.column.todo.label"/>
            <kanban:column dataField="in-progress"
                           label="msg://kanban.column.in_progress.label"/>
            <kanban:column dataField="verification"
                           label="msg://kanban.column.verification.label"/>
            <kanban:column dataField="done"
                           label="msg://kanban.column.done.label"/>
        </kanban:columns>
    </kanban:kanban>
</layout>
@Install(to = "saveDelegateKanban", subject = "saveDelegate")
private void kanbanSaveDelegate(final KanbanTask kanbanTask) {
    dataManager.save(kanbanTask);
}

To automatically save kanban changes, you can use the autoSave attribute.

Actions

The kanban component implements the HasActions interface and can contain both standard list actions and custom actions. Actions are invoked by clicking a designated button.

The following example demonstrates adding actions to the component:

<hbox id="buttonsPanel" classNames="buttons-panel"> (1)
    <button id="createBtn" action="kanbanActions.create"/>
    <button id="editBtn" action="kanbanActions.edit"/>
    <button id="removeBtn" action="kanbanActions.remove"/>
    <button id="infoBtn" action="kanbanActions.getInfo"/>
</hbox>
<kanban:kanban id="kanbanActions" dataContainer="kanbanTasksDc"
               width="100%" height="100%">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label"/>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
    <kanban:actions>
        <kanban:action id="create" type="list_create"/> (2)
        <kanban:action id="edit" type="list_edit"/>
        <kanban:action id="remove" type="list_remove"/>
        <kanban:action id="getInfo" text="Get Info" icon="INFO_CIRCLE"/> (3)
    </kanban:actions>
</kanban:kanban>
1 Define an hbox container to show action buttons above the component.
2 Define the list_create standard action. This is a standard action for creating a new item.
3 Define the getInfo custom action. The value of its text attribute will be used as the button text.
kanban actions

To add action in Jmix Studio, select the component in the view descriptor XML or in the Jmix UI structure panel and click on the Add→Action button in the Jmix UI inspector panel.

Hierarchical Columns

LIVE DEMO

The kanban component supports hierarchical columns. Sub-columns have the same properties as top-level columns.

It is not possible to use sub-columns and swimlanes or columnsEnum together.

The following example demonstrates a kanban with sub-columns:

hierarchical columns
Show code 
<kanban:kanban id="hierarchicalKanban" dataContainer="kanbanTasksDc"
               width="100%" height="100%">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label">
            <kanban:columns>
                <kanban:column dataField="started"
                               label="msg://kanban.column.started.label"/>
                <kanban:column dataField="almost-finished"
                               label="msg://kanban.column.almost_finished.label"/>
            </kanban:columns>
        </kanban:column>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
</kanban:kanban>

Hierarchy Mode

Displaying hierarchical columns is possible in two modes:

  • COLUMNS - sub-columns are represented as nested columns.

  • TABS - sub-columns are represented as texted tabs. In this case, it makes sense to specify the selected column attribute.

For example:

hierarchy mode
Show code 
<kanban:kanban id="hierarchyModeKanban" dataContainer="kanbanTasksDc"
               width="100%" height="100%"
               hierarchyMode="TABS">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label">
            <kanban:columns>
                <kanban:column dataField="started" selected="true"
                               label="msg://kanban.column.started.label"/>
                <kanban:column dataField="almost-finished"
                               label="msg://kanban.column.almost_finished.label"/>
            </kanban:columns>
        </kanban:column>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
</kanban:kanban>

Task Position

Hierarchical columns can also be displayed on leaves. There are two options for task positions:

  • ALL - tasks can be shown in all levels of column hierarchy.

  • LEAF - tasks can be shown only on leaf column.

For example:

task position
Show code 
<kanban:kanban id="taskPositionKanban" dataContainer="kanbanTasksDc"
               width="100%" height="100%"
               taskPosition="LEAF">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label">
            <kanban:columns>
                <kanban:column dataField="started" selected="true"
                               label="msg://kanban.column.started.label"/>
                <kanban:column dataField="almost-finished"
                               label="msg://kanban.column.almost_finished.label"/>
            </kanban:columns>
        </kanban:column>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
</kanban:kanban>

Renderers

The kanban component supports customization of card display. Renderers can be used to customize the display of the column header, footer, and text of the Kanban task card.

Task Renderer

The task renderer is defined by a callback function that can be used for customizing task rendering. The Kanban calls it with two arguments: the task HTML element and the task data.

For example:

task renderer
Show code 
<kanban:kanban id="taskRendererKanban" dataContainer="kanbanTasksDc"
               width="100%" height="100%">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label"/>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>

    <kanban:taskRendererFunction>
        <![CDATA[
            (task, data) => {
                task.style.color = data.text.includes("Create") ? '#0B88DF' : '#182739'
            }
        ]]>
    </kanban:taskRendererFunction>
</kanban:kanban>

Header Renderer

The header renderer is defined by a callback function that can be used for customizing column header rendering. The Kanban calls it with three arguments: column header HTML element, the column data and the column data field.

For example:

header renderer
Show code 
<kanban:kanban id="headerRendererKanban" dataContainer="kanbanTasksDc"
               width="100%" height="100%">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label"/>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
    <kanban:columnHeaderRendererFunction>
        <![CDATA[
            (header, data, dataField) => {
                let color = '';
                switch (data.label) {
                    case 'Todo': {
                        color = '#0B88DA';
                        break;
                    }
                    case 'In progress': {
                        color = '#30C1E3'
                        break;
                    }
                    case 'Verification': {
                        color = '#3634C8'
                        break;
                    }
                    case 'Done': {
                        color = '#34C8BA';
                        break;
                    }
                }

                header.style.background = color;
                header.style.color = '#FFF';
            }
        ]]>
    </kanban:columnHeaderRendererFunction>
</kanban:kanban>

Footer Renderer

The footer renderer is defined by a callback function which can be used for customizing column footer rendering. The Kanban calls it with three arguments: the column footer HTML element, the column data and the column data field.

For example:

footer renderer
Show code 
<kanban:kanban id="footerRendererKanban" dataContainer="kanbanTasksDc"
               width="100%" height="100%"
               columnSummaryEnabled="true"
               columnFooterVisible="true">
    <kanban:columns>
        <kanban:column dataField="todo"
                       label="msg://kanban.column.todo.label"/>
        <kanban:column dataField="in-progress"
                       label="msg://kanban.column.in_progress.label"/>
        <kanban:column dataField="verification"
                       label="msg://kanban.column.verification.label"/>
        <kanban:column dataField="done"
                       label="msg://kanban.column.done.label"/>
    </kanban:columns>
    <kanban:columnFooterRendererFunction>
        <![CDATA[
            (footer, data, dataField) => {
                footer.style.color = data.label === 'In progress' ? '#0B88DA' : '#3634C8';
            }
        ]]>
    </kanban:columnFooterRendererFunction>
</kanban:kanban>

Attributes

In Jmix there are many common attributes that serve the same propose for all components. The following are attributes specific to kanban:

You can view and edit attributes applicable to the component in Jmix Studio using the Jmix UI inspector panel.

Name

Description

Default

applyColumnColorToTasks

If true, the column color will be applied to the cards contained within the column. If a card color is set, it will take precedence over the column color.

false

autoColumnHeightEnabled

If true, updates the height of columns depending on the tasks inside. The effect of this property is observed when columnColorEntireSurfaceEnabled is true.

false

autoSave

If true, automatically sets a saveDelegate that saves the DataContext of the current view. Can only be defined declaratively using XML. For programmatic setup, use a saveDelegate. See live demo.

false

collapsible

If true, enables collapsing the column via the corresponding button in the column header, the context menu of the actions in the column header, or by double-clicking on the column header. The state of this attribute can be saved in the user settings.

false

columnActionsEnabled

If true, enables a context menu with actions for each column. The set of actions in the context menu will depend on the value of the collapsible and columnHidingAllowed attributes.

false

columnColorEntireSurfaceEnabled

If true, displays background in the Kanban column.

false

columnFooterVisible

If true, displays a column footer which shows the summary of the column. Works in conjunction with the columnSummaryEnabled attribute value.

false

columnHidingAllowed

If true, adds column hiding actions to the column header context menu. The state of this attribute can be saved in the user settings.

true

columnReorderingAllowed

If true, enables column reordering using drag and drop action. The state of this attribute can be saved in the user settings.

false

columnSummaryEnabled

If true, displays task count information in the header of each column. Information can also be displayed in the column footer. See columnFooterVisible.

false

columnsWidth

Sets the width of all columns in pixels.

0

dragAllowed

If true, enables dragging for columns and cards.

true

dropAllowed

If true, enables dropping for columns and cards.

true

dropPlaceholderAllowed

If true, then if a task overlaps another task, a blank space appears for it.

false

hierarchyMode

Specifies the hierarchy mode of the nested columns with the following possible values: COLUMNS, TABS. See Hierarchy Mode.

COLUMNS

swimlanesFrom

Sets the index of the column at which to start the swimlanes. See Swimlanes.

0

swimlanesTo

Sets the index of the column at which to end the swimlanes.

–

taskColorEntireSurfaceEnabled

If true, applies the task color to the task card background. The attribute takes precedence over the column color.

false

taskDueDateVisible

If ture, displays the task due icon. See dueDate.

false

taskPosition

Specifies the task position for columns with the following possible values: ALL, LEAF. See Task Position.

ALL

taskPriorityVisible

If true, displays the priority icon for a task card. See priority.

true

taskProgressVisible

If true, displays a progress bar for a task card with the task’s progress value. See progress.

false

taskTagsVisible

If true, displays tags for a task card. See tags.

true

taskUserAvatarVisible

If true, displays user avatar for a task card. See userAvatar.

false

Handlers

LIVE DEMO

In Jmix there are many common handlers that are configured in the same way for all components. The following are handlers specific to kanban:

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

Name

Description

KanbanColumnClickEvent

KanbanColumnClickEvent fired when a column header is clicked. Corresponds to the columnClick DOM event.

KanbanColumnDoubleClickEvent

KanbanColumnDoubleClickEvent fired when a column header is double-clicked. Corresponds to the columnDoubleClick DOM event.

KanbanColumnCollapseEvent

KanbanColumnCollapseEvent fired when a column is collapsed using the column’s actions menu, double-clicking the column header, or programmatically changing the column’s collapsed property. Corresponds to the columnCollapse DOM event.

KanbanColumnExpandEvent

KanbanColumnExpandEvent fired when a column is expanded using double-clicking the column header, or programmatically changing the column’s collapse property. Corresponds to the columnExpand DOM event.

KanbanColumnHideEvent

KanbanColumnHideEvent fired when a column is hidden using double-clicking the column header, or programmatically changing the column’s collapsed property. Corresponds to the columnHide DOM event.

KanbanColumnReorderEvent

KanbanColumnReorderEvent fired when the column order changes. Corresponds to the columnReorder DOM event.

KanbanColumnShowEvent

KanbanColumnShowEvent fired when a column is shown using the column’s actions menu, or programmatically changing the column’s visible property. Corresponds to the columnShow DOM event.

KanbanDragEndEvent

KanbanDragEndEvent fired when a task card is dropped. Corresponds to the dragEnd DOM event.

KanbanDragStartEvent

KanbanDragStartEvent fired when a task card is dragged. Corresponds to the dragStart DOM event.

KanbanTaskClickEvent

KanbanTaskClickEvent fired when a task is clicked. Corresponds to the taskClick DOM event.

KanbanTaskDoubleClickEvent

KanbanTaskDoubleClickEvent fired when a task is double-clicked. Corresponds to the taskDoubleClick DOM event.

saveDelegate

Adds a save delegate function which will be used to save data that has been updated using Kanban. Called when a task card is dragged across the board and when the task priority changes using the corresponding icon. See Save Delegate.

Elements

The elements within the kanban provide a wide range of options to control the appearance, behavior, and functionality of columns.

To add an element to a selected component, click the Add button in the Jmix UI inspector panel.

Columns

The columns element can define a set of columns to display, either explicitly or using an enumeration.

XML Element

columns

Attributes

columnsEnum

Elements

column
Attributes

Name

Description

Default

columnsEnum

Specifies the enumeration FQN to be used as column values. The enumeration values will be used as the column’s dataField, and its localized value will be used as the column’s label. Nested columns are not available in this definition option. See live demo.

–

Column

The column element defines an individual column.

XML Element

column

Java Class

io.jmix.kanbanflowui.kit.component.KanbanColumn

Attributes

dataField - collapsed - collapsible - color - label - orientation - reorder - selected - visible - width

Elements

columns
Attributes

Name

Description

Default

dataField

Sets the user-defined identifier to map this column. The dataField can be used to fetch the column later with the getColumnByDataField(String) method.

The dataField must be unique within the Kanban and cannot be changed after it’s set. The attribute value will be set to the status property of the task entity. Required attribute.

–

collapsed

If true, collapses the column.

false

collapsible

If true, enables the ability to collapse the column. The attribute works in conjunction with the collapsible Kanban attribute.

true

color

Sets the column color property as a CSS string. The color is applied to the header title and can also be applied to cards located within the column.

–

label

Sets the column header text. The attribute value can either be the text itself or a key in the message bundle. In case of a key, the value should begin with the msg:// prefix.

–

orientation

Specifies the orientation of the task cards inside the column with the following possible values: VERTICAL, HORIZONTAL.

VERTICAL

reorder

If true, enabled the ability to reorder. The attribute works in conjunction with the columnReorderingAllowed Kanban attribute.

true

selected

If true, selects the column in the tab hierarchy mode. Only applicable to sub-column when hierarchyMode is TABS.

–

visible

If true, the column is visible.

true

width

Sets the width of the column in pixels.

–

Swimlanes

This is a preview feature. Its look and feel, as well as implementation details, may change significantly in future releases.

The swimlaes element can define a set of swimlanes to display, either explicitly or using an enumeration. Swimlanes are horizontal stripes that divide task cards into area of responsibility. Nested columns are not available when using swimlanes.

XML Element

swimlanes

Attributes

swimlanesEnum

Elements

swimlane
Attributes

Name

Description

Default

swimlanesEnum

Specifies the enumeration FQN to be used as swimlane values. The enumeration values will be used as the swimlane dataField, and its localized value will be used as the column’s label.

–

Swimlane

The swimlane element defines an individual swimlane.

XML Element

swimlane

Java Class

io.jmix.kanbanflowui.kit.component.KanbanSwimlane

Attributes

dataField - color - label
Attributes

Name

Description

Default

dataField

Sets the user-defined identifier to map this swimlane. The dataField can be used to fetch the swimlane later with the getSwimlaneByDataField(String) method.

The dataField must be unique within the Kanban and cannot be changed after it’s set. Required attribute.

–

color

Sets the swimlane color property as a CSS string. The color is applied to the swimlane horizontal stripes.

–

label

Sets the swimlane header text. The attribute value can either be the text itself or a key in the message bundle. In case of a key, the value should begin with the msg:// prefix.

–

PropertiesMapping

Kanban task cards can display specific fields of a Kanban task entity. The propertiesMapping element is used to set the mapping of entity properties to card fields. See the example.

XML Element

propertiesMapping

Java Class

io.jmix.kanbanflowui.kit.component.JmixKanban.PropertiesMapping

Attributes

id - status - test - color - dueDate - priority - progress - swimlane - tags - userAvatar - username -
Attributes

Name

Description

Default

id

Specifies the name of an entity attribute to be mapped to the card id property. The id is used to identify the card. Required attribute.

id

status

Specifies the name of an entity attribute to be mapped to the card status property. The status is used to arrange the cards into corresponding columns. Required attribute.

status

text

Specifies the name of an entity attribute to be mapped to the card text property. The text is used as the title of the card. Required attribute.

text

color

Specifies the name of an entity attribute to be mapped to the card color property. The color is applied to the left border of the card, and can also be used as a background using taskColorEntireSurfaceEnabled attribute.

–

dueDate

Specifies the name of an entity attribute to be mapped to the card dueDate property. The dueDate is displayed on the card as a date. If the dueDate is in the past, the card will be highlighted as overdue.

–

priority

Specifies the name of an entity attribute to be mapped to the card priority property. The priority is displayed on the card as an icon.

–

progress

Specifies the name of an entity attribute to be mapped to the card progress property. The progress is displayed on the card as a progress bar.

–

swimlane

Specifies the name of an entity attribute to be mapped to the card swimlane property. The swimlane is used to arrange the cards into corresponding swimlanes.

–

tags

Specifies the name of an entity attribute to be mapped to the card tags property. The tags is displayed on the card as small badges with text.

–

userAvatar

Specifies the name of an entity attribute to be mapped to the card userAvatar property. The userAvatar is used to display the user’s avatar on the card.

–

username

Specifies the name of an entity attribute to be mapped to the card username property. The username is used to display the card assignee.

–

See Also

See the Kanban Docs for more information.