#Protopie dropdown how to
#Protopie dropdown plus
#Protopie dropdown download

Select a variable and drag it to the corresponding text element on the Screen. Go to Screen 2 and look at the Variables palette.Repeat Step 2 for the next two Input Text Fields.This will create an “On Page Unload” + “Set Value” event, which will set the value of the variable to the details entered in the Input Text Field during simulation. Drag the Input Text Field to the corresponding variable in the Variables palette. Note: In mobile prototypes, “On Click” changes to “On Tap” but they serve the same function Go to Screen 1 and create an “On Tap” + “Link To” event, and link to Screen 2.Go to the Variables palette and add three variables, one for each input field.Go to screen 2 and add the same Text Fields with the Input Text Fields below each text.Add a button in the bottom right corner of the screen that will be used to navigate to the next screen.Drag an Input Text Field below each Text Field, there should be three in total.On the first screen, drag three Texts and name them “Username”, “Email Address” and “Password”.Create a new prototype with two screens.To design a multi-step form in your prototype, follow the steps below: Designing the screens In the last screen, the user will see a summary of all the details they have filled in.

In this example, you’ll learn how to create a mobile input form with multiple screens. With Justinmind, you can create and simulate a multi-step form using variables and screen flow validation. Then, hit the TAB key and you’ll focus on the second Input Text Field and see the values autofilled. That’s it! Click “Simulate” and enter some text in the first Input Text Field. Leave the trigger as “On Key Up” and change the resulting action to “Set Focus On” and select the second Input Text Field as the target to be focused on.

Looking again to the Events palette, click “Add Event”.

Create another “On Key Up” + “Set Value” action and select the third Input Text Field as the target, and enter something as the value set by the action.

Look back to the Events palette, click on the gear icon next to the word ‘Do’ and select ‘Add action’.

For the value set by the action, type in a value. For the target of the action, select the second Input Text Field. In the ‘Any Key’ field that appears, hit the desired keyboard key trigger.

Click “Add Event” and select the “On Key Up” trigger.

Select the first Input Text Field of the form, and look to the Events palette.Create a new prototype and create a form using Text and Input Text Fields located in the Toolbar.In this exercise, you’ll learn how to autofill two Input Text Fields after hitting the tab key in the first Input Text Field.įollow these steps to complete the exercise: We’ve created a few example exercises to give you an idea of a few ways to do so. Once you’ve designed your form, you can start to add Events to create sophisticated interactions. You can add additional widgets with an input style into your prototype by adding other widget libraries. For example, in iPhone device prototypes, focusing in on an Input Text Field during simulation will automatically show an interactive device keyboard. Just click “Simulate” and you’ll be able to interact with them.ĭepending on which device you’re using in your prototype, the appearance and functionality of these widgets will differ. Just drag a widget onto the Canvas to start creating your form.Īll form and input widgets are automatically interactive during simulation – no Events needed.

You can also download our pre-made forms and import them into your Widgets palette. Here, you’ll find widgets commonly used in forms, including: Input Text Fields, Checkboxes and Radio Buttons, Select Lists, and more.

Look to the Toolbar located under the plus sign in the top left corner of your screen. To create a form in Justinmind, you’ll need to use widgets. With Justinmind, you can create interactive forms in your prototypes to simulate user input experiences, such as registration, login, and search forms.

#Protopie dropdown how to

#Protopie dropdown download

#Protopie dropdown plus