Axure RP Pro Version 4.6 (available in beta here) introduces many new features that enable you to create more functional and more interactive prototypes widening the range of fidelity that you can deliver with Axure RP.
The decision to create a higher fidelity prototype is frequently based on a variety of considerations like the audience for the prototype, the stage in the project, and the time and resources available. The additional effort to create and maintain a high fidelity prototype should be considered before pursuing it. Axure RP is designed to support a wide range of fidelity so you can create what is needed for your project.
This 3 part series of posts walks through some of these new features. 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 1: Conditional Logic and Widget Values
Conditional Logic and Reading Values from Widgets
Previously, conditional logic could be specified in Axure RP by providing descriptions of the conditions in the interaction cases. If multiple cases existed, these descriptions were presented as choices in the prototype like "if the radio button is checked" or "if the username and password are valid". This is an effective method for capturing and presenting conditional flows, but there may be times when a more functional prototype is called for. In Version 4.6, you are now able to add functional conditional logic to your designs. Those conditions can be based on real values entered in the prototype by the prototype user.
On the "Conditional Logic and Reading Values Example" page of the sample file, we have created a login dialog with two text fields labeled "UsernameField" and "PasswordField", a Login button and a "LoginFailedPanel" dynamic panel containing an error message.
Clicking the Login button results in two possible cases.
- If the user enters a valid username/password combination (in this case axure/12345), clicking the Login button links to the Confirmation page.
- If the user enters an invalid combination, clicking the Login button displays a Login Failed message.
The following describes the steps for defining these conditions.
First, add a case to the OnClick event of the Login button. In the Interaction Case Properties dialog, click on "Add Condition" under Step 1.
This opens the Condition Builder dialog, where we will construct the condition expression "If text on widget UsernameField equals 'axure' and text on widget PasswordField equals '12345'".
Because we want both comparisons to be met, we set the Satify droplist to "Satisfy all of the following". Choosing "any" would place an "or" between the comparisons instead of "and".
In the first row, we will construct the UsernameField comparison. Select and enter the following into the droplists and fields in the first row: [text on a widget] + [UsernameField] + [equals] + [value] + ["axure"]. Then, click the "+" sign at the end of the first row to add a second row. Similarly, we want to compare the PasswordField. Set the second row to [text on a widget] + [PasswordField] + [equals] + [value] + ["12345"].
Tip: Labeling the widgets that are used in conditions will come in handy when building conditions and managing your design. To label a widget, select it and fill in the Label field in the Annotations and Interactions pane.
(Click the image to enlarge)
Click OK to return to the Interaction Case Properties dialog. Select "Open Link in Current Window" and specify the Confirmation page. Click OK to complete the first case.
Notice that the description on Case 1 in the Interactions pane now includes an "If" statement describing the condition. Subsequent cases will begin with an "Else If" by default.
Tip: "Else If"'s can be changed to an "If"'s by right-clicking the case and selecting Change to IF. Doing so will allow multiple cases to be performed if multiple conditions are met.
Now add the second case to the OnClick event on the Login button. By default, because a condition already exists in this event above this case, the condition will read "Else If True". We do not need to add a condition to this case because we want it to execute if the first case is not met. To show the error message in this case, click "Show Panel" and select the LoginFailedPanel.
(Click the image to enlarge)
Running the prototype, we can verify that the conditions work as designed. Entering anything other than the combination of "axure" in Username and "12345" in Password and clicking the Login button will show the error message. Entering the valid combination links to the Confirmation page.
OnKeyUp and Setting Values on Widgets
Version 4.6 adds the OnKeyUp event for the Text Field and Text Area widgets. The OnKeyUp event fires when the user releases a keyboard key while typing in the widget.
We have also added a new action to the Interactions Case Properties dialog to set values on widgets such as text on a text field or the check state of a checkbox.
On the "OnKeyUp and Setting Values Example" page of the sample, there are two visible text fields, Name1 and Name2. If the "Same As Above" checkbox is checked, typing into the Name1 field will update the text in the Name2 field to the same value as the user is typing.
This Name1 text field is labeled "NameField1". The checkbox is labeled "SameCheckbox". The Name2 field is actually a dynamic panel labeled "NameField2Panel" with two states, "NormalState" and "ReadOnlyState". Each state in the dynamic panel has a text field in it labeled "NameField2" and "NameField2ReadOnly", respectively. The NameField2ReadOnly text field is set to be read only.
The following describes the steps for defining the interactions for this sample.
First, let's make typing in the NameField1 set the text in NameField2ReadOnly to the text entered in NameField1. Add a case to the OnKeyUp event on NameField1. Check "Set Variable and Widget value(s) equal to Value(s)" and click the link in the description to open the Set Variable and Widgets Values dialog. Set the row to [text on widget] + [NameField2ReadOnly] equal to [text on widget] + [NameField1].
Next, we will add two cases to the OnClick event on the SameCheckbox. The first case will set the NameField2Panel to the ReadOnlyState if the SameCheckbox is checked. To construct this case, we need to define the condition "If check state of SameCheckbox equals Checked". Click "Add Condition" in the Interaction Case Editor dialog and set the condition to: [check state of] + [SameCheckbox] + [equals] + [value] + [Checked]. Then use the "Set Panel State(s) to State(s)" action to set the NameField2Panel to the ReadOnlyState.
The second case handles the Else If True case which is equivalent to the SameCheckbox not being checked. In this case, the NameField2Panel will be changed back to the NormalState and any text already entered in the Name2Field1 will be cleared. To define this in the Interactions Case Properties dialog, use the "Set Panel state(s) to State(s)" action to set the panel state appropriately and use the "Set Variable and Widget value(s) equal to Value(s)" action to set the text on the NameField2 widget. The action should be defined as follows: [text on widget] + [NameField2] equal to [value] + [] (that's an empty string).
(Click the image to enlarge)
Try it out in the prototype!
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
For more about new features in version 4.6, check our Part 2 and Part 3 of this series:
Part 2: Variables and New Masters Features 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.
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.
