Axure RP - Advanced Interactions

Until now, we have got ourselves introduced to the basic features of Axure for interactions. However, there will be many real-world scenarios, where the prototype will have to be intelligent. By the word intelligent, the prototype will need to detect the state of a certain widget in order to perform an action/trigger a certain behavior.

A typical example of such an interaction is setting the color of a button. This requires UX engineer to wear the thinking hat and take the prototype designing to the next level.

Using Variables in Axure

Variable, by definition, stands for a factor that is liable to vary or change. In Axure, we can use variables to represent or identify the state of a widget/interaction.

A typical example will be storing a data value when transferring data from one page to the other. To keep the example simple and clear, let us consider a scenario where we need to show the state of a particular widget.

Continuing with our last example, let us consider that we want to show how many times the image was shown.

Here is how we will do it −

• We will create a variable for initiating the count to 0.

• On the click of the button Show Image, we will increment the value of this variable.

• Display the value in the text label.

For this example, we will be creating a text below the Dynamic Panel. The text will read – Image is shown 0 times.

Critical − It is important that the labels are broken into three. Please follow the label names and text listed in the table.

This is required as we want to control the countLabel value for every Show Image button click.

Let us define a variable first.

We will need a variable, which will be controlled when the button is clicked. This variable in Axure’s terminology is − Global Variable. To define a global variable, click Project in the menu bar, and then click Global Variables. A dialog box will open as shown in the following screenshot.

Click the green plus (+) icon to add a global variable. Let us call our global variable − varDynamicPanel. Its default value will be 0.

With the Show Image button interactions, double-click on Case 1. Add another action. As shown in the following screenshot, the action is Set Text on countLabel to [[varDynamicPanel + 1]].

Selecting a text label to a value is pretty straightforward. Let us see how to get the value from a dynamic panel.

As indicated by step 4 in the above screenshot, click fx button and the following dialog box will open up.

Under the first text area, enter the following string.

[[varDynamicPanel + 1]]

Click OK.

Now, we need to ensure that the variable is updated after every button click.

In the case editor dialog box, under actions, select Variables → Set Variable Value.

Select the varDynamicPanel as the variable.

Set the variable to fetch value from the text on widget as countLabel from the available options.

Close the Case Editor by clicking OK. Then, click Preview button.

After showing/hiding image for four times, here is the result on the preview screen.