Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create forms in your prototypes with Dynamic Panels

In this tutorial, you will learn how to quickly create forms in your interactive prototypes with dynamic panels and the new event “On Panel Active”, introduced with our latest release, which will make the form blank when a user starts it again. The “On Panel Active” triggers an event when a panel changes to active after a “Set Active Panel” event.

Let’s see how this new event will speed up the creation of forms in your interactive prototypes.

You can download the below example here.

interactive-prototype-forms

 

1) In a new web prototype, drag a Dynamic Panel onto the canvas and create 4 sub-panels. Each one of them will be a form page. Drag Text widgets, Input fields, Images and Buttons in them, as you can see in the example below. Remember to double click each sub-panel to edit its content. Also take advantage of the copy/paste to add the various component in the panels, it will save you time!

interactive-prototype-dynamic-forms

2) Once you have all the components correctly laid out on the canvas, you can start adding events. Add an “On click” + “Set Active Panel” event to the button in the first sub panel and select the second panel as the active one. Add one of the “Slide” effects to make your prototype more real.

create-forms-in-interactive-prototypes

3) Do the same with all the buttons in the panels. You can copy/paste the event on each button, however remember each time to set the correct active panel – i.e. the panel the button should take to.

4) Now we want to make sure that if we start the form again, it will be empty. We will do this by adding an “On Panel Active” + “Set Value” event on all the input widgets, where the value will be left as empty. Let’s start with the first panel. Select the first panel of the dynamic panel and add an “On Panel Active” + “Set Value” event on the first input field under ‘First name’. The value will be “fixed” and left in blank. Click OK and go back to the canvas.

forms-in-interactive-prototypes

5) In the events tab, right-click on the event you’ve just created and select “Copy action” and then “Paste after selected action”: the event will be copied but you need to double click on it and open the events dialog to change the component that will show the value to the second input field, under ‘Last name’. Once back again in the events tab, make sure to make the two events happen at the same time, selecting the arrow icon between them and changing it to “WITH previous”. Then, copy the event you have just created, by clicking on the ‘Copy’ icon in the top left-hand corner of the events tab (next to the ‘+’ icon).

6) Now select the second panel and in the events tab, paste the event, making sure to change the component that will show the value. In the case of radio buttons, make sure to select “Not checked” as a value in the events dialog.

interactive-prototype-dynamic-forms-events

7) Finally, select the third panel and paste the event as needed.

Note: radio buttons must be grouped in order to function in sync. When you’ve added all the events in each panel, right click on each group of radio buttons and select “Group”.

And that’s it. You can now simulate and enjoy!

 

Next tutorial > Simulate a Zoom and Pan effect on an image in your prototypes