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 genuinely nested and needs to be drilled into inline — file trees, category trees, org hierarchies. 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.

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

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 default header colors cycle through six preset colors. A seventh column's header has no background until you extend or replace the 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

Frequently Asked Questions

Why are my Kanban columns not showing?

The Kanban block requires data in a specific shape: an array of objects each with a category key and an items array. If your data source returns flat records (one row per item), you must transform it into the column-shaped format first — either with a data transformer or a server-side query that groups items by stage.

Can I disable drag-and-drop in Kanban?

Yes. In the Kanban Appearance settings, find the drag-and-drop toggle and disable it. When disabled, cards are display-only and the On Drop Item event will not fire.

How do I programmatically expand or collapse all Tree View nodes?

Use the expandAll and collapseAll methods on the Tree View block. Trigger them from a button's On Click event using the Call Block Method action. To toggle a specific node by key, use the toggleNode method with the node's primary key as the argument.

After a Kanban drag-and-drop, how do I persist the new column for a card?

The On Drop Item event fires when a card is dropped into a new column. The event payload includes the item that was moved and the target column's category value. Use these in a Trigger API action to call your backend and update the item's stage field, then refresh the data source to re-render the board with the updated data.