This is Part 2 of a 3 part series introducing the new features in Axure RP Pro 4.6 currently in beta and available here.

Here are links to the sample file and generated prototype that are discussed in this series.

IntroTo4-6Features RP File
IntroTo4-6Features Prototype

If you have Axure RP installed, it is a good idea to have the file open as you go through these posts.

Part 1: Conditional Logic and Widget Values covers creating conditional logic based on values entered in form widgets, the new KeyUp event, and setting values on widgets.

Part 2: Variables and New Masters Features covers using variables to store and pass data from page to page, using OnPageLoad in masters, and using the new Raise Events action that enables masters to have different interactions on each instance.

Part 3: Menus & Styles introduces the new Menu widgets, rollover styles, line patterns, and text on connectors.

[These articles assume a working knowledge of the basic features in Axure RP. If you are new to Axure, the Flash demos at www.axure.com/samples.aspx are a good place to start.]

Part 2: Variables and New Masters Features

OnPageLoad Event on Masters and Variables

In previous versions of Axure RP, a single variable called the OnLoadVariable could be used to store information that is passed from page to page in the prototype. The OnLoadVariable could be used in the condition of the OnPageLoad event of a page.

In version 4.6, you now have the ability to use up to 10 variables. The variables can also now be used in conditions on interactions of widgets in addition to the OnPageLoad event. This version also adds the OnPageLoad event to Masters helping to increase the reuse of OnPageLoad logic across pages.

In the "Variable and Master OnPageLoad Example" page of the sample, there are three radio buttons: Usability Professional, Information Architect, and Business Analyst. They are labeled "UsabilityRadio", "IARadio" and "BARadio" respectively and all assigned to the radio group "JobGroup".

Selecting a radio button option and clicking the Submit button results in three possible cases. Each case sets a variable named "JobVariable" to a unique value and then links to the page called Master OnPageLoad. The Master OnPageLoad page displays the appropriate welcome message in the header based on the value of the JobVariable. The header was created as a master.

The following describes the steps for defining the OnClick event on the Submit button as well as the OnPageLoad event on the Header master.

First, create the new variable JobVariable. In the Wireframe menu in the main menu, select "Manage Variables" to open the Manage Variables dialog. Add a variable named "JobVariable", which we will use to store the value of the selected radio button.

Now, add the three cases to the OnClick event on the Submit button.

In Case 1, construct the condition "If check state of UsabilityRadio equals checked" as follows. In the Interaction Case Editor dialog, click "Add Condition" and create the following condition in the first row of the Condition Builder dialog:  [check state of] + [UsabilityRadio] + [equals] + [value] + [Checked].

Next, set the value of JobVariable in this case. Select the action "Set Variable and Widget Value(s) equal to Value(s)" and set: [value of variable] + [JobVariable] equal to [value] and enter "UP".

Finally, select "Open Link in Current Window" and choose the "Master OnPageLoad" page.

Repeat this for the other two radio button cases using "IA" and "BA" as the other variable values, and you will have these 3 cases.

Now, let's create the Header master that responds to the value of the JobVariable. In the sample file, the Header master is in the "Variable and Master OnPageLoad Example Masters" folder in the Masters pane.  This master includes an image and a text panel with Welcome text labeled "WelcomeLabel".

Add three cases to the OnPageLoad event of the master; each corresponding to one of the three variable values set previously on the Submit button.  In Case 1, add the condition "If value of variable JobVariable equals 'UP'". Then, select "Set Variable and Widget Value(s) equal to Value(s)" and set: [text on widget] + [WelcomeLabel] equal to [value]. Then, click on "Edit text..." to specify the text.  This will open a text editor where you can enter and format the text, "Welcome, Usability Professional".

Repeat this for the other two cases and you will have the following:

Finally, the master is added to the "Variable and Master OnPageLoad Example" page and the "Master OnPageLoad" page. 

In the prototype, you can see that selecting a job title and clicking the Submit button on the "Variable and Master OnPageLoad Example" page links to the "Master OnPageLoad" page with the appropriate Welcome message in the header.

The great thing about this is that the master can now be used on any page in a prototype and will respond as designed to the JobVariable without having to redefine the behavior on each page. Want to create a sidebar master that changes depending on whether the user is logged in? Give these features a try!

Raise Events from Masters

This feature falls in the category of "Very Advanced". The term Raise Event is "developer-speak", and we will be working on making this feature more obvious. For now, it is a powerful feature when you need it, but by no means mandatory for creating an effective prototype with Axure RP.

Raised Events are used when an interaction in a master is different for different instances of the master or the interaction needs to affect widgets outside of the master. For example, if you create a button on a master and on one page where you use that master, you want to link to Page 1. Then, on another page where you use that master, you want the button to link to Page 2. Raised events can help you accomplish this with a master. To do this without raised events, you would create two separate buttons on those pages rather than use a master.

Another example of when you might use raised events is if you are designing an interface with several independent but related sections like a login pane or a stock quote pane or dashboard pane. This type of interface is common in portal applications. You want to create each section as a master, but one section needs to be able to affect other sections in the interface. Previously, interactions in a master could only affect other widgets in the master or submasters. Now, you can use a raised event to affect one master on a page from another master on a page.

The "Raised Event Example" page demonstrates the latter. There are two masters on that page, Login Pane and MyInfo Pane. Entering a valid username/password combination (in this case axure/12345) and clicking the Login button in the Login Pane shows user info in the My Info pane.

The following describes how this was created.

The Login Pane master is similar to the one found in "Conditional Logic and Reading Values Example". It contains Username and Password fields, a Login button, and a LoginFailedPanel dynamic panel with an error message.  The condition on Case 1 of the OnClick event on the button is: "If text on widget UsernameField equals 'axure' and text on widget PasswordField equals '12345'".  The selected action for the case is "Raise Event".

After selecting the Raise Event action, Click on "Event" in Step 3 to open the Manage Raised Events dialog. In that dialog, add an event called "OnLoginSucceed" and check the box next to the new event.  Now, if the login is successful in the Login Pane master the OnLoginSucceed event will be raised or triggered.



In Case 2, we set the OnClick to "Show Panel(s)" and select the LoginFailedPanel as we did in Part 1 of this series.


(Click the image to enlarge)

In the MyInfo Pane master, we have created the "AxureInfoPanel" dynamic panel which contains two states: the default NotLoggedIn state, and the LoggedIn state.  In the NotLogged in state, there is a text panel with the message "Login to view info."  In the LoggedIn state, the panel contains the user's information.

Both masters were added to the "Raised Event Example" page. When you select the Login Pane master, you will see that the OnLoginSucceed event appears in the Interactions pane for that master.  Add a case to this event just like any other event and select "Set Panel state(s) to State(s)" to define Set MyInfo Pane/AxureInfoPanel State to LoggedIn.



In the prototype, you can see that entering the valid username and password combination in the Login Pane displays the user information in the MyInfo pane.

To save some scrolling, here are the links to the sample file and prototype one more time:

IntroTo4-6Features RP File
IntroTo4-6Features Sample Prototype

Stay tuned for Part 3 of this series: 

Part 3: Menus & Styles introduces the new Menu widgets, rollover styles, line patterns, and text on connectors.

We hope you get a chance to try these new features and the others included in this release.

Please send any feedback or issues to support@axure.com or in the forums.