Hierarchy

The Hierarchy panel allows you to manage the structure of your UI elements. Here, widgets can be nested within each oher, creating parent-child relationships where the container widget becomes the parent and the elements inside it become child widgets.

Widget structure in the Hierarchy

Each widget in the Hierarchy consists of:

• Dropdown arrow icon
• Widget icon - helps visualize the widget type
• Widget name

On each widget there is a dropdown menu with the following contents:

• Duplication icon
• Copy icon
• Paste icon
• Paste as child icon
• Deletion icon

Widget functions in the Hierarchy

• Rename widgets by double-clicking on them in the hierarchy
• Copy and paste elements with keyboard shortcuts Ctrl+C/Cmd+C and Ctrl+V/Cmd+V
• Duplicate widgets with Ctrl+D/Cmd+D keyboard shortcuts

Organization

Rearrange elements using drag and drop to properly structure the project and control how layers appear on the screen canvas. This affects the visual stacking order of widgets.

The search icon can be used to locate specific widgets within the hierarchy. The search function can be closed by clicking the X button when finished.

Panel customization

The panel can be freely positioned anywhere in the editor, and its size can be customized by dragging its edges. The icon in the top-right corner can be used to maximize the tab size. When maximized, the same icon returns the panel to its previous size.

Event feedback on the Hierarchy panel

After an event has been added to a widget or screen, an event indicator will appear next to the hierarchy element. The indicator idicates if the event is either functional, or if it needs further configuration to work properly.

There are two states of the event indicator

• Green

  The event is properly set up and fully functioning.

• Red

  The event is not set up properly, It may be missing key variables, the variables may not be defined correctly, or the event may be missing an action or trigger.