This tutorial shows you how to to add page hyperlinks, open links in new browser tabs, link to the previous page and close the current browser tab/window using the OnClick event.

Basic Interactions Tutorial

Linking to Pages

Page Linking

Now you're ready to add links to your wireframes... but that's just the beginning.

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

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

Now let's test the different interactions. Generate the prototype by going to Generate -> Prototype in the main menu. Clicking "Generate" will generate and open the prototype in your web browser.

On the "Example: Page Links" page, clicking the "Current Window" button should open Page 1.

On Page 1, clicking "Go Back" should bring you back to the "Example: Page Links" page.

Then, clicking "New Tab" should open Page 1 in a new browser tab.

In the new browser tab, clicking "Close" will close the tab.

And that's it for the page links tutorial.

(AxurePageLinks.zip)

This zip file contains the RP file needed to complete this tutorial

Open the "Page Links" page and select the "New Tab" button. Add a case to OnClick with an action to "Open Link in New Window/Tab", and choose Page 1. Click "OK".

Now, select the "Close" button and add a case to the OnClick event with the action to "Close Current Window". Click "OK".

In the Case Editor dialog, click "Open Link in Current Window" in the list of actions on the left. That will add the action to Case 1 in the middle pane.

Then, choose the page to open by clicking Page 1 in the sitemap on the right. Click "OK" to add the case and close the dialog.

First, open PageLinks.rp and open the "Page Links" page.

Then, select the "Current Window" button and go to the Interactions Tab (lightning icon) in the WIdget Properties pane.

Select the OnClick event and click "Add Case", or double-click on the event. This opens the Case Editor dialog.

Now, let's add an interaction to the "Go Back" button on Page 1 that returns you to the previous page. Double-click on Page 1 in the Sitemap pane to open it for editing.

Select the "Go Back" button in the wireframe and add a case to the OnClick event.

Like before, add the action to "Open Link in Current Window". But this time, instead of linking to a page in the design, we'll choose the option to link "Back to previous page". Then, click "OK".

Step 1: Add a case to the OnClick event

Step 2: "Open Link in Current Window"

Step 3: Add a link to the "Go Back" button

Step 4: "Back to previous page"

Step 5: "Close Current Window"

Step 6: "Open Link in a New Window/Tab"

Step 7: Generate the prototype

Next: Multiple Cases Tutorial

Back to Basic Interactions