Use the component tree

The Tree tab lists every component in the same nested order as the canvas. Use it when the form is crowded. Click a row to select that component. The root key is usually screen1.

Open Tree

  1. Click Tree on the left panel.
Tree tab on Event registration with Expand all and Collapse all.Tree tab on Event registration with Expand all and Collapse all.
  1. Click Expand all to see nested containers and fields.
  2. Click Collapse all to hide children.

Select a component

email selected in Tree with the matching Email field highlighted on the canvas.email selected in Tree with the matching Email field highlighted on the canvas.

  1. Click a row (for example email).
  2. The canvas highlights that component.
  3. The right panel shows Main, Style, Actions, and Rules for that selection.

Row toolbar

Tree row for email with the compact toolbar open on hover: Add, Clone, Preset, and Remove.Tree row for email with the compact toolbar open on hover: Add, Clone, Preset, and Remove.

  1. Hover a Tree row.
  2. A compact toolbar appears: +, Clone, Preset, and Remove.
  3. Those icons match the canvas toolbar. Reveal in tree and Show nearby stay on the canvas toolbar only.

Selecting on the canvas does not scroll Tree. Click Reveal in tree on the canvas toolbar when you need that row in view.

Reorder

Event registration after dragging phone above email in Tree.Event registration after dragging phone above email in Tree.
  1. Drag phone above email in the tree.
  2. Release to drop among siblings in the same stack.
  3. Confirm the canvas: Phone is above Email.

If drag is blocked, the target may not accept that component type. Try a different container.

When you need the tree

  • Finding a field hidden inside a container
  • Checking parent–child order (for example a button inside a stack)
  • Reordering nested sections when the canvas is too dense to click

Find deeply nested fields

Tree tab with Expand all highlighted and nested containers expanded.Tree tab with Expand all highlighted and nested containers expanded.
  1. Use Expand all.
  2. Follow container keys (for example contactSection or contactStack).
  3. Select the inner field to edit keys or validation.

Summary

Tree mirrors the canvas hierarchy. Use Expand all and Collapse all to move around. Click a row to edit it on the right. Hover a row for the compact toolbar. Drag rows to reorder when the layout allows it.

See also