Edit and layout widgets
Edit widgets
Right click one or more widgets
OR select them on the canvas or the "Control panel" tab in the "Properties" drawer
Change any of the properties in the properties section by clicking into its value field
![](../../__attachments/3757441599/chrome_2023-02-20%20at%2010.40.55.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
When widgets of different types are selected, only properties they have in common are shown.
Common properties
Name | Name (unique) |
---|---|
Color | Main color |
Label | Show an internal label, style and position it |
Size and position | X, Y, width and height |
Populate Options for Tab and Select widget
Select the Tab or Select widget
Double click the
List
icon of anEnum
orArray
like property in the "Engine" tab of the "Properties" drawerRemove or reorder options if needed
Click "Confirm"
![](../../__attachments/3757441599/Feb-17-2023%2013-46-38.gif?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Layout widgets
Widgets placed on the control panel are laid out on a responsive grid. A widget which is covering half the width of the control panel, will do so regardless of how wide your browser screen is.
Use font size Auto to automatically adjust the font size based on the actual widget size.
![](../../__attachments/3757441599/image-20230220-093228.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Font size: Auto
![](../../__attachments/3757441599/image-20230220-120402.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Font size: Fixed
Organize widgets
To organize your widgets in the control panel you have different options.
Use regions
If you run out of space, you can switch from the center region (5) to one of the 8 surrounding regions in the control panel.
![](../../__attachments/3757441599/Screenshot%202023-02-17%20at%2013.26.15.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Switch between regions
Open the Minimap on the bottom right corner of the canvas and click on a region
Use the number keys
1-9
Use
C
to switch to the center region (5
)Use the Trigger_Goto region action from the System actions menu
Use color
Every widget has a main color allowing to create visual relationships
![](../../__attachments/3757441599/Screenshot%202022-03-22%20at%2016.01.22.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Use internal labels
Every widget has an internal label allowing you to add descriptions.
![](../../__attachments/3757441599/Screenshot%202022-03-22%20at%2015.45.03.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Right click the widget to toggle, style and position it.
![](../../__attachments/3757441599/Screenshot%202023-02-20%20at%2010.56.31.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Choose the position of the internal label
Use groups
Group background widgets allow to group widgets together
Double click the header of the group widget to select and move all widgets within the group
![](../../__attachments/3757441599/Screenshot%202022-03-22%20at%2015.55.56.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Use modal dialogs
Any group can be turned into a modal dialog which can be triggered from any region.
Enable Modal in the Group widget properties
Link the Show modal action to a widget
Place the widget where ever needed
Showing the modal dialog can also be linked to a hotkey. Learn more about how to use hotkeys
Use label widgets
Label widgets allow to add longer descriptions with more formatting options.
![](../../__attachments/3757441599/Screenshot%202022-03-22%20at%2016.10.47.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Label > Render: Label
![](../../__attachments/3757441599/Screenshot%202023-06-09%20at%2010.57.36.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Label > Render: JSON
Arrange widgets
To group select widgets, go into Select mode by pressing
V
Move, resize, cut, copy and paste the widgets
Align the widgets by opening the align dialog via the shortcuts tray
Return to Draw mode by pressing
V
again
Select widgets
Select a single widget
Click the widget on the canvas
OR
Select the widget name in the Properties drawer > Widgets tab
Select multiple widgets
Drag a selection rectangle over the widgets in the canvas
If the mode is set to Insert, it automatically switches to Select when the insert rectangle intersects with another widget. To manually switch to Select, click on the icon in the toolbar or press V
.
![](../../__attachments/3757441599/Screenshot%202023-02-20%20at%2015.54.43.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Copy/Duplicate widgets
Duplicate one or more widgets
Select the widgets to copy
Press
Ctrl+C
andCtrl+V
(orCtrl+D
)the widgets are inserted at the location of the mouse or the next available space
NOTE: this also works across different control panels!
OR
Select the widgets to copy
Press the
Alt
key and start dragging the selection
Actions are copied together with the widget. If a copied action refers to a widget included in the selection, the action is updated to refer to the new widget.
For copying actions only check out Copy an action
Align widgets
Select the widgets to align
Press
A
or click the align icon in the toolbar
Depending on the selection you get the option to
Align left, right and center
Align top, bottom and center
Extend to the left, right or on both ends
Extend to the top, bottom or on both ends
![](../../__attachments/3757441599/Screenshot%202023-02-20%20at%2016.48.34.png?inst-v=9a48e7bf-6403-4094-a858-ffe80445b919)
Snap to grid
There are cases where a widget can end up not being aligned to the grid.
Press
S
to snap all widgets to the grid