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.

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

The Tree tab is a hierarchical list. Use Expand all and Collapse all to navigate. Selecting a row drives the properties panel. Drag rows when you need to reorder and the layout allows it.

See also