Компонент Kanban

ДЕМО

Компонент пользовательского интерфейса kanban представляет собой доску Kanban. Доска отображает рабочий процесс на разных этапах проекта, используя карточки для задач и столбцы для каждого этапа.

XML-элемент

kanban

Java-класс

io.jmix.kanbanflowui.component.Kanban

Атрибуты

id - alignSelf - applyColumnColorToTasks - autoColumnHeightEnabled - autoSave - classNames - collapsible - colspan - columnActionsEnabled - columnColorEntireSurfaceEnabled - columnFooterVisible - columnHidingAllowed - columnReorderingAllowed - columnSummaryEnabled - columnsWidth - css - dataContainer - dragAllowed - dropAllowed - dropPlaceholderAllowed - enabled - height - hierarchyMode - maxHeight - maxWidth - minHeight - minWidth - swimlanesFrom - swimlanesTo - taskColorEntireSurfaceEnabled - taskDueDateVisible - taskPosition - taskPriorityVisible - taskProgressVisible - taskTagsVisible - taskUserAvatarVisible - visible - width

Обработчики

AttachEvent - DetachEvent - KanbanColumnClickEvent - KanbanColumnDoubleClickEvent - KanbanColumnCollapseEvent - KanbanColumnExpandEvent - KanbanColumnHideEvent - KanbanColumnReorderEvent - KanbanColumnShowEvent - KanbanDragEndEvent - KanbanDragStartEvent - KanbanTaskClickEvent - KanbanTaskDoubleClickEvent - saveDelegate

Элементы

actions - columnFooterRendererFunction - columnHeaderRendererFunction - columns - column - swimlanes - swimlane - propertiesMapping - taskRendererFunction

Основы

Чтобы создать компонент, используйте XML-элемент kanban и свяжите его с контейнером данных. Для этого можно использовать Jmix Studio.

create kanban component

Новый элемент kanban будет добавлен как в панель структуры Jmix UI, так и в XML. Вы можете настроить атрибуты, такие как id, height, width и так далее, так же, как это делается для других компонентов UI.

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

Если вы не используете дизайнер экранов, объявите пространство имен kanban в XML-дескрипторе вашего экрана вручную:

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

Затем укажите, какие данные и столбцы вы хотите отобразить:

  • Чтобы отобразить столбцы, добавьте элемент columns с атрибутом columnsEnum.

  • Чтобы настроить сопоставление полей сущности, используйте элемент propertiesMapping.

В следующем примере показано, как создать базовую доску 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

Привязка данных

ДЕМО

Привязка данных - это связь визуального компонента с контейнером данных. Kanban может отображать данные, загруженные в контейнер коллекции или контейнер KeyValue.

Контейнер коллекции

Обычно вы связываете kanban с данными декларативно в XML-дескрипторе с помощью атрибута dataContainer. Этот атрибут должен ссылаться на контейнер коллекции, который содержит данные, которые вы хотите отобразить. Смотрите соответствующий пример в предыдущем разделе.

Контейнер KeyValue

Также возможно связать kanban с контейнером KeyValue. Например:

<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>

Программное связывание

Если вам нужно определить контейнер данных программно, необходимо удалить атрибут dataContainer:

<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>

После этого в контроллере экрана используйте класс ContainerKanbanItems, чтобы связать Kanban с контейнером данных:

@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));
}

Сопоставление свойств

Сопоставление свойств позволяет вам определить, как данные из ваших сущностей отображаются на доске Kanban.

  • Сущность Jmix: У вас есть сущность Jmix (например, KanbanTask), которая представляет задачу в вашем приложении. Эта сущность имеет различные атрибуты, такие как title, status, dueDate и так далее.

  • Карточка Kanban: Вы хотите визуально отобразить эти атрибуты задачи на карточке Kanban в вашем приложении Jmix.

  • Сопоставление: Компонент Kanban в Jmix предоставляет механизм для связывания атрибутов сущности с соответствующими полями на карточке Kanban.

Элемент propertiesMapping определяет сопоставление свойств сущности с набором полей карточки задачи. Карточка задачи, отображаемая на доске Kanban, имеет предопределенный набор полей:

id

Уникальный идентификатор задачи. Обязателен для отображения.

status

Статус задачи. Должен соответствовать dataField столбца или подстолбца. Обязателен для отображения.

text

Текст задачи. Обязателен для отображения.

color

Цвет, используемый для визуального выделения карточки задачи.

dueDate

Срок задачи.

priority

Приоритет задачи.

progress

Прогресс задачи в процентах, число от 0 до 100.

swimlane

Определяет полосу задачи, к которой относится задача. Оно должно соответствовать атрибуту dataField полосы задач, если полосы задач настроены.

tags

Список тегов, разделенных запятыми.

userAvatar

Аватар пользователя, назначенного задаче.

username

Имя пользователя, назначенного задаче.

Декларативное сопоставление

Обычно вы сопоставляете kanban со свойствами сущности в XML-дескрипторе с помощью элемента propertiesMapping.

Обратите внимание, как задаются значения атрибутов. Значение может быть атрибутом корневой сущности (например, text = "text") или атрибутом ее дочерней сущности (например, username = "assignee.username") - используйте точечную нотацию для обхода графа объектов.

В следующем примере показан kanban, который сопоставлен с некоторыми полями его сущности задачи:

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>

Программное сопоставление

Вы можете определить propertiesMapping программно. Для этого не указывайте его в XML-разметке kanban. После этого в контроллере экрана установите его с помощью метода setPropertiesMapping(JmixKanban.PropertiesMapping).

<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

ДЕМО

Существует три способа изменения данных с помощью компонента kanban:

  • Изменение атрибута, сопоставленного с status, путем перетаскивания карточки задачи Kanban из одного столбца в другой.

  • Изменение атрибута, сопоставленного с swimlane, путем перетаскивания карточки задачи Kanban из одной полосы задач в другую.

  • Изменение атрибута, сопоставленного с priority, путем выбора другого приоритета с помощью соответствующей иконки.

Визуальные компоненты, включая kanban, хранят временные изменения в контейнере данных до тех пор, пока не будет запущено действие подтверждения для их фиксации в базе данных.

Чтобы автоматически зафиксировать изменения, когда пользователь редактирует задачи, создайте обработчик для saveDelegate и сохраните изменения с помощью 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);
}

Чтобы автоматически сохранять изменения kanban, вы можете использовать атрибут autoSave.

Действия

Компонент kanban реализует интерфейс HasActions и может содержать как стандартные действия списка, так и пользовательские действия. Действия вызываются щелчком по назначенной кнопке.

В следующем примере показано добавление действий к компоненту:

<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 Определите контейнер hbox для отображения кнопок действий над компонентом.
2 Определите стандартное действие list_create. Это стандартное действие для создания нового элемента.
3 Определите пользовательское действие getInfo. Значение его атрибута text будет использоваться в качестве текста кнопки.
kanban actions

Чтобы добавить action в Jmix Studio, выберите компонент в XML-дескрипторе экрана или в панели структуры Jmix UI и нажмите кнопку Add→Action на панели инспектора Jmix UI.

Иерархические столбцы

ДЕМО

Компонент kanban поддерживает иерархические столбцы. Подстолбцы имеют те же свойства, что и столбцы верхнего уровня.

Невозможно использовать подстолбцы и полосы задач или columnsEnum одновременно.

В следующем примере показан kanban с подстолбцами:

hierarchical columns
Показать код 
<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>

Режим иерархии

Отображение иерархических столбцов возможно в двух режимах:

  • COLUMNS - подстолбцы представлены как вложенные столбцы.

  • TABS - подстолбцы представлены как текстовые вкладки. В этом случае имеет смысл указать атрибут selected.

Например:

hierarchy mode
Показать код 
<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>

Положение задачи

Иерархические столбцы могут быть отображены также на конечных уровнях. Существует два варианта для положения задач:

  • ALL - задачи могут отображаться на всех уровнях иерархии столбцов.

  • LEAF - задачи могут отображаться только на конечном уровне.

Например:

task position
Показать код 
<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>

Рендереры

Компонент kanban поддерживает настройку отображения карточек. Рендеры можно использовать для настройки отображения заголовка столбца, нижнего колонтитула и текста карточки задачи Kanban.

Рендерер задачи

Рендерер задачи определяется функцией обратного вызова, которую можно использовать для настройки рендеринга задачи. Kanban вызывает ее с двумя аргументами: HTML-элемент задачи и данные задачи.

Например:

task renderer
Показать код 
<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>

Рендерер заголовка

Рендерер заголовка определяется функцией обратного вызова, которую можно использовать для настройки рендеринга заголовка столбца. Kanban вызывает ее с тремя аргументами: HTML-элемент заголовка столбца, данные столбца и поле данных столбца.

Например:

header renderer
Показать код 
<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>

Рендерер нижнего колонтитула

Рендерер нижнего колонтитула определяется функцией обратного вызова, которую можно использовать для настройки рендеринга нижнего колонтитула столбца. Kanban вызывает ее с тремя аргументами: HTML-элемент нижнего колонтитула столбца, данные столбца и поле данных столбца.

Например:

footer renderer
Показать код 
<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>

Атрибуты

В Jmix существует множество общих атрибутов, которые выполняют одинаковую функцию для всех компонентов. Ниже приведены атрибуты, специфичные для kanban:

Вы можете просматривать и редактировать атрибуты, применимые к компоненту, в Jmix Studio с помощью панели инспектора Jmix UI.

Название

Описание

Значение по умолчанию

applyColumnColorToTasks

Если установлено значение true, цвет столбца будет применен к карточкам, содержащимся в столбце. Если для карточки задан цвет, он будет иметь приоритет над цветом столбца.

false

autoColumnHeightEnabled

Если установлено значение true, обновляет высоту столбцов в зависимости от задач внутри. Эффект этого свойства наблюдается, когда columnColorEntireSurfaceEnabled имеет значение true.

false

autoSave

Если установлено значение true, автоматически устанавливает saveDelegate, который сохраняет DataContext текущего экрана. Может быть определен только декларативно с помощью XML. Для программной настройки используйте saveDelegate. См. онлайн-пример.

false

collapsible

Если установлено значение true, включает возможность сворачивания столбца с помощью соответствующей кнопки в заголовке столбца, контекстного меню действий в заголовке столбца или двойного щелчка по заголовку столбца. Состояние этого атрибута может быть сохранено в настройках пользователя.

false

columnActionsEnabled

Если установлено значение true, включает контекстное меню с действиями для каждого столбца. Набор действий в контекстном меню будет зависеть от значения атрибутов collapsible и columnHidingAllowed.

false

columnColorEntireSurfaceEnabled

Если установлено значение true, отображает фон в столбце Kanban.

false

columnFooterVisible

Если установлено значение true, отображает нижний колонтитул столбца, который показывает сводку по столбцу. Работает в сочетании со значением атрибута columnSummaryEnabled.

false

columnHidingAllowed

Если установлено значение true, добавляет действия скрытия столбца в контекстное меню заголовка столбца. Состояние этого атрибута может быть сохранено в настройках пользователя.

true

columnReorderingAllowed

Если установлено значение true, включает возможность переупорядочивания столбцов с помощью действия перетаскивания. Состояние этого атрибута может быть сохранено в настройках пользователя.

false

columnSummaryEnabled

Если установлено значение true, отображает информацию о количестве задач в заголовке каждого столбца. Информация также может отображаться в нижнем колонтитуле столбца. Смотрите columnFooterVisible.

false

columnsWidth

Устанавливает ширину всех столбцов в пикселях.

0

dragAllowed

Если установлено значение true, включает перетаскивание для столбцов и карточек.

true

dropAllowed

Если установлено значение true, включает возможность перетаскивания для столбцов и карточек.

true

dropPlaceholderAllowed

Если установлено значение true, то если задача перекрывает другую задачу, для нее появляется пустое пространство.

false

hierarchyMode

Указывает режим иерархии для вложенных столбцов со следующими возможными значениями: COLUMNS, TABS. Смотрите раздел Режим иерархии.

COLUMNS

swimlanesFrom

Устанавливает индекс столбца, с которого начинаются полосы задач. Смотрите раздел Полосы задач.

0

swimlanesTo

Устанавливает индекс столбца, на котором заканчиваются полосы задач.

–

taskColorEntireSurfaceEnabled

Если установлено значение true, применяет цвет задачи к фону карточки задачи. Атрибут имеет приоритет над цветом столбца.

false

taskDueDateVisible

Если установлено значение true, отображает значок срока задачи. Смотрите dueDate.

false

taskPosition

Указывает положение задачи для столбцов со следующими возможными значениями: ALL, LEAF. Смотрите раздел Положение задачи.

ALL

taskPriorityVisible

Если установлено значение true, отображает значок приоритета для карточки задачи. Смотрите priority.

true

taskProgressVisible

Если установлено значение true, отображает индикатор выполнения для карточки задачи со значением выполнения задачи. Смотрите progress.

false

taskTagsVisible

Если установлено значение true, отображает теги для карточки задачи. Смотрите tags.

true

taskUserAvatarVisible

Если установлено значение true, отображает аватар пользователя для карточки задачи. Смотрите userAvatar.

false

Обработчики

ДЕМО

В Jmix существует множество общих обработчиков, которые конфигурируются одинаково для всех компонентов.

Ниже приведены обработчики, специфичные для kanban.

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).

Name

Description

KanbanColumnClickEvent

Событие KanbanColumnClickEvent возникает при щелчке по заголовку столбца. Соответствует событию columnClick в DOM.

KanbanColumnDoubleClickEvent

Событие KanbanColumnDoubleClickEvent возникает при двойном щелчке по заголовку столбца. Соответствует событию columnDoubleClick в DOM.

KanbanColumnCollapseEvent

Событие KanbanColumnCollapseEvent возникает при сворачивании столбца с помощью меню действий столбца, двойного щелчка по заголовку столбца или программного изменения свойства collapsed столбца. Соответствует событию columnCollapse в DOM.

KanbanColumnExpandEvent

Событие KanbanColumnExpandEvent возникает при разворачивании столбца с помощью двойного щелчка по заголовку столбца или программного изменения свойства collapse столбца. Соответствует событию columnExpand в DOM.

KanbanColumnHideEvent

Событие KanbanColumnHideEvent возникает при скрытии столбца с помощью двойного щелчка по заголовку столбца или программного изменения свойства collapsed столбца. Соответствует событию columnHide в DOM.

KanbanColumnReorderEvent

Событие KanbanColumnReorderEvent возникает при изменении порядка столбцов. Соответствует событию columnReorder в DOM.

KanbanColumnShowEvent

Событие KanbanColumnShowEvent возникает при показе столбца с помощью меню действий столбца или программного изменения свойства visible столбца. Соответствует событию columnShow в DOM.

KanbanDragEndEvent

Событие KanbanDragEndEvent возникает при перетаскивании карточки задачи. Соответствует событию dragEnd в DOM.

KanbanDragStartEvent

Событие KanbanDragStartEvent возникает при начале перетаскивания карточки задачи. Соответствует событию dragStart в DOM.

KanbanTaskClickEvent

Событие KanbanTaskClickEvent возникает при щелчке по задаче. Соответствует событию taskClick в DOM.

KanbanTaskDoubleClickEvent

Событие KanbanTaskDoubleClickEvent возникает при двойном щелчке по задаче. Соответствует событию taskDoubleClick в DOM.

saveDelegate

Добавляет функцию делегата сохранения, которая будет использоваться для сохранения данных, которые были обновлены с помощью Kanban. Вызывается, когда карточка задачи перетаскивается по доске и когда приоритет задачи изменяется с помощью соответствующей иконки. Смотрите раздел Save Delegate.

Элементы Kanban

Элементы внутри kanban предоставляют широкий набор опций для управления внешним видом, поведением и функциональностью столбцов.

Чтобы добавить элемент к выбранному компоненту, нажмите кнопку Add на панели инспектора Jmix UI.

Columns

Элемент columns может определить набор столбцов для отображения, либо явно, либо с помощью перечисления.

XML-элемент

columns

Атрибуты

columnsEnum

Элементы

column
Атрибуты

Название

Описание

Значение по умолчанию

columnsEnum

Указывает FQN перечисления, которое будет использоваться в качестве значений столбцов. Значения перечисления будут использоваться в качестве dataField столбца, а его локализованное значение будет использоваться в качестве метки столбца. Вложенные столбцы недоступны в этом варианте определения. См. онлайн-пример.

–

Column

Элемент column определяет отдельный столбец.

XML-элемент

column

Java-класс

io.jmix.kanbanflowui.kit.component.KanbanColumn

Атрибуты

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

Элементы

columns
Атрибуты

Название

Описание

Значение по умолчанию

dataField

Устанавливает пользовательский идентификатор для сопоставления этого столбца. dataField может быть использован для получения столбца позже с помощью метода getColumnByDataField(String).

dataField должен быть уникальным в рамках Kanban и не может быть изменен после его установки. Значение атрибута будет установлено в свойство status сущности задачи. Обязательный атрибут.

–

collapsed

Если установлено значение true, сворачивает столбец.

false

collapsible

Если установлено значение true, включает возможность сворачивания столбца. Атрибут работает в сочетании с атрибутом collapsible Kanban.

true

color

Устанавливает свойство цвета столбца в виде строки CSS. Цвет применяется к заголовку и может также быть применен к карточкам, расположенным в столбце.

–

label

Устанавливает текст заголовка столбца. Значение атрибута может быть либо текстом, либо ключом в пакете сообщений. В случае ключа значение должно начинаться с префикса msg://.

–

orientation

Указывает ориентацию карточек задач внутри столбца со следующими возможными значениями: VERTICAL, HORIZONTAL.

VERTICAL

reorder

Если установлено значение true, включает возможность переупорядочивания. Атрибут работает в сочетании с атрибутом columnReorderingAllowed Kanban.

true

selected

Если установлено значение true, выбирает столбец в режиме иерархии вкладок. Применимо только к подстолбцу, когда hierarchyMode имеет значение TABS.

–

visible

Если установлено значение true, столбец отображается.

true

width

Устанавливает ширину столбца в пикселях.

–

Swimlanes

Это функция в стадии разработки. Ее внешний вид, а также детали реализации могут значительно измениться в будущих релизах.

Элемент swimlanes может определить набор полос задач для отображения, либо явно, либо с помощью перечисления. Полосы задач - это горизонтальные полосы, которые делят карточки задач на области ответственности. Вложенные столбцы недоступны при использовании полос задач.

XML-элемент

swimlanes

Атрибуты

swimlanesEnum

Элементы

swimlane
Атрибуты

Название

Описание

Значение по умолчанию

swimlanesEnum

Указывает FQN перечисления, которое будет использоваться в качестве значений полос задач. Значения перечисления будут использоваться в качестве dataField полосы задач, а его локализованное значение будет использоваться в качестве метки полосы задач.

–

Swimlane

Элемент swimlane определяет отдельную полосу задач.

XML-элемент

swimlane

Java-класс

io.jmix.kanbanflowui.kit.component.KanbanSwimlane

Атрибуты

dataField - color - label
Атрибуты

Название

Описание

Значение по умолчанию

dataField

Устанавливает пользовательский идентификатор для сопоставления этой полосы задач. dataField может быть использован для получения полосы задач позже с помощью метода getSwimlaneByDataField(String).

dataField должен быть уникальным в рамках Kanban и не может быть изменен после его установки. Обязательный атрибут.

–

color

Устанавливает свойство цвета полосы задач в виде строки CSS. Цвет применяется к горизонтальным полосам полосы задач.

–

label

Устанавливает текст заголовка полосы задач. Значение атрибута может быть либо текстом, либо ключом в пакете сообщений. В случае ключа значение должно начинаться с префикса msg://.

–

PropertiesMapping

Карточки задач Kanban могут отображать определенные поля сущности задачи Kanban. Элемент propertiesMapping используется для установки сопоставления свойств сущности с полями карточки. Смотрите пример.

XML-элемент

propertiesMapping

Java-класс

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

Атрибуты

id - status - test - color - dueDate - priority - progress - swimlane - tags - userAvatar - username -
Атрибуты

Название

Описание

Значение по умолчанию

id

Указывает имя атрибута сущности, которое будет сопоставлено со свойством id карточки. id используется для идентификации карточки. Обязательный атрибут.

id

status

Указывает имя атрибута сущности, которое будет сопоставлено со свойством status карточки. status используется для упорядочивания карточек в соответствующие столбцы. Обязательный атрибут.

status

text

Указывает имя атрибута сущности, которое будет сопоставлено со свойством text карточки. text используется в качестве заголовка карточки. Обязательный атрибут.

text

color

Указывает имя атрибута сущности, которое будет сопоставлено со свойством color карточки. color применяется к левой границе карточки и также может использоваться в качестве фона с помощью атрибута taskColorEntireSurfaceEnabled.

–

dueDate

Указывает имя атрибута сущности, которое будет сопоставлено со свойством dueDate карточки. dueDate отображается на карточке в виде даты. Если dueDate в прошлом, карточка будет выделена как просроченная.

–

priority

Указывает имя атрибута сущности, которое будет сопоставлено со свойством priority карточки. priority отображается на карточке в виде иконки.

–

progress

Указывает имя атрибута сущности, которое будет сопоставлено со свойством progress карточки. progress отображается на карточке в виде индикатора выполнения.

–

swimlane

Указывает имя атрибута сущности, которое будет сопоставлено со свойством swimlane карточки. swimlane используется для упорядочивания карточек в соответствующие полосы задач.

–

tags

Указывает имя атрибута сущности, которое будет сопоставлено со свойством tags карточки. tags отображаются на карточке в виде небольших значков с текстом.

–

userAvatar

Указывает имя атрибута сущности, которое будет сопоставлено со свойством userAvatar карточки. userAvatar используется для отображения аватара пользователя на карточке.

–

username

Указывает имя атрибута сущности, которое будет сопоставлено со свойством username карточки. username используется для отображения ответственного за карточку.

–

Смотрите также

Смотрите документацию Kanban для получения дополнительной информации.