Skip to content
Developers

Examples

Kanban board

Render resource references in lanes and submit App-owned move commands.

Public contractsResourceBoard

Live preview

Live

Kanban resource board

Cards are domain references. Dragging proposes a command; the App accepts and persists it.

ResourceBoard

Queued

2

In progress

1

Completed

0

Copyable source

Code example
TSX
import { ResourceBoard } from "@nexia/sdk/host";

export function KanbanBoardExample() {
    return (
        <ResourceBoard
            state="ready"
            readOnly
            projection={{
                board_key: "work-orders",
                version: 1,
                lanes: [
                    {
                        key: "queued",
                        label: "Queued",
                        count: 1,
                        accepted_actions: ["move"],
                        cards: [
                            {
                                resource: {
                                    app_key: "manufacturing",
                                    resource_key: "work_order",
                                    resource_id: "1042",
                                    display: "WO-1042 · Pump housing",
                                },
                                summary: [
                                    {
                                        key: "priority",
                                        label: "Priority",
                                        value: "High",
                                    },
                                ],
                                version: 1,
                                allowed_actions: ["move"],
                            },
                        ],
                    },
                    {
                        key: "done",
                        label: "Completed",
                        count: 0,
                        accepted_actions: ["move"],
                        cards: [],
                    },
                ],
            }}
            labels={{
                board: "Work-order board",
                laneCount: (lane, count) => `${lane} · ${count}`,
                moveCard: (resource) => `Move ${resource}`,
                moveError: (reason) => `Move rejected: ${reason}`,
            }}
        />
    );
}