Designing a login form using Data Masters

With Justinmind, you can create a login form using Data Masters that requires users to log in in order to access the rest of the site or app.
To create a login form with a Data Master, follow the steps below:

  1. Start by creating a Data Master and name it “Users”. Add two Data Master fields and name them “Login name” and “Password”.
  2. In the Data Masters palette, double click on the Data Master and select the “View and edit records” tab. Write some example usernames and passwords here.
  3. Look back to the Canvas and drag the Data Master to it. This will automatically a login form. Drag a Button widget below the form.
  4. Go to the Screens palette and create a second screen (click the ‘+’ icon), which will be a ‘confirmation’ screen that shows the user has successfully logged in.
  5. Go back to Screen 1, select the Button, and create an “On Click” + “Link To” event, linking to Screen 2.
  6. Look to the Events palette and click the “add condition” text next to the event you just created. You’ll see the Conditional Expression builder appear. Follow these steps to create the condition:

    1. Drag the “Filter” function to open space in the expression.
    2. Drag the Data Master from the Data Masters tab in the builder to the first space that appears.
    3. Drag the “Login name” field from the Data Master next to the Data Master in the expression.
    4. Drag the “Equals” function next to the “Login” field in the expression.
    5. Drag the username Input Text Field into the open space that appears.
    6. Drag the “And” function between the last parenthesis and the parenthesis on the right of the “Equals” function, so that the first statement applies to the “Equals” function.
    7. Add another “Equals” function and repeat the above steps for the “Login name” Field for the “Password” Field.
    8. Then, drag the “Count” function to the left of the “Filter” function.
    9. Drag another “Equals” to the right-end of the expression. Finally, write ‘1’ in the last term.
    The expression must match the image exactly for the event to trigger correctly.log-in-events

And that’s it! Click “Simulate” to interact with your prototype.

You can download our example here.