SHOW HIDDEN ERROR MESSAGE

Show, hide, and keep those interactions alive!

First, open AxureShowHiddenWidget.rp and open the "Show Hidden Widget" page.

 

In this example, we'll create an error message that shows when the login fails.

 

Drag and drop a Rectangle widget from the Widgets pane to the design area under the Login button.

While the Rectangle is selected:

 

Go to the top of the Widget Interactions and Notes pane and name the widget "Error Message".

Features

Learn

Community

Company

Buy

Download

Axure Share

Forum

Manage Licenses

 

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

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

u59_start u59_end u59_line

 

 

 

 

Use the formatting tools to create a red box with white text for your error message that reads:

 

"Incorrect Login Information. Please try again."

 

 

Now, let's add interactions to the Login button. For the first case, we want to open the My Account page if the login succeeds.

 

Select the Login button on the design area. Add a case to the OnClick event, and change the case description in the top left of the case editor to, "If Login Succeeds". Then, add an action to "Open Link" and choose the "My Account" page.

 

Click "OK" to close the Case Editor.

 

For the second case, we want to show the Error Panel if the login fails.

 

Add a second case to the OnClick event with the case description "If Login Fails". Then, add an action to "Show", choosing the Error Message. Click "OK".

 

 

 

Preview the prototype by clicking the preview icon in the toolbar. You'll see that clicking on the Login button will present the two cases. Clicking "If Login Fails" shows the error message, and clicking "If Login Succeeds" takes you to the My Account page.

 

Step 1: Add a

Rectangle widget

Step 2: Name the widget

Step 3: Design

the error message

Step 4: Set the

Widget to hidden

Step 5: Add case

for "If login succeeds"

Step 6: Add case

for "If login fails"

Step 7:

Preview the prototype

BASIC INTERACTIONS

Show Hidden Widget Tutorial

DOWNLOAD

 

u152_start u152_end u152_line
u154_start u154_end u154_line
u156_start u156_end u156_line
u158_start u158_end u158_line
u160_start u160_end u160_line
u162_start u162_end u162_line

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

THE ROUND UP

u171_start u171_end u171_line

MORE BASIC INTERACTIONS TUTORIALS ::

With the Rectangle selected, toggle the "visible" option in the Style Tab. This hides the widget by default on the page and you'll see a yellow mask.