Screenshot of the pretendBank prototype, built in Axure RP

Did you know that Axure RP makes it easy to store user-entered data and then reuse it across widgets and pages in your prototype? There are actually several good ways to do this, but one sure-fire technique is to use a variable. Any time you want to have something close at hand later on—a user’s name, for example—go ahead and store it using the “Set Variable Value” action. You can then deploy the value of the variable you stored as part of any future case, using the “Set Text” action. Read on for an in-depth example of this technique.

But first, download the “PretendBank” banking app example .rp file so you can follow along with this article.

Click here to check out the live prototype and get a sense of how it works before you go behind the scenes in the .rp file. To see the interactive bits, try the following:

  1. Locate the login dialog on the right-hand side of the page, enter a username, and click the “Log In” button.
  2. Notice your username is used in the “hello” message at the top of the dialog’s second screen.
  3. Click “Continue” twice more to move through a third login screen (with another custom “hello” message) and then to the “Accounts Home” page, with a third “hello” message at the top.

(And in case you’re unfamiliar, check out our documentation about variables and our tutorial on passing text between pages for some helpful background.)

The interactive parts of the example file are located in the login structure on the right side of the first page. This login dialog is a three-state dynamic panel. Double-click the “State1” listing in the Outline pane to open the first of these three states for editing. Then, click on the big red “Log In” button. In the Inspector pane’s Properties tab, you should see the following:

OnClick:
 Case 1:
   Set value of UsernameVar equal to text on username text field
   Set text on hello message (state 2) equal to “Hi, [[UsernameVar]]”, and text on hello message (state 3) equal to “Hi, [[UsernameVar]]”
   Set log in dialog to State2

This is the case that’s doing most of the work in this file. Let’s break it down action by action.

Set value of UsernameVar equal to text on username text field

To build this first action, I chose the “Set Variable Value” action from the left-hand list to add it to the case. Then, with my new action selected in the center list, I chose a variable on the right whose value I wanted changed when a visitor to my prototype clicks the “Log In” button. In this example I used the Case Editor’s “Add variable” button to add a new global variable to my the project, but I could just as well have used the preexisting “OnLoadVariable”.

Screenshot of the Axure RP Case Editor with a Set Variable Value action highlighted

Set text on hello message (state 2) equal to “Hi, [[UsernameVar]]”, and text on hello message (state 3) equal to “Hi, [[UsernameVar]]”

Once I’ve got my visitor’s username stored in a global variable, I can deploy that variable’s value wherever I want. My second action in this case makes use of the newly-stored variable value immediately, by setting two label widgets—the “hello” messages that will appear on each of the next two screens of the login dialog— to the value of Hi, [[UsernameVar]]. Notice how my global variable’s name appears inside double square brackets in my “Set Text” action. The means that the portion inside the double square brackets will be replaced by the “UsernameVar” variable’s value.

Set log in dialog to State2

This third action advances the visitor to the second of my login dialog’s three panel states. There’s a corresponding action on the buttons of the second and third panel states to move the visitor along through the screens and ultimately to the Accounts Home page at the conclusion of the login flow.

– – –

An astute reader may wonder why I stored a variable value and then immediately set the text of some labels from the variable. Couldn’t I have cut out a step by setting those labels directly, using the “Username” text field? The answer is yes, I could have, and that’s a fine way to do it.

One benefit of storing a variable value is that it gives me the flexibility to reuse that text again, possibly even on another page if I want to. (Variables are the only way in Axure RP to pass information between pages of the prototype.) I take advantage of this feature of variables on the Accounts Home page of the project, when I set a third “hello” message using the OnPageLoad event.

Screenshot of the Axure RP Case Editor, editing a case on the OnPageLoad event

That’s the lesson for today, folks: when in doubt, store user-entered data in a variable. You never know when you might want to call on a piece of that information later on as you continue to build out your prototype.

Share this: