Basic Interactions

Download MP4

Still need help? Check out the forum or drop us a line at support@axure.com.

Home

Products

Why Axure

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

Powerpoint Alternative

Use Axure RP as:

WYSIWYG Editor

Back to Overview

The Round Up

Training

Videos

Tutorials

Widget Libraries

Forum

Manage Licenses

Forum

AxShare

PRODUCTS

Axure RP

AxShare

HOME

PRODUCTS

WHY AXURE

LEARN

SUPPORT

COMPANY

DOWNLOAD

BUY

You can add a wide range of interactions to your wireframe from basic page links to dynamic “AJAX-y” behaviors to conditional logic and math functions.

The amount of interactivity needed for a prototype frequently depends on the audience and purpose. Sometimes a quick click-through is the way to go, but if you're doing user testing, you may want to invest in making the prototype closer to the final application. Before building the more complex interactions, it's a good idea to consider whether you need to. Of course, sometimes it's just fun to make it all work.

Interactions in Axure RP are made up of three main parts: events, cases, and actions.

This article gives you an overview of the interactions and you will learn to create simple page links and show multiple cases from an interaction. This is the first of two articles about building interactions in Axure RP.

Things just got a little more interesting with your wireframes with links and multiple cases.

Select a widget in the wireframe to display the events available for that widget in the Interactions tab of the Widget Properties Pane.

To add a case, select an event and click “Add Case”, or double-click on the event. This opens the Case Editor dialog where you can choose and configure the actions you want to perform.

At the top (“Step 1: Description”), you can edit the description for the case. The description is presented in the prototype if there are multiple cases on the event and no conditional logic.

Add one or more actions to a case by clicking an action from the list on the left-hand section (“Step 2: Add Actions”).

The actions you choose appear in the middle section (“Step 3: Organize Actions”). You can add an action multiple times. The actions respond in the order shown. For example, if you add a “Set Variable Value” action after “Open Link in Current Window”, the browser will link to the next page before the variables get set.

They can be reordered by drag and drop or by clicking on the down arrow next to the action (or right click on the action) and selecting the option to move the action up or down.

Select the action in Step 3 to configure the properties in the right-hand section (“Step 4: Configure actions”).

When you are finished, click OK and the case and actions will appear in the Widget Properties Pane.

Cases are the possible paths in response to an event. For example, on the click of a hyperlink, there may be a single case to open a page. Or on the click of a Login button, there may be two cases. If the login succeeds, open a page or if it fails, show an error. In Axure RP, these cases can be presented in the prototype as options or you can define conditional logic to automatically perform the desired case based on the values in the fields.

Actions are the responses to an event that are defined within a case. Take the hyperlink example: on the click of the hyperlink, open a page in the current window. The action in this case is “open a page in the current window”.

Below is a list of the available actions.

Link actions:

Open Link in Current Window: Opens a page or external URL in the current window.

Open Link in New Window/Tab: Opens a page or external URL in a new window or tab.

Open Link in Popup Window: Opens a page or external URL in a popup window. You can specify the size and properties of the window.

Open Link in Parent Window: Used from a popup window to change the page loaded in the parent window that opened it.

Close Current Window: Closes the current window.

Open Link(s) in Frame(s): Used with the inline frame widget to change the page loaded in the inline frame.

Open Link in Parent Frame: Opens a page in the parent frame. Used from a page loaded in an inline frame. Dynamic Panel related actions:

Dynamic panel actions:

Set Panel state(s) to State(s): Sets the current visible state of one or more dynamic panels.

Show Panel(s): Shows (makes visible) the contents of one or more dynamic panels.

Hide Panel(s): Hides the contents of one or more dynamic panels.

Toggle Visibility: Shows or hides dynamic panels based on their current visibility.

Move Panel(s): Moves a dynamic panel to a specific location or by a specified distance.

Bring Panel(s) to Front: Brings a dynamic panel to the top layer of the page.

Widgets and Variables actions:

Set Variable/Widget value(s): Sets the value of one or more variables and/or widget values (i.e., the text value on a widget).

Scroll to Image Map Region: Scrolls a page to the location of an image map region widget. Similar to an anchor or jump link.

Enable Widget(s): Enables form widgets like a droplist or text field.

Disable Widget(s): Disables form widgets.

Set Widget(s) to Selected State: Sets the style of a widget to its selected style or back to its default style.

Set Focus on Widget: Sets the focus of the cursor on a form widget (i.e., a text field).

Expand Tree Node(s): Expands the nodes of a tree widget.

Collapse Tree Node(s): Collapses the nodes of a tree widget.

Miscellaneous actions:

Wait Time (ms): Delays actions by a specified time.

Other: Shows a specified text description of an action such as “Send email to user”.

Events are triggers for an interaction. For example, a click, a mouse over, a drag, a drop, etc. Different widgets respond to different events.

Below is a list of all the events available in Axure RP and the widgets they are available for.

OnClick: When a widget is clicked (all widgets except the dynamic panel)

OnMouseEnter: When the cursor is moved over a widget (images, text panels, hyperlinks, button shapes, and image map regions)

OnMouseOut: When the cursor is moved away from a widget (images, text panels, hyperlinks, button shapes, and image map regions)

OnKeyUp: When a keyboard key is released while typing in a widget (text fields and text areas)

OnFocus: When a form widget get focus by clicking or tabbing in (text fields, text areas, droplists, list boxes, checkboxes, and radio buttons)

OnLostFocus: When a form widget loses focus (text fields, text areas, droplists, list boxes, checkboxes, and radio buttons)

OnChange: When an option is selected in a droplist or list box item.

There are also events specific to the dynamic panel: OnMove, OnShow, OnHide, OnPanelStateChange, OnDragStart, OnDrag, and OnDragDrop. Learn

about these in further detail in the article Advanced Dynamic Panels.

There are scenarios where triggering an event could take multiple paths or cases. To define additional cases on an event, repeat the steps for adding a case. You can use the case descriptions to describe the scenario. For example, on the OnClick of a button, you can have two cases with the descriptions “If Login Succeeds” and “If Login Fails”. In the prototype, clicking on the button displays the descriptions and you can choose one to perform the related action.

A well written case description is an effective way to communicate conditional flow and is easy to maintain and update. When you need the prototype to perform the right case automatically, you can define conditional logic on the cases to perform actions based on values stored in variables or entered by the user in the prototype. Head over to

the article Conditional Logic to learn more.

This tutorial shows how to add links from page to page, open links in a new browser tab, link to the previous page, and close the current browser window/tab.

Go to Page Links Tutorial