UI widgets & elements

The user interface can be built with three main components:

1. Dynamic widgets that capture data or display data.

2. Button widget that captures user clicks as events.

3. Static widgets (elements) like text boxes, icons and images.

Dynamic widgets

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.

Managing widgets

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.

Configuring widget interactions

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.

Properties

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:

Commands and events

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:

Example

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.

Switching interactions

To switch between properties, commands or clicks simply click on the interaction to be switched in the linked function and select another one.

Linking widgets with logic

• 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.

Linking markers

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.

Widget styling and settings

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.

Context menu

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).