Widgets

Widgets are the functional building blocks of your application's UI. While static elements provide context, widgets are what actually interact with your backend logic, displaying live data, capturing user input, and triggering functions and flows.

Working with widgets

Placing and moving

To add a widget, select a category and click the specific widget icon in the toolbar. Then, click anywhere on the UI canvas to place it. Once placed, you can:

• Move: Drag the widget to a new position on the canvas.

• Resize/rotate: Use the grab markers on the corners and edges to change the widget's dimensions or orientation.

Widget basics

Changes to a widget's position or size are saved per device size. Always check your other screen previews (XS–XL) to ensure the layout remains clean across all hardware.

Configuration

Double-click a widget or select it and click the edit icon () in the toolbar to open its settings. Most settings are unique to the specific widget you are using.

These configurations allow you to:

• Customize visuals: Adjust colors, labels, and styling to match your brand.

• Define behavior: Set default values, limits, or interaction rules.

• Toggle features: Enable or disable additional widget functionality, such as search bars.

Context menu tools

Right-click any widget to open a menu that combines quick actions, layer management, and data settings.

Layering and layout (Z-Order)

• Order: Adjust the "stacking" of overlapping elements.

• Full width: Instantly stretches the widget to fill the entire horizontal space of your current screen preview.

• Toggle tile view: Switches the widget into a "tiled" display mode.

Data and sharing

• Toggle multi-tenancy: This controls how users see the data.

  • Isolated (default): Each user sees only their data based on their own filters. Another person can filter differently without affecting your view.

  • Shared: Every user sees the same data in real time. If one user applies a filter, it updates globally for everyone viewing the app.

• Unlink all: A "reset" button that breaks every connection between the widget and your backend flows in one click.

Data binding (connecting to logic)

Widgets come to life when linked to your Flow Builder. We call these connection points properties.

How to link

1. Select the widget in the UI Builder (optional).

2. Drag a part of a function (input, trigger, output, or modifier) and drop it onto the widget.

3. Pick a widget property appearing inside the function block.

Data binding basics

To unlink, click the x next to the property in the linked function, or use the widget's context menu (right-click) and select unlink all.

Connection directions

• To input (blue): The widget sends data (like a form entry) into a function (e.g., a form entry).

• To trigger (green): A user action starts a function flow (e.g., clicking a button).

• From output (red): A function sends data to a widget's property to visualize a value or change a visual property.