Variables

The variables system allows you to input and save data, to use them during the simulation of your web prototype. This way you can ask your user to store information on one screen to use it on another.

For example, create a registration form that, once completed, takes you to the welcome screen where it displays the name the user entered in the "Customer" field.

Draw the registration form using the components of the palette.
Create one in the Variables tab (located below the Components palette).
Drag the "Customer" field from the registration form to the variable; whatever your user writes is saved. You can also do it through a "On Screen Leave" event.
Open another screen and insert two text labels. In the fist, type "Welcome". Drag the variable above the second label. This way, when the screen is loaded, the variable text is displayed.
Click the Simulate button to verify how the text moves between screens.

Justinmind Prototyper automatically creates an event when you drag the Customer field and drop it on the variable. This event is of the "On Screen Leave" type and replaces the value of the variable with the content of this field. However, there are other ways to initialize a variable: any "Set Value" action related to an event can do it. To do this, select a component and in the events dialog box, click the "Variables" tab (next to the "Screen" tab) and select the value you want to change.

The variables are another element than can be used in the conditions. When the expressions dialog box opens, you will see that you can drag the variables of the screen, just as you can drag the elements.

Back to all Tutorials