Hierarchy

The Hierarchy panel allows you to manage the structure of your UI elements. Here you can nest widgets within each other, 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 the widgets with the Ctrl+D/Cmd+D keyboard shortcuts

Organization

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

Click the search icon to locate specific widgets within the hierarchy. Close the search function 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. Use the icon in the top-right corner 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 to a screen, there will appear an event indicator besides 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, either it misses key variables, or the key variables are not defined properly. Or the event is missing an action, or trigger.