UI elements
Last updated
Last updated
Apps built with the App Builder have a frontend by default, accessible via a custom URL in a browser. However, building an actual UI is optional; apps can function solely as backend services.
The user interface can be built with two main components:
Dynamic widgets that capture data or clicks and display data.
Static elements like text boxes, icons and images.
Widgets are the key elements to build an interactive UI. There are widgets to capture data, to visualize data and buttons to capture clicks.
Widgets possess properties that make data exchange between the backend and frontend possible. A widget's property can be either set by a function or passed to a function. Two types of properties exist: data properties and behavior properties.
The primary property of a widget is its data property, representing essential data passed between the frontend and backend. Depending on the widget, the data property could, for example, encompass form data, values, or geographical locations. Some widgets may have multiple data properties; for instance, a circular gauge offers a value and a subValue property.
Behavior properties allow for the modification of a widget's behavior or temporary or permanent modification of its appearance. Not all widgets offer behavior properties, and some offer more than one behavior property. When linking functions with widgets and designing business logic, distinguishing between data and behavior properties may pose a challenge. However, understanding how each property influences widget behavior and what data it conveys to the backend is more crucial than this distinction. Detailed property explanations for specific widgets can be found in their respective sub-articles.
To set or pass a widget's property, it must be linked to a function or a modifier. Each link can handle one property at a time. The property to be set or passed is displayed within the linked function, either in the corresponding part of the function or in a modifier.
To switch between the properties, simply click on the property to be changed in the linked function and select another one.
With the UI editor, widgets can be placed, moved, resized, linked, unlinked, and deleted. Widgets provide information via a context menu (right-click) and by the color of their frame.
To place a widget:
Pick the group and a widget
Click in the UI preview to place it
To move a widget:
Select the widget you want to move with a click
Drag and drop it to a new location within the UI preview
To resize a widget:
Select the widget you want to resize
Drag and drop one of the gripping points of the widgets border
To rotate a widget:
Select the widget you want to rotate
Drag and drop the rotation gripping point
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.
To link a widget with a function:
Select the widget
Drag and drop a part of a function (input, trigger, output) or a modifier onto the widget
One widget can have various links with functions and modifiers.
To unlink a widget from a function/modifier, you have two options:
To remove a specific link, click on the x next to the property in the function/modifier
To remove all links from and to a widget:
Right-click on the widget
Click Unlink All
To delete a widget:
Right-click on the widget
Click Delete
By deleting a widget, all its links and settings are deleted with it. This action can't be undone.
To duplicate a widget:
Right-click on the widget
Click Copy
Right-click into free space in the UI preview
Click Paste
Links are not duplicated when duplicating widgets.
Copy and paste using Ctrl+C and Ctrl+V also works in the UI editor. The widget copy might be placed in the same position as the copied widget and must be moved a little.
Widgets have an ID and can information about its links. To get the widget ID and information about links, including type, property, and function ID:
Right-click a widget
Click on Widget Info
Additionally, color and shape of a widget's gripping points contain information about its links and the number of links. To see the gripping points, select a widget first. The gripping points can be:
White rectangle: No link
Blue rectangle: Link to input
Green rectangle: Link to trigger
Red rectangle: Link to output
Colored circle: Two or more links
Yellow rectangle or circle: Indicates readiness for dropping a function
A light shadow is applied to all functions in the logic board that have links to or from this widget when the 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.
Navigate to the widget area in the top bar
