Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a confirmation pop up using data masters in your mobile prototypes

Learn how to create and simulate an advanced confirmation pop up with data masters 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 data masters and data grids to create this.

You can download the below example here.

1-mobile-wireframe-confirmation-pop-up-data-masters

Create a confirmation pop up in your mobile app prototypes

1. Create a new iPhone 6 mobile app prototype. First, 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%.

2. 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.

3. 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.

2-mobile-wireframe-confirmation-pop-up-data-masters

4. 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-popup” to match our example.

5. Now, we’ll create the iPhone header. 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.

6. Next, we’ll create the contact list. Drag a dynamic panel to the canvas and position it in the center of the screen. Resize it so that it covers the entire screen below the header. Change the layout to vertical.

3-mobile-wireframe-confirmation-pop-up-data-masters

7. Create a variable by clicking on the ‘+’ icon in the variables tab. Name it ‘Delete’ and type the number ‘0’ into the Default value box.

4-mobile-wireframe-confirmation-pop-up-data-masters

8. Create a new data master from the Data Masters tab by clicking on the ‘+’ option. Add a name for your data master, as well as the fields that you wish your contact to contain, such as Name, City, Country, and Picture. Add a final field and name it  ‘Delete’. Change the Picture and Delete fields’ type to ‘File Upload’. Click OK.

9. Double click on your data master to reopen it and edit the fields. Go to the ‘View and edit records’ tab and fill in records for the fields that you have created. For the Photo and Delete records, choose images from your folders. The Delete image should represent a delete icon, like in our example. Click OK.

How to create a confirmation pop up using data masters in your mobile prototypes

10. Next, click on the data grid widget in the Dynamic Content section of the Basic widget library. Give your data grid a name, choose your data master from the Data Maters drop down options and place all your data master fields on the right, using the selection arrow. Click OK and position your data grid on the side of the screen to edit.

6-mobile-wireframe-confirmation-pop-up-data-masters

11. With the data grid selected, go to the Properties tab and modify the columns so that you only have one. Navigate to the data grid in the Outline tab and delete all the text widgets from within it. Select the top cell from within the grid and resize it to 375 x 68 px. Finally, align the remaining input and image widgets to match our example and customize the font of the input fields as desired. From the outline tab, put the data grid inside the Dynamic Panel.

7-mobile-wireframe-confirmation-pop-up-data-masters

Important: ensure that the order of the components in the Outline tab are as follows:

  • Confirmation pop up
  • Header Top
  • Dynamic panel

Adding events to make your list interactive

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

  • Select the ‘Delete’ button from the confirmation pop up and go to the Events tab.
  • Add an “On Tap” + “Data Master Action” event, selecting the ‘Delete’ option on the right below.
  • In the Expression builder that appears, drag the ‘Delete’ variable to the first position and then click OK.
  • Right click on this event and select the ‘Add action after selected’ option. Add an “On Tap” + “Hide” event, selecting the “Confirmation-popup” dynamic panel from the Outline tab. Below, add a fade effect at 300 ms. Click OK.
  • Change the link in between these two events to ‘WITH previous’.
  • Select the ‘Cancel’ button from the confirmation pop up and go to the Events tab.
  • Add an “On Tap” + “Hide” event, selecting the confirmation pop up from the Outline tab. Below, add a fade effect at 300 ms. Click OK.

Now, we’ll add events to the data master contacts.

  • From the outline tab, select the ‘Delete’ image from the data grid and go to the Events tab.
  • Add an “On Tap” + “Show” event, selecting the “Confirmation-popup” dynamic panel from the Outline tab. Below, add a fade effect at 500 ms. Click OK.
  • Right click on this event and select the ‘Add action after selected’ option. Add an “On Tap” + “Set Value” event, selecting the ‘Delete’ variable from the variables tab. Below, select the ‘Calculated’ option and then ‘Add expression’. In the Expression builder that appears, drag:
  • the FILTER function in the first position [ the data master from the Data Masters tab [ the Input field widget that contains the name of your contact from within the data grid + the EQUALS function + the Name field from within the data master ]]
  • Tip: drag the FILTER function to the expression first, followed by the data master, followed by the EQUALS function, followed by the input field on the right of the EQUALS function and finally the Name field from within the data master. Learn more about the Expression Builder rules here
  • Change the link in between these two events to ‘WITH previous’.

8-mobile-wireframe-confirmation-pop-up-data-masters

And that’s it! Click ‘Simulate‘ to see 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 Forms and Data Lists tutorials!  Click here to continue with the Adaptive / Responsive tutorials