Exercises: Variables

With variables, you can transfer information from screen to screen and create advanced interactions. Check out these two exercises to learn how to use variables.

Exercise 1: Sharing information between screens

In this exercise, you will learn how to use a variable to share information between screens. We will create a login form screen that links to a welcome screen. The welcome screen will display the email address that was entered in the login form.
share information between screens
Follow these steps to complete the exercise:

  1. In a new prototype, create a login form using Input Text Field Widgets, Text widgets and a Button. You can also use the pre-made Sign in screen widget from the iPhone Screen examples library.Add input text field and other elements
  2. Go to the Variables palette and create a new variable by clicking on the ‘+’ icon. In the dialog that appears, name the variable “Email” and click “OK”.new variable
    Note: to modify the name or default value of an existing variable, double-click on it, or right-click on it in the Variables palette and select “Edit”. To delete a Variable, right-click on it and select “Delete”.
  3. Create the event to give the variable a value. There are two ways to do this:
     A. Select the Input Text Field within the Sign in screen element on the Canvas and drag it to the variable. An “On Page Unload” + “Set Value” event will automatically be created in the Events palette.On Page Unload Set Value to Variable
    B. Select the Input Text Field and go to the Events palette. Create an “On Page Unload” + “Set Value” event. Select the variable as the target of the “Set Value” action. Then, for the value, click “Calculated”. Click on “Add Expression” and in the Value Expression builder that appears, drag the Input Text Field to the open space in the expression. Click “OK” twice to finish building the event.

  4. This event will store whatever the user writes in the Input Text Field as the variable’s value.

  5. Next, create another screen (click the ‘+’ icon in the Screens palette) and name it “Welcome screen”.welcome screen
  6. In this screen, drag two Text widgets to the Canvas. In the first, type “Welcome” and leave the second with the default text in place.welcome text widget
  7. Drag the Email variable to the second Text widget. This creates an event that will display the email address from the login form when the “Welcome screen” loads.Drag variable to text
  8. Back on the first screen, drag the “Sign in” button to the Welcome screen in the Screens palette. This creates a “Link To” event from the button to the Welcome screen.Create link to event

Click “Simulate”. Enter an email address and click on the sign in button. In the Welcome screen that loads, you’ll see the email address text displayed.

You can download our example here.

Exercise 2: Using variables with conditions

Using conditions with variables allows you to determine the relationship between content on different screens.

In this exercise, you will learn how to create a screen with conditional content. We will create a screen where the user will select their role as an admin or an employee. They’ll then be linked to a screen that will display different content if the user selected the admin role or the employee role on the previous screen.
Exercise 2 example

Follow these steps to complete the exercise:

Designing the Screens

  1. In a new prototype, create a screen and name it “Role select”. Drag a Select List widget and a Button onto the Canvas.Drag a select list onto the Canvas
  2. Edit the Select List widget’s values by selecting it in the Outline palette or on the Canvas, then go to the Properties palette and click the ‘Edit values’ button. Delete all of the default values. Now, add new values by typing in the top input field, and then click the ‘+’ icon. Add the values “Select your role”, “Employee”, and “Admin”.
  3. Create a new screen, and name it “Dashboard”. Drag four Rectangle widgets and a Button onto the Canvas.
  4. Select two rectangles, and mark them as hidden by going to the Properties palette, and checking the “Hide component” checkbox.Hide Rectangles on the Dashboard screen
  5. Go back to the “Role select” screen. Create a variable, name it “Role” and leave its default value blank.Add new variable

Creating the Events

  1. On the “Role select” screen, select the Button and create an “On Click” + “Set Value” event. Select the “Role” variable as the target of the “Set Value” action. For its value, write “Admin”. Click “OK”.
  2. Select the “Set Value” event you just created, and click on the ‘gear’ icon next to the ‘Do’ text. Click “Add action after selected” and create an “On Click” + “Link To” event, and link to the “Dashboard” screen.Add a Link To action
  3. Create a condition for this event by clicking on the “add condition” text. In the Conditional Expression builder, drag the Select List (it will be named Category) into the open space in the expression. Then, drag an ‘=‘ comparator next to the Select List. Lastly, in the open space that appears, write “Admin”. Click “OK” to finish building the condition.
    Note: the value in the expression for the condition must match exactly the value written in the Select List values
  4. Create the same “On Click” + “Set Value” and “On Click” + “Link To” events as in Step 3, but for the “On Click” + “Set Value” event, set the variable’s value to “Employee” instead of “Admin”.
  5. Create a condition for this event by clicking on the “Else add condition” text. In the Conditional Expression builder, build the same expression as in Step 3, but write “Employee” in the open space instead of “Admin”.
  6. Here’s how your events should look:Events in Exercise 2
  7. Go to the “Dashboard” screen. Select the base screen (icon that looks like a computer monitor) in the Outline palette. Create an “On Page Load” + “Show” event. Select two Rectangles you hid before. Command/Shift click on them to select both to be shown.Show rectangles event
  8. Create a condition for the event. In the Conditional Expression builder, drag the ‘Role’ variable into the open space. Then, drag an ‘=‘ comparator next to the variable. Lastly, in the open space that appears, write “Admin”. Click “OK”.Condition for the show event
  9. Finally, create an “On Click” + “Link To” event for the button on the “Dashboard” screen, and have it link back to the “Role select” screen. This will allow you to repeat the events in the interaction.Link to role select screen

Go back to the “Role select” screen and click “Simulate”. Select a role from the Select List. If you select “Admin”, you will see all four Rectangles appear on the “Dashboard” screen. If you select “Employee”, you will only see two Rectangles.

You can download our example here.