Skip to content
CanopyX

Board

Records as cards in status lanes, with swimlanes, WIP limits and moves the host approves like any edit.

CanopyBoard18 tasks in 4 lanesDocumentation for the board

1 demo

Records as cards in status lanes, with swimlanes, WIP limits and moves the host approves like any edit.

Build one like it

The smallest complete version, in each language CanopyX supports for this view. The demo above is the same API with more data.

using CanopyX;
using CanopyX.Html;

var tasks = new CanopyDataGridView("migration", "Migration board") {
    Noun = "tasks",
    Board = new CanopyBoard("status") {
        TitleColumn = "title",
        SwimlaneColumn = "team",
        Editable = true
    }
};
tasks.Columns.Add(new CanopyColumn("title", "Task") { RowHeader = true });
tasks.Columns.Add(new CanopyColumn("status", "Status") { Editable = true });
tasks.Columns.Add(new CanopyColumn("team", "Team"));
tasks.Columns.Add(new CanopyColumn("owner", "Assigned to"));
tasks.Board.Lanes.Add(new CanopyBoardLane("ready", "Ready"));
tasks.Board.Lanes.Add(new CanopyBoardLane("active", "In progress") {
    WipLimit = 3
});
tasks.Board.Lanes.Add(new CanopyBoardLane("done", "Done"));
tasks.Board.Fields.Add("owner");

foreach (var (id, title, status, team, owner) in new[] {
    ("staging", "Prepare the staging hosts", "ready", "Platform", "Sam"),
    ("backup", "Verify backup restoration", "active", "Platform", "Jordan"),
    ("tls", "Remediate weak TLS settings", "active", "Security", "Alex"),
    ("dns", "Remove retired DNS records", "done", "Platform", "Taylor")
}) {
    var row = new CanopyGridRow(id);
    row.Cells["title"] = title;
    row.Cells["status"] = status;
    row.Cells["team"] = team;
    row.Cells["owner"] = owner;
    tasks.Rows.Add(row);
}
tasks.SaveHtmlPage("board.html");

Run this snippet (board, C#)Its output, generated with the site.

Try this in the demo

  1. Records

    Select a card and press Enter.

    Its record opens beside the board with every field, and the arrows step to the next card.

  2. WIP limits

    Look at the In progress lane heading.

    It reads 4 / 4: the lane holds as many cards as its limit allows.

  3. Facets

    Tick Security under Team in the filter panel.

    Every lane stays in place and shows only that team's cards, with its own count.