Now you know how to store data in variables and use them in conditions and actions on other pages.

Download RP File | Demo Prototype 

This examples uses variables, OnPageLoad, conditional logic, and the "Set Variable/Widget Values" action to store and pass values and execute interactions based on those values.

Using the Set Widget Values action, you can insert a variable value into widget text in the Enter Text dialog.  This is frequently done in an OnPageLoad event.

There are three different types of variable values you can insert into text: global variables (the variables described in this article), built-in variables, and local variables.  To insert variables into the text, surround the variable name with square brackets: “[[variable name]]”. The value from the variable will replace the square brackets and variable name in the prototype.

Built-in variables are used to insert values like the current page name, the current date when the prototype is viewed, and the generate date of the prototype. Here is a list of the built-in variables: PageName, Day, Month, MonthName, DayOfWeek, Year, GenDay, GenMonth, GenMonthName, GenDayofWeek, and GenYear.

Local variables exist within the scope of an action and are not passed

from page to page like global variables. To insert a local variable, click

“Add Local Variable” in the the bottom area of the Enter Text dialog.

(Learn more about local variables in the Set Widget Values article.) 

One of the more common uses for the OnPageLoad event is to perform and action based on a variable value.

Here's an example. Let’s say there’s a droplist on the Start Page where the user selects their role  from three options: marketing, sales, or support. When the user selects an option (OnChange), the value of the RoleVariable is set to “marketing”, “sales”, or “support”. Clicking a button takes the user to the Information Page which contains a dynamic panel with three states. Each state is specific to one of the roles. In the OnPageLoad event we can check the value of RoleVariable and set the state of the panel (InfoPanel) accordingly.

          Case 1: If value of variable RoleVariable equals “marketing”, set

          InfoPanel state to Marketing Info.

          Case 2: Else If value of variable RoleVariable equals “sales”, set

          InfoPanel state to Sales Info.

          Case 3: Else If value of variable RoleVariable equals “support”, set

          InfoPanel state to Support Info.

The prototype will perform one of the cases when the page loads based on the role selected and the user will automatically see the correct content.

To set a variable to a value, add the “Set Variable/Widget Value(s)” action to a case in the Case Editor dialog. In Step 4 of the Case Editor, click on the “Open Set Value Editor” to open the Set Variable and Widget Values dialog.

In this dialog, you can build the expressions to set a variable to a value. You can set multiple variable values in the same action by adding rows. To do this, click on the + sign after the first action. To remove an action, click on the [ – ] button.

Set the first field in the row to “Value of variable” and select the variable name in the second field or choose "Add New..." in the dropdown to open the Manage Variables dialog and add a new variable.

The third and fourth fields are the type of value you want to set it to and the specific value.

A completed action might look like this, “Set value of variable NameVar equal to text on widget Name Field”. In the prototype, if the user enters “Stringer Bell” into the Name Field. Triggering the action will store the value “Stringer Bell” in NameVar. Once a variable value is set, it persists across the pages as you link from page to page.

To manage the variables in your project, go to Wireframe -> Manage Variables in the main menu.

In the Manage Variables dialog, you can create, remove, rename and reorder variables. By default, your file will start with a variable named OnLoadVariable. When creating variable names, they need to be alphanumeric, less than 25 characters, and contain no spaces.

TIP: Try to give your variables descriptive names (i.e., “UsernameVar” and “CartTotalVar” vs. “Var1” and “Var2”) so that it is easy for you and others working with your file to identify them.

Variables are used when you want to pass data from one page to another. As a general rule, any time an interaction from one page needs to affect widgets on another page, you will need to use variables. There is no limit to the number of variables you can use in Axure RP, but we recommend keeping it less than 25, especially if you are using Internet Explorer to view the prototype. You can use variable values in conditions and when setting text on widgets including inside math and string expressions as described in the Set Widget Values article.

In this article, learn how to set variable values and use the stored data in interactions.

You can set a variable to the following types of values:

          Value: A value you manually enter.

          Value of variable: The value stored in another variable. Choose

          from the list of variables, or add a new one.

          Length of variable value: The character length of another

          variable value (number). Choose from the list of variables, or add

          a new one.

          Selected option of: The currently selected value of a droplist or list

          box. Choose from the list of droplist and list box widgets on the

          page.

          Is checked of: “True” or “False” based on whether a radio button or

          checkbox is selected or unselected. Choose from the list of

          checkbox and radio button widgets on the page.

          Text on widget: The value entered into a Text Field or Text Area

          widget. Choose from the list of text field and text area widgets on

          the page.

         Length of widget value: The character length of the value on a form

          widget (number). 

          Text on focused widget: The value entered into the widget that is

          currently in focus.

Building on the Conditional Logic article, you can also define conditions based on variable values. In the Condition Builder dialog, you’ll find two variable-based values you can use: value of variable and length of variable.

For example, you could have a button with two cases on the OnClick event that link to different pages depending whether the LoggedInVar equals "Yes" or "No". The interaction would look like this: (Case 1) If value of LoggedInVar equals “Yes", open Checkout in Current Window, and (Case 2) If value of LoggedInVar equals to “No”, open Login in Current Window. The condition on the second case could be omitted and read Else If True to handle the "not Yes" case.

Have questions? Drop us a line at support@axure.com, tweet us at @axurerp, or write on our Facebook wall.

© 2002-2011 Axure Software Solutions, Inc. All rights reserved.