Widget Tree

Workmaster features a Widget Tree that provides a clear hierarchical view of all widgets placed on the page. This tree displays the structure of widgets, including their relationships and positioning within containers, making it easier to manage and understand the layout of your app.

Here is a simplified diagram of how the widget tree shows content:

If a widget is a container, its child widgets will be shown nested and indented inside the dotted outline of the widget. The diagram shows two child widgets of the main widget.

Empty containers show a shaded area where a new widget can be added.

Green lines show drop points when you are adding or moving a widget, to indicate where the widget will be added / moved to. They appear when you drag an existing widget from the tree or add a new widget from the Widget Panel.

Key Features of the Widget Tree:

• Hierarchy and Positioning: The Widget Tree displays the hierarchy of widgets, showing how each widget is nested within containers or other widgets. This visual representation helps you understand the placement of elements within the page and their relationship to one another.

• Selection: You can quickly select a widget, which may not appear on the main editing area because its size is small, or it has been set invisible via settings. The property editor will show settings for the widget selected, letting you edit them.

• Drag and Drop Rearranging: You can easily move or rearrange widgets in the Widget Tree by simply dragging and dropping them into the appropriate position. This feature provides flexibility in organizing widgets and making quick layout adjustments.

• Overview of Widgets: The Widget Tree allows you to see an overview of all widgets on the page, including their current position in the hierarchy. It’s especially useful for larger pages with multiple widgets, as it enables you to quickly navigate and manage them.

• Container Management: Containers, which are used to group widgets together (such as grid layouts or page containers), are also displayed in the Widget Tree. This allows you to efficiently manage widgets within their containers and ensures that the overall layout is organized.