© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
86% OF THE FORTUNE 100
USE AXURE RP
PASS TEXT TO NEXT PAGE
Enter text in text fields. Use variables to pass that text to another page.
STEP 0: DOWNLOAD THE TRAINING FILE
If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.
STEP 1: SETUP
In your copy of AxureTraining.rp, open the page named "Pass text to next page".
The page includes three text fields: "First name", "Last name", and "Email address". There's also a submit button. The interaction of the submit button will pass the text entered into the text fields over to the page called "Next page".
STEP 2: CREATE VARIABLES
To pass information from one page to another in an Axure RP prototype, use variables. In this file, we'll need three variables: FirstNameVar, LastNameVar, and EmailAddressVar. In the top menu bar, click "Project > Global Variables".
By default, a file starts with one global variable called OnLoadVariable. Click the text that says "OnLoadVariable" to change the name of the Variable. Type "FirstNameVar".
Click the green "+" icon to add a new variable. Name this one "LastNameVar".
Click the green "+" icon to add one last variable. Name it "EmailAddressVar".
(Note: if you downloaded AxureTraining.rp, the variables described above will already have been created because they're making the finished version of this tutorial work. Just confirm that the variables you need are present and then move to the next step.)
STEP 3: BUILD INTERACTION THAT SETS VARIABLES AND OPENS NEXT PAGE
Single-click the "Next page" button to select it.
In the Properties tab, double-click "OnClick" to add a new OnClick case.
In the left column, click "Set Variable Value".
In the right column, click the checkbox for "FirstNameVar".
In the "Set variable to" section at the bottom of the right column, use the first droplist to select "text on widget". Use the second droplist to select the "First name" text field widget.
You don't need to add a new "Set Variable Value" action for the other two variables—you can set multiple variables with the same action. At the top of the column, click the checkbox for the variable "LastNameVar".
In the "Set variable to" section, use the first droplist to select "text on widget". Use the second dropdown to select "Last name".
Return to the top of the column and click the checkbox for "EmailAddressVar".
In the "Set variable to" section, use the first droplist to select "text on widget". Use the second dropdown to select "Email address".
In the left column, click the action "Open Link".
In the right column, click "Next page" in the list of pages in the file.
Click "OK" to close the Case Editor.
STEP 4: SET CONFIRMATION TEXT ON NEXT PAGE
In the Pages pane, open the page "Next page". The page has a paragraph widget with a partially completed confirmation message.
In the Page Inspector, double-click "OnPageLoad" to add a new OnPageLoad case.
In the left column, click "Set Text".
In the right column, click the checkbox for the "Confirmation Message" paragraph widget.
At the bottom of the right column, click the "fx" button.
Use your mouse cursor to highlight the portion of text in the first line that says "Firstname".
Click "Insert Variable or Function…" just above the text field.
In the dropdown, select "FirstName". The variable is inserted in this form: [[FirstNameVar]]. The brackets indicate that it's a variable.
Select the portion of text that says "Lastname".
Click "Insert Variable or Function…" and select "LastNameVar".
Highlight the portion of text that reads "email@example.com".
Click "Insert Variable or Function…" and select "EmailAddressVar".
Click "OK" to close the Edit Text dialog, and then "OK" again to close the Case Editor.
STEP 5: PREVIEW
Try filling out the form and then opening the next page.
Enter your credentials below to log in