Learn how to prototype web and mobile apps

Autopopulate text fields in your interactive wireframes

In your interactive wireframes, you can make text fields autopopulate after writing a specific value in a given input text field. In this tutorial, you will learn how to do so.

In Justinmind, this can be rendered with an “On key up” + “Set value” event. Let’s see how with an example. Fill in the first text field with a product ID and the other text fields will auto-populate when you hit the tab key (‘On key up‘). By hitting it, the user in fact triggers two actions, and each executes a “Set value” on the other text fields.

You can download the example below here.



To replicate the example above, follow the next steps:

1) Create a new prototype and draw the input form using Text widgets and Input text fields, as you can see in the image.

2) Rename the Text widgets as in the example.

3) Select the first input field and select the Events tab.

4) Click the ‘Add event’ button and select ‘On key up‘ in the ‘Keyboard’ sub-menu in the first drop down menu. 

5) Click on the ‘Any key’ field and hit the desired keyboard key trigger, in our case the TAB key. 

6) Select the action ‘Set value’.

7) Select the second input field as the component that will display the value, and in the ‘value is’ field write ‘Car engine’. Then press OK.

Interactive wireframes: autopopulate text fields
8) Go to the Events tab, click on the gear icon next to the word ‘Do’ and select ‘Add action‘.

Interactive wireframes: autopopulate text - Add action

9) Set up another ‘On key up’ + ‘Set value’ action on the third input field and add some text in the ‘value is’ field. Click OK.

10) In the Events dialog, add a second event by clicking ‘Add event’. Leave the first selection as ‘On key up’, and in the final menu, select ‘Set focus on’ and then select the second input field. Click OK. With this action, you will be able to pass to the following input field hitting the TAB key.

Interactive wireframes: autopopulate text - Events

Now click on ‘Simulate’ and enjoy!

Next tutorial > Rotate elements in your interactive wireframes