Learn how to prototype web and mobile apps

Create a log in form in your prototypes with Data Master records

In this tutorial, we will learn how to create a functional log in form that lets users get to the next page only if the log in name and password match one of the user name and password included in a Data Master.

Download an example here.

1) First of all, we will have to create the Data Master ‘User’. Add two fields: one called Login Name and the other Password. Change the text type to ‘password’ for the password field, by selecting the field and clicking on the gear icon on the right-hand side. Click OK.

2) Right-click on the Data Master ‘User’ and select ‘Edit’. Select the ‘View and edit records’ tab and write some example users and passwords there.

3) Create a second screen and drag the Data Master to it: you’ll automatically have input fields for both fields.

4) Drag a Button to the canvas and create another screen. That screen will be the one we are going to show if the log in matches one of the users in the Data Master ‘User’.

5) Now, let’s create the condition that checks if the user introduced in the log in form matches any of the ones in the Data Master. Go back to the first screen, select the Button and go to the Events tab. Click on the ‘add condition’ link: the expression builder will pop up.

6) Build the expression displayed in the image, following the instructions below and following the exact same order:


  • Move the FILTER data function to the expression.
  • In the first gap, drag the Data Master “User”.
  • In the second gap, put the “=” function.
  • In the first gap of the “=” function, put the Login name field of our Data Master.
  • In the second, drag the input field that allows you to enter the login name.
  • Drag the “&” function between the last parenthesis and the parenthesis on the right-hand side of the “=” function, so that the first parameter takes the whole “=” function.
  • In the second gap, add another “=” function and repeat the steps you followed for the login name, this time selecting the password field from the Data Master, and the input field that allows you to enter the password.
  • The expression like this returns the users whose name and password match with the ones on the log in form. But we need to turn the expression into a condition.
  • Drag the COUNT function to the left side of the FILTER expression
  • Drag another “=”, this time at the end of the expression, after all the parenthesis, and write “1” in the last gap.

Note: it’s important to build the expression exactly as explained above, following the same sequence of steps and the same position of the parenthesis, otherwise the condition won’t work.

That’s it, the condition is complete, you can click OK!

This expression checks all the records in the Data Master “User” and chooses the ones that have a user and password matching those entered in the form. It then counts the number of users that comply with this condition and, if there is one, in other words if the expression is true, it lets the user go to the next screen.

To display error messages, please check this tutorial on how to simulate error messages in your prototypes.

You can now click on ‘Simulate’ and enjoy!

Next tutorial > Prototyping a stars rating click event


  1. stan Says :

    February 7, 2015 at 3:56 pm


    your tuto is very interesting, but how to display error message when login/password is incorrect ?

    many thanks

    and by the way, your product is awesome !

  2. Vishal

    April 13, 2015 at 5:04 pm

    How to go to 2 different screens depending on the conditions ?

    • Lidia Rodriguez

      July 6, 2015 at 10:01 am

      Create a link option and add a condition. Then, on the events tab you will see an ‘Else’, click there and add a new link event with a different condition.

  3. wilson carrie

    April 30, 2015 at 12:22 am

    i followed everything yet nothing happened.