Back to all Tutorials

Conditions & Validations

Justinmind Prototyper allows you to add conditions to events so they only run at certain times of the simulation. For example, you can simulate a "log in" form that allows access to the next screen only if the correct user and password is entered; an error message is displayed if they are incorrect.

Draw it on a screen by dragging labels, form fields and buttons to the canvas. Drag the Log in button to the welcome screen. A navigation event is automatically created in the Events tab. The Add Condition option is on top of that navigation, click it to open the corresponding dialog box:

conditions and validations

The Conditions Editor has a blank area to build the condition and a palette with grouped elements to define them. In turn, they are divided into components and functions. The components consist of form fields, texts, variables, data masters or data master fields. You can select any of them and drop them in the gaps in the editing area. Meanwhile, the functions are the operations you can perform on the previous ones to build the condition.

Following the Log in example, build a condition to verify that the user field is the same as the admin, and that the password field is 1234. In other words, "only let the user go to the next screen if he enters 'admin' and type '1234'".

  1. Drag the "&" function into the editing area:
  2. ___& ___
  3. In the first gap, release the "=" function and do the same for the other gap.
  4. ___= ___& ___=___
  5. Drag the username field from the screen to the first gap of the first "=" function and in the second, type "admin":
  6. user=admin&___=___
  7. Drag the password field from the screen to the first gap of the second "=" function and in the second gap enter "1234":
  8. user=admin&password=1234
  9. Click OK to see the condition in the Events tab.

Note: it is easier to select items from the active screen if you zoom in.

When you finalize the previous process, the "Else" option appears in the navigation event. Here you establish what your application must do if the condition is not met (in this example, send an error message).

  • Drag the Label component to the screen and write the error message.
  • Mark it as Hidden by default in the Properties panel.
  • Select the Log in button and click on the "else" option in the Events tab.
  • Check Show/Hide, select the error text and hit the Show option.
  • Click OK and click on the Simulate button to verify that the simulation is correct.

Create as 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.

Back to all Tutorials