Please note: This article is intended to explain how data binding works in detail, for a practicle guide of how to use data binding in your applications click here!
What is Data Binding?
When creating interactive apps, it's likely you'll want to carry over user data from one screen to another. To do this, you can use the data binding functionality. Data Binding is the way Flowrabbit incorporates the idea of using variables to handle user input.
What can I use Data Binding for?
Data Binding allows you to have your application react to your users' input. For example, to create custom prompts to use with OpenAI Assistants or to use your users' input in requests to databases or any API you've connected. You can also use data binding in with Logic Operators, creating conditional flows based on your users' input. A simple example of this would be a form that asks certain questions only if the user provided a specific answer to a previous question (e.g., only asking for details about a user's degree if they have answered "yes" when asked if they have a degree).
How does Data Binding Work?
When your Flowrabbit application is running, data is being stored and read. You can think of the data as a simple JSON object with different properties.
Imagine you build a form for users to sign up for a service. They need to enter their email, name, last name, and address. The data a user enters could look like this:
{
"email": "[email protected]",
"name": "Pedro",
"lastname": "Hauten",
"address": {
"street": "Cavar de Castelo",
"zip": "34414-100",
"city": "Warburgo",
"country": "Portugal"
}
}With Data Binding, you don't need to worry about using code to store and read data. Data Binding allows you to link data to UI elements by simply giving the UI elements names. You can think of these names as the names of variables.
How does this apply to the example?
In this example, you might create input fields (from the component library) and add Data Bindings to them to read the data the user enters. Adding Data Bindings simply means that you add a name to these input fields, with which you can later reference the data that is entered.
If you want to link, for example, a text box for the user to enter their email, a sensible variable name would be "email." The other input fields in our sign-up form example might be named "name," "lastname," "address.street," "address.zip," "address.city," and "address.country."
What can I do with the Data I have stored?
Once the user has entered data, the information is stored, and you can access it using the Data Binding name you have given the input element. You can use it on the following screens, e.g., to display it again. For example, to have a chatbot greet the user by their name. You can also use the data for conditional navigation, e.g., to display a tutorial only for novice users.
How do add Data Binding to my Applications?
Learn how to use Data Binding in this Article: How to use Data Binding
A common and easy to realize use case is building forms, this is a perfect example to see how Data Binding in Flowrabbit is used, have a look in this article: Forms