This tutorial shows how to create a login experience that displays an error message or links to the next page depending on the email and password entered.

Conditional Logic Tutorial

Account Login

Realistic Login Experience

Now you can make your login scenarios even more realistic with conditional logic.

First, open AccountLogin.rp and open the "Account Login" page.

Select the login button and add a case to the OnClick event.  In the Case Editor, click "Add Condition" at the top of the dialog. 

In the Condition Builder, configure the row to read "If text on widget Email Field equals value secretagentdale@fbi.com" using the droplists and text field.

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

(AxureAccountLogin.zip)

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

Click the green plus icon to add a second line to the condition. Setup the second row to read "If text on widget Password Field equals value coffee".

Click OK to close the Condition Builder.

Now that the condition is defined, we can add the action to perform if the email and password meet the condition.

Click "Open Link in Current Window" and select the "My Account" page.

Click OK to close the Case Editor.

Now that we've added a case for a successful login, let's add a second case that happens if the login is not successful.

Double-click the OnClick event to add a second case. Notice that "Else If True" is automatically added to the case. By default, this second case is performed if the condition on the first case is not satisfied. In this sample, we don't need to add a condition to the second case.

When a login is unsuccessful, we want  to show the Error Panel.  In the Case Editor, click "Show Panel" to add the action and check the Error Panel checkbox.

Generate your prototype and test it out.

Step 1: Add a case to OnClick

Step 2: Build the condition

Step 3: Add a second row to the condition

Step 4: Add action to case

Step 5: Add second case "else if"

Step 6: Add "Show Panel" action

Next: Terms & Conditions Tutorial

Back to Conditional Logic