Go to websiteGet a demo

Widgets

Widgets are the fundamental building blocks of your application's User Interface. They are the visual components you add to the UI Builder to display information, capture user input, and create interactive experiences.

This guide explains the general concepts common to all widgets. For details on specific widgets, please refer to the articles in the following categories:

Managing Widgets in the UI Builder

Placing, Moving, and Resizing

To place a widget, navigate to the Widget Icons in the Toolbar [], select the widget you need, and click on the UI canvas to place it. Once on the canvas, you can select the widget to move it, or use the grab-markers to resize and rotate it, just as you would in other design tools.

Placing a widget

Changes to a widget's position, size, or rotation may or may not affect its appearance on other screen sizes. Always check each device preview to ensure your layout is correct.

The Context Menu

Right-clicking on any widget opens a context menu with several powerful tools:

  • Delete: Removes the widget. This can't be undone.

  • Copy / Paste: Copies the widget and its configuration. You can also use Ctrl+C and Ctrl+V.

  • Export / Import Widget: Exports the widget's configuration as a .json file that can be imported into other apps.

  • Unlink All: Removes all data bindings connected to the widget.

  • Toggle Multi-tenancy: By default, widget data is user-specific (multi-tenant). You can toggle this off to make a widget "shared," meaning its content will be the same for all users.

  • Widget Info: Shows the widget's unique ID and any existing links to your backend logic.

  • Full Width for Mobile: Expands the widget to the maximum width on the mobile screen preview.

Widget Configuration

To configure a widget, select it in the UI Builder. Its unique configuration options for styling, data mapping, and behavior will then appear in the toolbar at the top of the editor.

Since these settings are highly specific to each component, a full description of all available properties can be found in the documentation for each individual widget

Widget configuration options in the toolbar

Data Binding (Connecting to Logic)

Widgets come to life through data binding. This is the critical process of connecting the visual components in your UI Builder to the backend logic in your Flow Builder, allowing them to interact with data and respond to user input.

Binding Properties

Each widget has one or more named data bindings, which we call Properties. These properties are the specific channels through which data is exchanged. For example, a Form widget has a formData property to send out user input and an autoFill property to receive data. You will find a full list of these properties in each widget's specific documentation.

Binding Directions

There are three ways to connect a widget and a function:

  1. From Widget to Input: A widget's property (e.g., formData) is connected to a function's input to provide the backend with data.

  2. From Widget to Trigger: A widget's event (e.g., a button's onClick) is connected to a function's trigger to start a flow.

  3. From Output to Widget: A function's output is connected to a widget's property (e.g., autoFill) to dynamically update the UI.

How to Link and Unlink

  • To link: Select the widget in the UI Builder, then drag a part of a function (an input, trigger, or output) from the Flow Builder onto the widget.

  • To unlink: Click the x next to the property in the linked function, or use the widget's context menu and select Unlink All.

Link Indicators

The color and shape of a widget's grab markers change to show its link status:

  • ⚪ White Rectangle: No link

  • 🔵 Blue Rectangle: Linked to an input

  • 🟢 Green Rectangle: Linked to a trigger

  • 🔴 Red Rectangle: Linked to an output

  • 🔵/🔴 Circle: Two or more links of the same type

Last updated