Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to add records to a Data List in your web prototypes using input forms

In this tutorial, you will learn how to add records to a Data List using an input form.

You can download an example prototype here.

In this example, we’ll create a screen where the user can insert the information about a ‘Flight’. Then, a button will create that flight and display it in a table or Data List.

We will simulate a very simple process with three screens (Add Flight –> Confirmation –> Flights List). The first screen contains a form where users will enter the information to be included in the “Flight”. The second screen contains the confirmation page. The third screen displays all the flights in a Data List, including the ones created by the input form in the first screen.

add-records(1)

1) Create a Data Master with the following fields: Airline, Departing to, Flight, Scheduled, Terminal, Gate, Status.

Remember: if you wish to add any picture, don’t forget to change the Photo field type to File Upload.

2) Draw the form by dragging some Text widgets and Input fields to the screen. Alternatively, you can create a set of Text and Input Field widgets by simply dragging the Data Master to the canvas.

3) Create two additional screens in your prototype: ‘Confirmation Page’ and ‘Flight List’.

“Add flight” Screen

1) Drag the Data Master to the canvas.

Data driven prototyping: add records to data lists with input forms

Drag the data master to the canvas

2) Drag a Button and place it below the input form.

3) From the variables tab, create a variable for each of the four input fields you have in the screen, leaving the default value empty.

4) Drag each input field to its respective variable. This is a quick way to build an event that saves the value of each input in each of the variables. It would be the same as creating an event for each input, i.e. On page unload > Set value > Variable > Calculated value > Input.

Data driven prototyping: add records to data lists with input forms

Drag each input field to its respective variable

5) Finally, drag the button to the ‘Confirmation’ screen

“Confirmation screen”

In this screen, we will display the values stored in the variables in Text widgets. Then, we’ll have a button that, once clicked, creates a new record in the Data Master with all the information stored in the variables.

1) Drag as many Text widgets to the screen as the variables you have, i.e. seven. Drag also a Button.

2) Drag each variable from the Variables tab to the Text widget where you want it displayed. When loaded, the screen will display the value stored in the variable.

3) Select the Button, go to the Events tab and add an ‘On click’ + ‘Data Master Action’. Click the ‘New’ button, and drag the variables for each Data Master field to the expression gaps.

Data driven prototyping: add records to data list with input forms

4) Drag the Button to the ‘Flights List’ screen.

“Flights List” screen

This screen will display all flights. You just need to drag a Data List to the canvas and select the Data Master you’ve created, with all its fields.

Data driven prototyping: add records to data list with input forms

That’s it! You can now click on ‘Simulate’ and try to add some flights in the list!

Related tutorials:

Next tutorial > Learn how to edit rows in a Data List