Sometimes you want to carry over user data from one screen to another. For these kinds of scenarios, you can use the data binding functionality. You can also use data binding in the Logic Operators.
How it works
In Quant-UX there is hidden data which allows you to store and read data, while the prototype is tested. You can think of the data as a simple JSON object with different properties. Imagine you build a form for the users to sign up for a service. They need to enter their email, name, last name and address. The data might look like this:
{
"email": "PedroHauten@gmail.com"
"name": "Pedro",
"lastname": "Hauten",
"address": {
"street": "Cavar de Castelo",
"zip": "34414-100",
"city": "Warburgo",
"country":"Portugal"
}
}
Data Binding allows you to link this data to the UI elements, e.g. a text input element. If you want to link for example a text box to the email of the user, the correct variable name would be "email". If you want to link to the street, the name would be "address.street". Once the user has entered data, the information is stored. You can use it in the following screens, e.g. to show it again, maybe as a label. You can also use the data for rule based navigation or send it with the
Web Service to a real server. To assign or edit the variable follow the steps below:
- Select the element
- Click on Prototype at the top
- In the data section click on "Add Data Binding"
- A dialog will open, that allows you to define the name of the variable you want to write to. You can also select an existing variable
Most UI elements have only one variable that is used for input and output. An example is a simple textbox, which reads or writes the text. Some elements have more variables, for example, a Dropdown element. It has an input and output as well as a list of menu items. These could also be read from the data model or even a web service.