# Data binding types

## Data Binding

Data Binding is where you connect the API requests with the app design, or alternatively allows direct manipulation of Figma text within Bravo using Static binding.

To initiate Data Binding:

1. Open an App and select an App Screen.
2. Begin the binding process.

Two primary modes of Data Binding are available:

1. [**API Binding**](#id-1.-api-binding)**:** Choose from a dropdown menu of API collection requests to link your app's design pages and elements.
2. [**Static Binding**](#id-2.-static-binding)**:** This mode offers flexibility by allowing the addition of variables sourced from the backend or other API requests. 

### 1. API Binding

Select from the dropdown the API collection requests you want to connect your app design pages and items. 

<figure><img src="/files/gSknV9oYvtVpoqjd30ZO" alt=""><figcaption></figcaption></figure>

### **2. Static Binding**

The main benefit of using the static sinding is that you can add variables used from the backend or other API requests. For example, to get the Resort name such as “**Welcome to the** <mark style="color:red;">`${name}`</mark>”.

{% hint style="info" %}
When using static binding, ensure that an API request is set up on the same screen.
{% endhint %}

Toggle between **API binding** and **Static binding** mode on the Data icon:\
\
When employing Static Binding, ensure an API request is configured on the corresponding screen.

* **Blue**: API binding.
* **Grey:** Static binding.

<figure><img src="/files/bv8tgsIZmuOeKniXdABE" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To remove the static content and get Figma content back just toggle to the API mode since it's the default state in Bravo Studio.
{% endhint %}

<figure><img src="/files/HPxgYjq4awmiXeJ7wqdx" alt=""><figcaption><p>Static binding mode</p></figcaption></figure>

{% hint style="info" %}
**Tip**: You could also use the static binding for getting a response directly into a **stateful components toggle** with **True or false** states without the need to build an API request to do that.
{% endhint %}

## **API Data binding tutorials**

#### **Beginner**

{% content-ref url="/pages/-MlB8eoip-nCcuajRtfp" %}
[API binding types](/data-binding/data-binding-types/bind-multiple-properties-to-a-ui-element.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MfllnPeWFzs7Y7\_eNNW" %}
[Bind data to design for a list page](/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-list-page.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MflnsvAmWsTMw84cPsy" %}
[Bind data to design for a detail page](/data-binding/display-data-in-your-app/data-biding-bind-data-to-ui-for-a-detail-page.md)
{% endcontent-ref %}

#### **Advanced**

{% content-ref url="/pages/-MlAEZqQg5yMtK7mAWMy" %}
[Bind multiple API requests to one screen](/data-binding/data-binding-types/bind-data-to-ui-multiple-requests.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MflssHZZsI3e9HQ\_pME" %}
[How to connect my API to a mobile actions](/data-binding/data-binding-types/data-biding-connect-dynamic-data-to-actions-tags.md)
{% endcontent-ref %}

{% content-ref url="/pages/-Mflqdp7MgJmD1I9Voub" %}
[Send form input to a database](/bravo-tags/form-and-input-fields/data-biding-send-form-input-to-a-database.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MfluW\_5MCvTNJPUwVXZ" %}
[Remote actions: trigger an API request with a UI element](/data-binding/data-binding-types/data-binding-add-remote-actions-to-your-ui.md)
{% endcontent-ref %}


---

# Agent Instructions: 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:

```
GET https://docs.bravostudio.app/data-binding/data-binding-types.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.