The Page structure window has been added to the project editor to provide a better overview of the page structures and the control elements they contain.
Grouping controls
If you add a control element to a page, it also appears in the Page structure window.

If you right-click on a control element in the Page structure window, you can assign it to a group.

Enter a name for the group under “New group” and confirm with “Ok”. In our example, the “Button” group has been created.

The “Button” group with the BreakerButton control element is now listed in the Page structure window.

If controls are arranged in groups, these groups can be selected by highlighting them and pressing Ctrl C and copied to another page by pressing Ctrl V. It is no longer necessary to call up and copy each individual control element.
If you right-click on an existing group, you can remove or rename it.

The control elements can be moved between groups or removed completely using drag & drop.
Levels of the control elements
As you have already seen in the article General properties of control elements one property of control elements is the Z-index. You use the value of the Z-index to determine the level of the element. An element with a higher index value visually covers an element with a lower index value.
You can also set this by clicking with the right mouse button. Now you can move the selected control element“To the foreground” or“To the background” with a further click.
With each click, the value of the Z-index is either increased to move the control element to the front level or decreased to move the control element to the level below.

The values of the Z-index of the other control elements on the page are taken into account.
For example, if the breaker button has a Z-index value of 1 and the text box has a Z-index value of 2, you can increase its Z-index value to 3 by right-clicking on the breaker button and then clicking on“Bring to front“. The breaker button will now visually cover the text box.

