> For the complete documentation index, see [llms.txt](https://docs.heisenware.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.heisenware.com/app-builder/build-frontend/widgets.md).

# Widgets

Widgets are the interactive building blocks of your App's UI. Static elements set the context; widgets work with your backend logic to display live data, capture user input, and trigger functions and flows. See [display widgets](/app-builder/build-frontend/widgets/display-widgets.md), [input widgets](/app-builder/build-frontend/widgets/input-widgets.md), and [trigger widgets](/app-builder/build-frontend/widgets/trigger-widgets.md) for details.

## Configuration

Double-click a widget, or select it and click the edit icon on the toolbar, to open its settings. Most settings are unique to the specific widget.

These settings let you:

* **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 for quick actions and data settings. Besides the general options (order, full width, tile view), you can:

* **Toggle multi-tenancy**: Controls how users see data.
  * **Isolated**: Each user sees only their own data, based on their session filters. Another user can filter differently without affecting your view. This is the default setting.
  * **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**: Clears every connection between the widget and your backend flows in a single click.

## Data binding

A widget operates once you link it to the [Backend Builder](/app-builder/build-backend.md) through its properties, which serve as connection points that carry data in and out.

### How to link

1. Select the widget in the [Frontend Builder](/app-builder/build-frontend.md) (optional).
2. Drag a [function](/app-builder/build-backend/functions.md) part (an input, trigger, or output) or a [modifier](/app-builder/build-backend/extension-nodes/modifier.md) from the [Backend Builder](/app-builder/build-backend.md) and drop it onto the widget.
3. Pick a widget property inside the menu. The platform selects the main property automatically.

To break a link, click the `x` next to the property in the linked function, or use the widget's context menu to unlink all.

### Data direction mechanics

Drag from the function or extension node onto the widget. The selected slot determines the behavior:

* **Function output or modifier to widget**: A function output or modifier writes into a widget property, such as feeding a dataset into a chart or a status into a status lamp. Data flows from logic to the UI.
* **Widget to function input**: A widget event flows into a function input. Each event carries its data payload. For example, when a user edits a value in a data grid, the modified record travels into the function immediately. For some widgets, editing events only fire when you enable the corresponding setting on the widget.
* **Button to function trigger**: Connect a function trigger to a [button](/app-builder/build-frontend/widgets/trigger-widgets/button.md) so a click executes the function. The trigger transmits no data. This applies strictly to buttons since they are the only trigger widget, though you can also configure [icons](/app-builder/build-frontend/text-icons-and-images.md) to act as buttons.

{% hint style="info" %}

#### Auto-triggering on input

To execute a function automatically from UI input instead of a click, wire the input of the function to its trigger. The incoming data feeds and executes the function without requiring a button.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.heisenware.com/app-builder/build-frontend/widgets.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.