How to use Data Binding

Data Binding Example

Lets start by looking at an example!
(Scroll down for a more general explaination on how to use Data Binding.)  

We'll build an app that generates responses to messages. We want to take into account the message to respond to, the tone of the response, and the content of the response. This means we need to add data binding to three input elements: a text field for the message, radio buttons for the tone, and a text field for the response content. Let's name them "message," "tone," and "content." We also need to add data binding to the output field for our generated reply. Let's name it "response". To make it functional, we need to create a prompt using our data binding in the prompt builder widget. To do this we use this notation ${databinding}

Hint: To make this, we used the Prompt Builder and OpenAI Assistant. We connected all the elements in the Data & Logic View, and of course, we used Screens and Components to build the user interface. Click on any topic to learn more about.

How can I add Data Binding in my application?

Data Binding help you create interactive applications, like interactive forms, AI Writing Assistants, Recommendation Apps, Content Generators, and more. To add Data Binding follow these steps: 

1. Enter the "Data & Logic" View. (Button in the topbar, database icon on smaller screens)
2. Select the (input or output) element you want to add data binding to.
3. In the panel on the right side, click "Add Data Binding"
4. Enter the variable name. A list of any existing variables is shown to help you avoid name clashes.
5. Click "Create."
6. Click "Ok."

In the "Data & Logic" View, you can now see the variable name above the element you've added it to.