Binding Components
We'll learn how data binding works inJet Admin
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
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:
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?
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.
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
There are generally two ways how you can bind components in Jet:
- Either through the simplified "Bind" option:
.png?alt=media&token=c466713a-efa2-411a-a12b-a28608f237c6)
- Or through more advanced "Functions" option (where you can transform data and do lots of other cool things)
.png?alt=media&token=46b68017-f63e-4111-86a3-ae017c8977bd)
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
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.
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.
Last modified 9mo ago