Tree View & Kanban

Tree View Block

The Tree View block renders hierarchical data as an indented tree of expandable, collapsible nodes — folders inside folders, categories inside categories, component trees. You bind it to an array where each item can carry a nested array of children under a key you choose. Like a Repeatable, every node renders a child layout you design, and inside that layout each node exposes its own item, index, level, hasChildren, and expansion state.

Tip: Use it for data that is already nested and needs to be drilled into inline — file trees, category trees, menu structures. For org hierarchies stored as flat records with a parent-ID field, use the Organization Chart block, which builds and lays out the tree for you. There is no built-in single selection; the tree tracks which nodes are open, and clicking fires an event you handle yourself.

Content Properties

Events

Methods

Exposed State

Note: Tree View tracks which nodes are open — there is no selectedNode state. Capture the clicked node yourself from the On Node Click event payload.

Tree View Gotchas

⚠ Clearing Primary Key disables drag-and-drop silently

If you enable drag-and-drop then clear the Primary Key, dragging stops working with no warning. Always keep a stable unique ID mapped when relying on node reordering.

⚠ Primary Key must be unique across the whole tree

Without a Primary Key, a node's ID is its position among its siblings, which repeats at every level. Because the list of open nodes is one flat list for the whole tree, expanding or collapsing a node can then affect the wrong one. Map a field that is unique across every level.

⚠ Drag-and-drop does not save the new order

Reordering only changes what is on screen. It is not written back to your data or data source, so the order reverts when the page reloads. To keep it, read currentData (or the On Order Change payload) and save it through an action.

Kanban Block

The Kanban block renders a board of columns and draggable cards from a column-shaped data array. Each element of the array supplies one lane — a category value that names the lane and an items array that fills it with cards. Every card renders the same card template with that item's data in scope.

Warning: The board does not group a flat list of records for you. Your data source must return an array where each element represents one lane, with the lane name in one field and its cards in an array field. Group flat records upstream before binding.

📄 Expected Data Shape

[ { "category": "To Do", "items": [ { "id": "1", "label": "Task A" } ] }, { "category": "Doing", "items": [ { "id": "2", "label": "Task B" } ] }, { "category": "Done", "items": [] } ]

Content Properties

Appearance Properties

Column Configuration

Columns appear in the same order as the rows of the bound data array. Reorder the rows to reorder the lanes — there is no separate ordering control.

Category Formats

Column Header Context Bindings

Card Template

The board holds a single card block (the Items Card) rendered once per item in every column. Select it on the canvas or layers panel and edit it — every card on the board updates together.

Per-Card Context Bindings

Events

Exposed State

Kanban has no methods of its own. To change the board, update its bound data and refetch the data source.

Kanban Gotchas

⚠ Duplicate category rows collapse silently

Columns are keyed by category value. When two data rows share the same value, the later row's items replace the earlier row's — they are not merged. A row with an empty category is dropped entirely.

⚠ You cannot show a column that has no data row

A lane exists only if a row of the data produces it. To keep an empty "Done" column visible, the data must still contain a row with Done as its category and an empty items array.

⚠ Item IDs must be unique across the whole board

Two items sharing an ID across different columns confuse drag-and-drop. The board finds the first match and can move the wrong card. Pick a field that is unique board-wide.

⚠ A missing Item ID shows an error instead of the board

If the ID mapping is empty or the first item has no value at that field, the whole board is replaced by an error panel. Validation samples the first item only — missing IDs deeper in the data are not caught up front.

⚠ Starter header colors run out after six columns

The starter header has six preset background colors, one for each of the first six columns. A seventh column gets no background (and white text) until you add more conditions.

Kanban Patterns

Task Pipeline

1. Group your data: Group flat task records by status upstream (in your data source or a transformation) to produce the column-shaped array with a category field and an items array.

2. Configure mappings: Set Mapped Category → Name to status and Mapped Items → Data to items, ID to id.

3. Handle drag events: On On Drop Item, call your API to update the task's status to toCategory, then refetch the data.

Date-Bucketed Board

1. Set category format to Date: In Mapped Category → Format, choose Date and pick a date pattern (e.g., d MMM).

2. Bind the formatted title: In the Column Header slot, bind the title block to {{ kanban1.context.column.formattedCategory }} (not category) to show the formatted date.

Related Blocks