UI widgets & elements
Learn how to build user interfaces and what widgets are.
Last updated
Learn how to build user interfaces and what widgets are.
Last updated
The user interface can be built with three main components:
Dynamic widgets that capture data or display data.
Button widget that captures user clicks as events.
Static widgets (elements) like text boxes, icons and images.
Building an actual user interface is optional. Apps consisting of pure logic work, too.
Dynamic widgets are the key elements to build interactive user interfaces. There are input widgets to capture data, display widgets to visualize data and buttons to capture user events.
To place a widget, navigate to the widget bar (), pick a widget and click in the UI editor to place it.
Moving, resizing and rotating a widget works as known from other tools. Select the widgets first and simply move it, or grab and move one of the grab markers.
Changing position, size, or rotation of widgets may or may not affect the widget on other screens sizes. You are advised to check each preview individually.
Widgets are “stupid” and contain no logic of their own. However, some can receive commands, some can send events, some have properties that they can pass to the logic and some have properties that can be set by the logic. Each widget is different and allows different interactions.
A widgets property represents a state that a widget can hold and persist until changed again. This state can either be set by the application logic with a set property or by the user, typically then passed back to the logic with a get property.
Most widgets are limited to either setting or getting properties, while others, like the data grid, support both directions. For example, the data grid can display data (via set from the logic) and also transfer data that a user adds or modifies within the grid via get to the logic.
To set a property from the logic, you must connect an output or a modifier to the widget. To receive a property in the logic, you need to connect a widget to an an input.
The following table provides an overview of properties:
| Interaction | Links | Description | Examples |
|---|---|---|---|
| Function output or modifier with widget | Provides a property to a widget to change the data shown. The widget will keep the property until it is set again. |
|
| Widget with function input | Receives a property from a widget to work with it in the logic. |
|
It can happen that instead of get, from is used. We are currently changing it.
In contrast to properties, commands cause a non-persistent change in the state of a widget, e.g. to trigger a loading animation. The widget returns to its initial state when the app is reloaded.
User clicks on widgets can be recorded as events and transferred to the logic in order to trigger an action there, e.g. triggering a function.
To send a command to a widget, you must connect an output to a widget. To capture a click as event, you need to connect a widget to an input or trigger.
The following table provides an overview of commands and events:
| Interaction | Links | Description | Examples |
|---|---|---|---|
| Function output with widget | Sends a command to a widget so it takes an action. |
|
| Widget with function input | Captures a click from a widget to trigger an action in the logic. |
|
The image below shows a function thats input, trigger and output are connected to widets.
from formData receives a property from a (form) widget to become the functions input.
on button click caputres a user click on a button to trigger the function.
set value sends the value (in this case data from a form) to a (value box) widget.
To switch between properties, commands or clicks simply click on the interaction to be switched in the linked function and select another one.
To link a function to a widget, select the widget and drag a part of a function or a modifier onto the widget.
To unlink a widget from a function/modifier, click on the x next to the property in the function/modifier or click Unlink All in the widgets context menu.
The color and shape of a widget's grab markers contain information about its links:
White rectangle: No link
Blue rectangle: Link to input
Green rectangle: Link to trigger
Red rectangle: Link to output
Blue or red circle: Two or more links
Yellow rectangle or circle: Hover effect when before dropping a function
One widget can have various links with functions and modifiers. A light shadow on a function indicated existing links if a widget is selected.
Each widget offers different configuration options, settings, and presets. These can be accessed using the icons that appear in the top bar as soon as the widget is selected. The specific options and capabilities are explained on the respective subpages of the individual widgets.
Each widget provides a context menu on right-click.
The options in the context menu are:
Delete a widget
Copy a widget. To paste it, right-click somewhere in the UI editor and click paste.
Export widget: Export the widget as a .json file. To import it, right-click somewhere in the UI editor and click import.
Unlink all connections to functions.
Toggle multi-tenancy: By default, apps and widgets support multi-tenancy. Sometimes it is required, though, that a widgets content, defined by one user, appears the same for all users. In such a case, toggle multi-tenancy to define a widget as shared.
Widget info: Shows you the widget ID and potential links to functions (executor ID).
Deleting a widget can't be undone.
Duplicating widgets works with Ctrl+C and Ctrl+V, too. The copied widget must be moved a little to become visibile.
