> 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 functional building blocks of your App's UI. While static elements provide context, Widgets are what actually interact with your backend logic. They [display live data](/app-builder/build-frontend/widgets/display-widgets.md), [capture user input](/app-builder/build-frontend/widgets/input-widgets.md), and [trigger](/app-builder/build-frontend/widgets/trigger-widgets.md) Functions and Flows.

## Configuration

Double-click a Widget, or select it and click the pen icon in the Toolbar, to open its settings. Most settings are unique to the specific Widget you're using.

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**: This controls how users see the 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**: A reset button that breaks every connection between the Widget and your backend Flows in one click.

## Data binding

Widgets come to life when linked to the Backend Builder. We call these connection points Properties.

### How to link

1. Select the Widget in the Frontend Builder (optional).
2. Drag a part of a [Function](/app-builder/build-backend/functions.md) (an Input, Trigger, Output, or Modifier) and drop it onto the Widget.
3. Pick a Widget Property appearing inside the Function block.

<figure><img src="/files/5Tpl0IjrSzBi7C4d2SZC" alt=""><figcaption><p>Data binding basics</p></figcaption></figure>

To unlink, click the `x` next to the Property in the linked Function, or use the Widget's context menu to `unlink all`.

### Connection directions

* **To Input**: The Widget sends data into a Function.
* **To Trigger**: A user action starts a Function Flow.
* **From Output**: A Function sends data to a Widget's Property, either to visualize a value or to change a visual setting.


---

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