Overview

Kanban

Business archetype for column-based task management (board) with metadata-driven drag & drop.

Screenshot Reference (User Manual)

manual__kanban__01.png: kanban board with status columns, cards, and drag & drop.

Use Cases

Operational task boards (To Do, In Progress, Review, Done).
Ticket/process state management.
Quick record sorting based on state.

md_props_bag: archetypes.kanban

Snippet 1JSON

{
  "archetypes": {
    "kanban": {
      "advancedFilter": false,
      "statusField": "StatusId",
      "colorField": "ColorHex",
      "wipLimitField": "WipLimit",

advancedFilter: when true, shows the wuic-filter-bar for the kanban archetype (at data-repeater level).
statusField: metadata field that identifies the card/record state (required for a working board).
colorField: field name on the statusField lookup route used as column/tile color; if absent/empty, uses static fallback.
wipLimitField: field name on the statusField lookup route used to dynamically set the WIP limit for each tile (when statusColumns is not defined).
wipLimitHardField: boolean field name (bit) on the lookup route that decides whether the

tile WIP limit is hard (true, blocking drop) or soft (false, warning only).

Example in the sample dataset: the lookup route wuic_kanban_status exposes the columns

WipLimit (int) and WipLimitHard (bit); the Review row has WipLimitHard=1,

so once WipLimit=3 is reached, further drops on the Review column are blocked.

assignedUserIdField: lookup metadata field containing the task assignee user ID; the card renders the lookup descriptive value (not the raw ID).
statusColumns[]: board column definition (order, label, color, optional wipLimit = Work In Progress Limit and wipLimitHard).
titleField: text field used as card title.
descriptionField: card description field.
cardSubtitleField: card subtitle field.
clickAction (enum): none, detail, edit.
persistMode (enum):
immediate: each drop persists immediately server-side.
batch: accumulates local changes and saves/cancels in bulk.

Operational Notes

If statusField is missing, the board shows a configuration warning and does not crash.
If a card has empty/null state, it ends up in the "Unassigned" column.
If statusColumns is not defined (or is empty), columns are automatically generated from the lookup route linked to statusField:

- value: taken from mc_ui_lookup_dataValueField

- label: taken from mc_ui_lookup_dataTextField

- order: natural order returned by the lookup route (getFlatData without additional sort)

- color: taken from colorField if configured; as fallback, uses the runtime static palette (defaultStatusColors[]).

- wipLimit: taken from wipLimitField if configured.

- wipLimitHard: taken from wipLimitHardField (boolean).

When wipLimit is exceeded:

- hard (wipLimitHard=true): drop blocked.

- soft (wipLimitHard=false): drop allowed with warning.

Events and Subscriptions (Host)

Events available on wuic-kanban-list:

onKanbanDataBound: emitted when the board is rebuilt from the datasource.
onKanbanCardDrop: emitted on card drop with fromStatus/toStatus.
onKanbanCardClick: emitted on card click.
onKanbanBatchSave: emitted after batch save.
onKanbanBatchCancel: emitted after batch cancel.
onKanbanConfigApplied: emitted after archetype configuration apply.

Subscribe example:

Snippet 2ts

@ViewChild(KanbanListComponent) kanban?: KanbanListComponent;
private readonly subs = new Subscription();

ngAfterViewInit(): void {
  if (!this.kanban) return;
  this.subs.add(this.kanban.onKanbanDataBound.subscribe((e) => console.log(e)));
  this.subs.add(this.kanban.onKanbanCardDrop.subscribe((e) => console.log(e)));

Import and mount (Angular component)

Import LazyKanbanListComponent from 'wuic-framework-lib' and mount it with the framework DataSource:

Snippet 3ts

import { DataSourceComponent, LazyKanbanListComponent } from 'wuic-framework-lib';

@Component({
  selector: 'app-esempio',
  imports: [DataSourceComponent, LazyKanbanListComponent],
  template: `
    <wuic-data-source #ds [hardcodedRoute]="'<route>'" [autoload]="true"></wuic-data-source>

EXACT names (wuic-framework-lib barrel): class LazyKanbanListComponent, selector <wuic-kanban-list-lazy>. Import that class, not invented variants (e.g. a Lazy prefix where there is none, or vice versa) → otherwise the build fails with has no exported member.

Metadata-driven config: the tag accepts ONLY the standard inputs [hardcodedRoute], [hardcodedDatasource], [autoload], [hideToolbar]. Widget-specific configuration (here: the grouping columns/status (KanbanOptions)) is NOT an HTML input ([groupField], [type], … give NG8002 not a known property) → it goes in the metadata (md_props_bag/archetype) or in-code via metaInfo.