How do I get a value from a text field using variables?

What is a variable?

In Proto.io, a 'variable' is a mechanism with which you can store and reuse user defined values (numbers, text etc). For example you can store the contents of an input box in a variable, and later set the text of a label using the value of that variable.

Variables are global within your project, meaning that you can use them throughout your prototype. Variables are managed within the Editor under 'Variables Manager'.

Variables' names have to be unique, using alphanumeric characters and should ideally reflect the variable’s purpose. Variables can only hold one value at a time and you can optionally give them initial values upon definition.

 

Example

A common example of variable use is when your prototype accepts user input and is designed to use that in some way. That input can be stored in a variable and used throughout your project by referring to that variable. See an example below where the text entered in a text field is captured upon tapping the button and affects a text area in a different screen.

 

The User Interface showing the text input field and the button on which the interactions are attached

Example output on screen

You need to create a variable 'fullname' (Type: text, Value: empty for this example) from Variables Manager.

 

Then add an interaction (triggered on Tap) to the Continue button as seen below. First we give the variable 'fullname' a value equal to that of 'Full Name Text Field', i.e. what the user typed. Then, through callback (another interaction that will run when the first interaction is complete) we change the text property value of 'Name for Welcome Text' to the value of the 'fullname' variable.

1. Setting variable 'fullname' to the value of text field 'Full Name Text Field'

2. Callback: Using the 'fullname' variable value to replace a text property

 

To find out more about variables, see here.

 

 

 

 

 

Have more questions? Submit a request