Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a confirmation pop up in your interactive mobile app prototypes

Learn how to create and simulate a confirmation pop up in your interactive mobile app prototypes with the help of this tutorial. You can use the same steps to create a wish list or a to-do list too.

In this tutorial, we’re going to create a contact list with a confirmation pop up that allows the user to delete a contact. We’ll use On Tap Show & Hide events.

You can download the below example here.

1-mobile-wireframe-confirmation-pop-up-menu-animation

Create a confirmation pop up in your mobile app prototypes

1. Create a new iPhone 6 mobile app prototype. From the iPhone iOS9 widgets library, drag a Header Top widget to the canvas and place it at the top of the screen. Remove the ‘buttons’ on the left and the right. This will be the header of our mobile app prototype.

2. To create a contact, drag the following to the canvas in descending order and position them to match our example: a rectangle widget (resize it to 375 x 53 px), an image widget to represent your contact avatar (add the image from your folders and resize it to 53 x 53 px), a paragraph widget (rename it with the contact’s name and location), an SVG vector that represents the ‘delete’ icon (or you can add a ‘Delete’ button from the iOS9 widget library), and a hotspot widget (resize it to 53 x 50 px and position it over the delete button).

1-mobile-wireframe-confirmation-pop-up-menu

3. From the Outline tab, select all of these elements and group them together.

4. Copy and paste the group to create duplicate contacts, changing the contact avatar, name and location each time.

5. Now, group all the contacts in a dynamic panel. Center the dynamic panel on the screen and change the layout to vertical.

2-2-mobile-wireframe-confirmation-pop-up-menu

6. Now we will create the confirmation pop up. To do so, drag a rectangle widget to the canvas and customize it to match our example: change its color to gray, resize it to 375 x 667 px (i.e. the screen size) and – from the Background properties – change its transparency to 80%.

7. Next, drag another rectangle to the canvas, place it in the center of the screen and customize it to match our example: resize it to 311 x 326 px, change the background color to white and make the borders round. Mark it has hidden in the properties tab.

8. Add a paragraph widget for the confirmation warning on top of the white rectangle. Rename it with the warning, ours reads: “Are you sure you want to delete this contact? This action cannot be undone.”Next, drag an image widget to refer to the action of deleting a contact. Finally, add two buttons on top of the white rectangle. Name them ‘Cancel’ and ‘Delete’ respectively to match our example.

9. Group all of these elements together in a dynamic panel (incl. both rectangles) and mark it as hidden in the properties tab. In the ID field, rename the dynamic panel “Confirmation_pop_up”.

3-mobile-wireframe-confirmation-pop-up-menu

10. Next, add a variable by clicking on the ‘+’ icon in the variables tab. Name it ‘Row’ and type the numbers ‘0’ into the Default value box.

4-mobile-wireframe-confirmation-pop-up-menu

11. Finally, ensure that the order of the components in the Outline tab are as follows:

  • Confirmation pop up
  • Header Top
  • Dynamic panel

Adding swipe events to make your list interactive

First, we’ll add events to the confirmation pop up.

  • From the confirmation pop up, select the ‘Delete’ button and go to the Events tab.
  • Add an “On Tap” + “Hide” event, selecting from the Outline tab the first group from the dynamic panel. Below add a slide up effect, and a linear easing at 300 ms. Click OK.
  • On the left of this event, click the ‘add condition’ link and add the following expression:

Drag the ‘Row’ variable to the first position, followed by the EQUALS function, and type the number ‘1’ into the final position. Click OK.

  • Now right click on the event and select the ‘Add action after selected’ option. Add another “On Tap” + “Hide” event, this time selecting the panel containing the confirmation pop up. Below add a fade effect at 300 ms. Click OK.
  • On the right of this event, select the ‘Else’ option. Add another “On Tap” + “Hide” event, this time selecting the second group from the dynamic panel. Below add a slide up effect, and a linear easing at 300 ms. Click OK.
  • On the left of this event, click the ‘add condition’ link and add the following expression:

Drag the ‘Row’ variable to the first position, followed by the EQUALS function, and type the numbers ‘2’ into the final position. Click OK.

Repeat the above steps for your remaining contact groups, changing the relevant group to be hidden and the number in the expression in each instance.

  • Next, select the ‘Cancel’ button from the confirmation pop up and add another “On Tap” + “Hide” event, selecting the panel containing the confirmation pop up. Below add a fade effect at 300 ms. Click OK.

6-mobile-wireframe-confirmation-pop-up-menu

Now, we’ll add events to the contacts.

  • From the dynamic panel, select any item in the first group and return to the Events tab.
  • Add an “On Tap” + “Show” event, selecting the confirmation pop up. Below add a fade effect at 500 ms. Click OK.
  • Right click on the event and select the ‘Add action after selected’ option. Add an “On Tap” + “Set Value” event, this time selecting the ‘Row’ variable from the variables tab. Below type the numbers ‘1’ into the input text field and click OK.
  • Change the link in between the events to ‘WITH previous’.

5-mobile-wireframe-confirmation-pop-up-menu

 

Repeat the above steps for your renaming contact groups, changing the number in the input text field accordingly. For example in the event for group 2, type 2, in group 3, type 3 and so on.

And that’s it! Click ‘Simulate‘ to view and interact with your prototype. Upon simulation, you can click on the delete icon and a confirmation pop up will appear prompting you to either delete the contact or cancel the action.

 

You have completed the Dynamic Panels tutorials! Click here to learn how to Reuse and Apply Global Changes