# Binding Components

{% embed url="<https://www.youtube.com/watch?v=jV9LiBbyWYQ&list=PLSkzi9eq0vBnUGMnwXrRRVo9TXUjZ7uSj>" %}

Once you've connected your Data Sources and dropped relevant UI building blocks on the canvas, it's time to connect the UI and Data to set up the business logic

### What is binding?

If you have, say, a table component on the canvas and you want to display your "Companies" data (collection) in it, it's pretty easy: you go into the table settings and link it to the collection:

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FXJsxaw1tk3kmMhxINelQ%2Fimage.png?alt=media&#x26;token=5addc33f-ea85-48f7-be78-00194380caad" alt=""><figcaption></figcaption></figure>

But what if we move up the complexity a bit and would want to mke the `email` value from the selected row **appear in the input field**?

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FAUXI2L45qqMIcRQoOMPU%2Fimage.png?alt=media&#x26;token=fbe0ee6b-001f-4de5-8d60-68f98e663b7d" alt=""><figcaption></figcaption></figure>

In this case, we'll need **"Bind"**  (or link) the two componnets - a Table and an Input field. For this, we'll need to reference the email from the selected row in the table from the input field.

{% hint style="info" %}
Jet is designed so that (almost) all the dynamic values, such as values from selected elements, user and team properties, outputs of workflows, or values from HTTP responses are **"available" for referencing** from anywhere in the app
{% endhint %}

### Ways to bind

There are generally two ways how you can bind components in Jet:

* Either through the simplified "Bind" option:

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FCBO4fLLtrFcZMH7jp6Hm%2FScreenshot%20(206).png?alt=media&#x26;token=c466713a-efa2-411a-a12b-a28608f237c6" alt=""><figcaption></figcaption></figure>

* Or through more advanced "Functions" option (where you can transform data and do lots of other cool things)

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FbbZxNMeuRUZJRcjGNnBE%2FScreenshot%20(207).png?alt=media&#x26;token=46b68017-f63e-4111-86a3-ae017c8977bd" alt=""><figcaption></figcaption></figure>

**The Formulas modal** window allows you to find and reference any dynamic value from the UI components, and any parameter from Users, Teams, and API responses. As well as transform values using Excel-like formulas or using JavaScript

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2Fej2VRK1wjyZpTvPxLnv8%2Fimage.png?alt=media&#x26;token=57b42f79-5fa8-419d-be10-4578811a347b" alt=""><figcaption></figcaption></figure>

All the components available for referencing are listed in various tabs. Then you can drill down into a component (in our case, it's `Deals` table) and choose the field to reference. This will fetch this value from the component we referenced onto the component we reference from.

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FLrvrWzzhXk9fhX5d9jjz%2Fdxhtcfvg.gif?alt=media&#x26;token=b6a3f312-ef17-4583-a133-769c1e8f0e20" alt=""><figcaption></figcaption></figure>

The same logic applies to all the cases where you want to grab one dynamic value and pass it over into some other place to either display or transform or filter by this value.


---

# 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.jetadmin.io/user-guide/binding-and-values/binding-components.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.
