Variables

Variables store data that can then be shared between all the screens in your prototypes during the simulation session.

A variable’s value can be interpreted as a string (sequence of characters e.g. a name, email address or number), date, or collection of Data Master Records. The value can be changed at any time with a “Set value” action.

How to share information between screens

Learn how to use variables in this example. Here we will create a login form that will take the user to a welcome screen that displays the email address or username entered in the login form.

share information between screens

Follow the steps below to reproduce our example:

  1. In a new iPhone mobile prototype, create a sign in form using Input Text Fields, Text widgets and a Button. Alternatively, you can use the readymade Sign in screen widget from the iPhone Screen examples library.
    • iphone input text field
  2. Go to the Variables palette and create a new variable by clicking on the ‘+’ icon.
    • new variable
  3. In the dialog that appears, name the variable “Email” and click “OK”.
    • on page load
    • 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”.
  4. There are two ways to store a value within a variable:
    • Either, select the Input Text Field within the Sign in screen element on the Canvas (or the Outline palette) and drag it to the variable. An “On Page Unload” + “Set Value” event will automatically be created in the Events palette.
    • on page load set value
    • Alternatively, you can create an “On Page Unload” + “Set Value” event manually.
    • With the email Input Text Field selected, go to the Events palette. Add an “On Page Unload” + “Set Value” event. Select the variable and select “Calculated” below.
    • Click the “Add Expression” button. Now you’ll create an expression – similar to conditions.
    • In the expression builder that appears, drag the email Input Text Field to the conditional expression and click “OK” twice.
    • This event ensures that anything the user writes will be stored in the variable.
  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 ensures that when the screen loads, the email address or username entered in the login form is displayed.
    • Drag variable to text
  8. Back in the first screen, drag the “Sign in” button, from within the Sign in screen element, to the Welcome screen in the Screens palette. This links the button to the Welcome screen.
    • Create link from button
    • Click “Simulate”. Enter an email address or username and click on the sign in button. In the Welcome screen that loads, you’ll see the email address/username text displayed.

You can download our example here.

How to use variables with conditions

Variables combined with conditions are a powerful way of sharing content between screens, and determining what content will reach the user and when. For instance, within an eCommerce website. With conditional navigation, site visitors with different navigation flows will land on the same page.

Learn how to use variables and conditions in this example. We will design a navigation flow, using variables and conditions to determine what content will be displayed in the upcoming screen, based on the previously visited screen.

adding variables conditions

Follow the steps below to reproduce the example:

Setting up the screens and variable

  1. Create a new mobile app prototype. In our example, we have used an Android mobile app prototype, but you can also use an iPhone prototype.
    Go to the Screens palette and rename the default screen “Home”.

    • set up screen
  2. Then, add three additional screens (click the ‘+’ icon) and rename them “Screen A”, “Screen B” and “Screen C” respectively.
    • add new screen
  3. Go to the Variables palette. Add a variable (‘+’) and name it “Previous screen”. You’ll use this variable to store the content shared between the previous and upcoming screens.
    • add variable

Setting up the Home screen

From the Home screen, the user will be able to navigate to screen A or screen B. To set it up:

  1. Drag a Text widget and two Rectangles to the Canvas. Place the Rectangles below the Text element, side by side.
  2. Select the Text element and write “Choose a screen”
  3. Then, write “Screen A” in the left Rectangle and “Screen B” in the right one.
    • home screen rectangle

Setting up Screens A and B

When the user navigates to screen A or B, a Rectangle will inform the user that they have reached screen A or B. A linked Button element will take them to Screen C. To set them up:

  1. Go to screen A from the Screens palette. Drag a Rectangle to the Canvas and write “You are on Screen A” in it. Below the Rectangle, drag a Button and write “Go to Screen C” in it.
    • screen a button
  2. Next, go to Screen B. Drag a Rectangle to the Canvas and write “You are on Screen B” in it. Below the Rectangle, drag a Button and write “Go to Screen C” in it.
    • screen rectangle

Setting up Screen C

Screen C is the final screen of the prototype. It stores and displays the screen the user last visited (A or B). A linked Button element will take the user back to the Home Screen and start over. To set it up

  1. Go to Screen C from the Screens palette.
    • Drag a Text widget to the Canvas and write “The previously visited screen was” in it.
    • Drag two Rectangles and write “Screen A” and “Screen B” in them respectively.
    • Finally, add a Button and write “Start over!” in it.
    • screen c rectangle

Setting up the links in the Home screen

The Home screen includes the following link events:

  • Link to screen A
  • Link to screen B

To create these links, go to the Home screen in the Screens palette. From the canvas, drag the Screen A Rectangle to the screen A in the Screens palette, and the Screen B Rectangle to the screen B.

Linking events between the Home screen and screens A and B will automatically be created in the Events palette.

Note: you can also create these links from the Events palette. Learn more here.

Setting up the interactions in screens A and B

For screens A and B, you’ll need to add an “On Page Load” + “Set Value” event to store the value of an element.

The “Set value” action will be used to define the value of the “Previous screen” variable.

You can set up this interaction for each screen by following these steps:

  1. In screen A, select the screen element in the Outline palette.
    • screen element outline
  2. Go to the Events palette and add “On Page Load + “Set value” event.
    • Select the ‘Variables” radio button and select the “Previous screen” variable.
    • Below, write “A” in the input text field and click “OK”.
  3. Finally, drag the ‘Go to Screen C’ Button to Screen C to link them.
    • link screens
  4. Repeat these steps with screen B and replace the fixed value with “B”.

When either screen A or B is loaded, the variable will store the letter of that screen.

Setting up the result in screen C

  1. Go to screen C. Select the Screen A and B Rectangles and check the “Hide component” box.
    • result screen
  2. Next, create an event that will show the Screen A Rectangle (if the variable value is A) or the Screen B Rectangle (if the variable value is B). To create this event:
    • In the Outline palette, select the screen element. Go to the Events palette and create an “On Page Load” + “Show” event. Select the Screen A Rectangle and click “OK”.
  3. On the left of this action, click “add condition” and build the following condition: drag the “Previous screen” variable from the Variables tab to the first term, followed by the “Equals” function and finally, write “A” in the last term. Click “OK”.
    • With this interaction, the Screen A Rectangle will appear if the variable’s value is “A”.
  4. The second part of the condition should imply the opposite: when the variable’s value is “B”, the Screen B Rectangle should appear. To add this condition, click “Else” on the right of the action. Create an “On page load” + “Show” event. Select the Screen B Rectangle and click “OK”
  5. On the left of this action, click “Else when” and build the following condition: drag the “Previous screen” variable from the Variables tab to the first term, followed by the “Equals” function and finally, write “B” in the last term. Click “OK”.
    • This is what the interactions for result in screen C should look like.
    • screen interactions
  6. Finally drag the “Start over!” Button to the Home screen. The will allow the user to return to the home screen.
    • start over home

Click “Simulate” to see your prototype work in real-time. Click from the Home to screen A or B and then to C to see which screen you previously visited. Click the “Start over!” to return to the Home screen.

You can download our example here.