Building frontend

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 frontend primarily handles data capture, data visualization, and user guidance. It's constructed using two main components:

1. Widgets: Dynamic elements that capture and display data

2. Static UI elements: Text boxes, shapes, icons, and other non-interactive components

Interface customization

The UI editor offers a robust set of tools, empowering you to tailor the appearance and behavior of your app's interface. These features are designed to facilitate the creation of consistent, responsive designs that seamlessly adapt to various screen sizes and devices.

• Preview and customize your interface for smartphones, tablets, laptops, and desktops. Precisely size and position widgets and UI elements for each screen size and device.

• Start by designing for mobile devices and have changes automatically applied to larger screens. Fix the configuration for other devices by editing them individually.

• Utilize built-in help lines to ensure consistent and visually appealing widget sizing and alignment.

• Create pages and subpages to structure apps.

• Fine-tune in-app navigation to guide users effortlessly through complex app structures.

• Define the overall look and feel of your interface using theming.

Widgets

Widgets are the key elements to build an interactive UI. There are widgets to capture data, to visualize data and buttons to capture clicks.

Widget properties

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.

Data 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

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.

Linking and modification

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.

An echo function in which each part is linked, displaying the properties to be passed or set.

To switch between the properties, simply click on the property to be changed in the linked function and select another one.

Property selection for a widget passing data to a function input.

Work with widgets

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.

Place

To place a widget:

1. Navigate to the widget area in the top bar
2. Pick the group and a widget

3. Click in the UI preview to place it

Edit

To move a widget:

1. Select the widget you want to move with a click

2. Drag and drop it to a new location within the UI preview

To resize a widget:

1. Select the widget you want to resize

2. Drag and drop one of the gripping points of the widgets border

To rotate a widget:

1. Select the widget you want to rotate

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

Link and unlink

To link a widget with a function:

1. Select the widget

2. 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:

  1. Right-click on the widget

  2. Click Unlink All

Delete

To delete a widget:

1. Right-click on the widget

2. Click Delete

By deleting a widget, all its links and settings are deleted with it. This action can't be undone.

Duplicate and export/import

To duplicate a widget:

1. Right-click on the widget

2. Click Copy

3. Right-click into free space in the UI preview

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

Widget ID and links

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:

1. Right-click a widget

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

Settings and configuration

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.