Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Simulate log in forms with conditions in your interactive prototypes

Learn how to simulate log in forms in your interactive prototypes with the help of conditions.

You can download the below example here.

 log-in forms with conditions in your prototypes

This tutorial will show you how to design a log in form that allows access to the next screen only if the correct user and password are entered. An error message is displayed otherwise.

This is possible by adding conditions to the events, so that they only run at certain times of the prototype simulation.

Follow the next steps to reproduce the example:

  1. In a new prototype, draw the log in form on a screen, by dragging a text widget, input text field and button to the canvas. The text widget will be named ‘Username’, the input text field ‘Password’ and the button ‘Log in’.
  2. Name this screen ‘Log in’ and then create another screen and name it”Welcome screen”.
  3. Drag the Log in Button to the welcome screen. A ‘Link to’ event will be automatically created in the Events tab in the first screen.
  4. The ‘Add Condition’ option will appear next to the interaction in the Events tab. Click on it to open the condition builder.

Now you need to build a condition to verify that the user field is ‘admin‘, and that the password is ‘1234‘. In other words: “only let the user go to the next screen if they enter ‘admin’ as user name and ‘1234‘ as password”.

log-in-form-simulation

Follow the next steps to build the condition shown above:

  1. Drag the “&” function into the editing area: ___& ___
  2. In the first gap, drag the “=” function and do the same for the other gap: ___= ___& ___=___
  3. Drag the username field from the screen to the gap before the first “=” function and in the second, type “admin”: user=admin&___=___
  4. Drag the password field from the screen to the gap before the second “=” function and in the second gap enter “1234”: user=admin&password=1234
  5. Click OK. You will see the condition in the Events tab.

Note: it is easier to select items from the active screen if you zoom in. You can also drag elements from the outline tab to the expression.

When you have finished, the “Else” option appears in the Events tab, when you click on the button. Here you have to establish what your application must do if the condition is not met (in this example, it will show an error message):

  1. Drag a Text widget to the Log in screen and write an error message.
  2. Mark it as Hidden by default in the Properties tab.
  3. Select the Log in button and click on the “else” option in the Events tab.
  4. The events dialog will pop up. Add an ‘On click’ + ‘Show’ event, and select the error text.
  5. Click OK to close the events dialog.

You’re done! Click on the ‘Simulate’ button to verify that the simulation is correct.

With Justinmind you can create as many complex conditions as needed, and link them to all the applicable cases of “if A does B”. You can copy and paste them in other events and even in events of other components.

Next tutorial > Simulate error messages in your prototypes

8 Comments

  1. Inthusan Gunasiri Says :

    December 8, 2014 at 1:16 pm

    Dear Sir or Madam,

    i just want to drag´n drop item on the simulated website from justinmind.

    But i need one function or (condition):

    – if I drag and drop it on the left hand side of a screen, i want to set the position of the element.
    – if it is on the right hand side, then it should replace the element.

    So i don´t see a condition in you library.

    Is it possible to create an own condition with the API ?

    Thank you =)

    best wishes

    Gunasiri Inthusan

  2. Wadim Says :

    February 12, 2015 at 1:28 pm

    Hello,

    First of all, Justinmind is a great program. Thanks a lot for sharing. I have an issue with my UI design and I was hoping you could help me out a little.

    I am designing a profile page for an app and I want the profile image to be resized on the moment when i start scrolling the dynamic panel.
    At the same time I want the profile image to resize to normal size at the moment the dynamic panel is scrolled back to the top.

    How do I do this?

    Thanks in advance.

    • Lidia Rodriguez

      February 27, 2015 at 11:20 am

      Thank you for your nice feedback! Try combining ‘on scroll’ events with ‘resize action’, and use X and Y relative and absolute positions.

  3. Mark Hilliard

    March 31, 2015 at 12:56 am

    I love this program. But, although I’m following the video’s instructions line for line, when I attempt to create a working login that’s testable in simulation mode, I’m unable to type in the text boxes in the simulation. I only have the bluish-green ‘one finger’ dot, and not the red dot that would allow me to enter text. Any ideas?

    • Lidia Rodriguez

      March 31, 2015 at 8:02 am

      Are you using Input text fields? That should work. If you need further assistance please refer to jim.support at justinmind dot com.

  4. bakhtawar

    September 12, 2015 at 5:34 am

    if there are so many user and they want to login on same login form then what is the possibility.. in this video they used fixed username=admin and password=1234 .. what if the other users have different username and password then how we do it?

    • Danielle Schneider

      September 13, 2015 at 4:46 am

      You will just need to add more conditions that detect different possible usernames and passwords.