Overview
FlowKanban is a high-level container component for building interactive Kanban boards. It provides a modern, industrial interface with specialized layout zones and comprehensive task management capabilities.
The Kanban system spans multiple partial classes for modularity:
FlowKanban.cs (core), FlowKanban.Dialogs.cs (modals), FlowKanban.Drop.cs (drag & drop), FlowKanban.Home.cs (multi-board navigation), and FlowKanban.UI.cs (sizing and scrolling).Quick Start
Basic Kanban Board
- Column and task management
- Drag & drop reordering
- Built-in dialogs for editing
- Auto-save and persistence
- Undo/redo support
Programmatic Setup
Bind to an existing data structure in your ViewModel:Key Features
Column Management
Add or remove board sections dynamically
Add or remove board sections dynamically
Columns represent workflow phases (e.g., “To Do”, “In Progress”, “Done”). Users can add, remove, rename, and reorder columns through the UI or programmatically.
WIP Limits
WIP Limits
Set per-column limits with automatic enforcement and visual warnings. Columns display their current count and WIP limit, with visual indicators when limits are exceeded.
Column Policies
Column Policies
Define Definition of Done (DoD) or Entry criteria for each column using the policy field.
Task Management
- Create and delete tasks within individual columns
- Drag & drop to move tasks between columns or reorder within a column
- Multi-select for bulk operations (move, archive, delete)
- Blocked state - mark tasks as blocked with reasons and duration tracking
- Blocked tasks cannot move forward to later columns or be archived
- Progress is capped at 99% until unblocked
- Subtasks with completion tracking
- Priority badges (non-normal priority displayed)
- Progress badges (>0% displayed)
- Archive - move completed tasks to an archive column
Swimlanes
Lane Management:
- Create, reorder, and delete lanes in board properties
- Fallback lane selection on delete (reassigns tasks to another lane)
- Lane-aware drag & drop (dropping into a lane cell updates the task’s
LaneId)
Undo/Redo
- Overview
- Usage
- Behavior
Command history for card operations with bounded stack (50 entries).Recorded operations:
- Move card, add card, delete card
- Edit title/description/palette
- Block/unblock, archive/unarchive
- Bulk flows (one command per task)
- Priority/tags/due date edits
- Column operations
- Board settings, zoom, selection
Multi-Board Management
The Home screen (FlowKanbanHome) provides:
- Responsive grid of boards with thumbnails
- Search bar for filtering boards by name
- Sort options (modification date, title)
- Board actions: rename, duplicate, delete, export
- Create Board action in toolbar
Layout Zones
Main Board Area (Left/Center)
The core workspace uses aScrollViewer for horizontal navigation between columns. Each column is a vertical stack of FlowTaskCard controls.
Swimlane Grid (When Enabled)
The swimlane layout renders a fixed header row for columns and a row per lane. Each lane row contains a column cell with lane filtering applied, enabling true matrix-style boards.Utility Sidebar (Right)
A space-efficient vertical bar (56px wide) containing squareDaisyButton controls for board-level management:
- Home
- Settings
- Undo/Redo
- Zoom In/Out
- Save/Load
- Metrics/Help
Dialogs
FlowTaskEditorDialog
A full-featured modal for editingFlowTask objects. Uses DaisyCollapse sections:
Details
Details
Title, description, palette color, subtasks
Scheduling
Scheduling
Due date, start date, reminder
Effort
Effort
Story points, estimated hours, priority, progress
People
People
Assignee field
FlowBoardEditorDialog
Edits board-level properties:- Title, description, created by
- Read-only metadata (created date, board ID)
- Swimlane enablement
- Full lane management (add, reorder, delete with fallback reassignment)
FlowKanbanSettingsDialog
Configures Kanban instance settings. User-scoped preferences are persisted per user.| Setting | Description |
|---|---|
| Confirm column removals | Require confirmation before deleting a column |
| Confirm card removals | Require confirmation before deleting a card |
| Auto-Save after edits | Auto-save board after any edit |
| Auto-expand card details | Expand card details in the editor by default |
| Enable undo/redo | Toggles command history and undo/redo UI |
| Display Add Card | Placement (Bottom/Top/Both) |
| Show archive column | Shows or hides the archive column |
| Show welcome message | Toggle the Home welcome panel |
Persistence
Persistence is handled viaStateStorageProvider and stores data in the same application settings location as other .state files.
- Storage Keys
- Features
- API
- User settings:
kanban.user.settings.<userId>(with fallback to legacykanban.settings) - Board files:
kanban.board.<id>(one entry per board ID) - Global admin:
kanban.admin.global(bootstrap admin ID)
FlowKanbanManager API
FlowKanbanManager provides a full programmatic API for managing a FlowKanban board.
Initialization
Column Management
Task Management
WIP & Policy Management
Blocked & Archive State
Lane Operations (Swimlanes)
Selection & Bulk Operations
Board Operations
Zoom & Size
Complete Example
Properties
| Property | Type | Description |
|---|---|---|
Board | FlowKanbanData | The root data model containing the columns and tasks |
BoardStore | IBoardStore | Persistence backend for boards (default JSON store) |
BoardSize | DaisySize | Current size tier for board controls |
ConfirmColumnRemovals | bool | Require confirmation before deleting a column |
ConfirmCardRemovals | bool | Require confirmation before deleting a card |
AutoSaveAfterEdits | bool | Auto-save board after edits |
AddCardPlacement | FlowKanbanAddCardPlacement | Inline add card placement (Bottom/Top/Both) |
EnableUndoRedo | bool | Enables undo/redo command history |
CommandHistory | FlowKanbanCommandHistory | Undo/redo stack manager |
IsStatusBarVisible | bool | Controls visibility of the status bar |
IsSwimlaneLayoutEnabled | bool | True when Board.GroupBy is set to Lane and lanes exist |
UserProvider | IUserProvider | User provider for identity resolution (defaults to LocalUserProvider) |
Commands
| Command | Parameter | Action |
|---|---|---|
AddColumnCommand | None | Appends a new column to the board |
RemoveColumnCommand | FlowKanbanColumnData | Removes the specified column |
EditColumnCommand | FlowKanbanColumnData | Opens the column editor dialog |
AddCardCommand | FlowKanbanColumnData | Adds a new task to the specified column |
RemoveCardCommand | FlowTask | Removes the specific task |
EditCardCommand | FlowTask | Opens the task editor dialog |
UndoCommand | None | Undoes the last command |
RedoCommand | None | Redoes the last undone command |
SaveCommand | None | Serializes the current board |
LoadCommand | None | Deserializes the last saved board |
SettingsCommand | None | Opens Kanban settings dialog |
EditBoardCommand | None | Opens board properties dialog |
ZoomInCommand | None | Increases board size tier |
ZoomOutCommand | None | Decreases board size tier |
Best Practices
Use Manager API for complex operations
Use Manager API for complex operations
The
FlowKanbanManager provides a safer, more convenient API than manipulating the Board data model directly.Enable auto-save for user boards
Enable auto-save for user boards
Set
AutoSaveAfterEdits = true to automatically persist changes after edits.Provide WIP limits for columns
Provide WIP limits for columns
WIP limits help teams manage capacity and highlight bottlenecks.
Use swimlanes for multi-dimensional tracking
Use swimlanes for multi-dimensional tracking
Lanes are ideal for tracking by team, priority, feature area, or any other dimension.
Export boards regularly
Export boards regularly
Use
manager.ExportToJson() to create backups or migrate boards between environments.
