Adding new records to a Data List using forms

With Justinmind, you can add new records to a Data List using forms. In this example, we’ll create a new flight details input screen. When the user inputs their new flight details and clicks a button, information about their flight will be added to display in a Data List.
add-records(1)
To add new records to your Data List, follow these steps:

  1. Create a Data Master with the following fields: Airline, Departing to, Flight, Scheduled, Terminal, Gate, Status.
  2. Draw the form by dragging some Text widgets and Input Text Fields to the Canvas. Alternatively, drag your Data Master to the Canvas from the Data Masters palette, which will automatically create a form.Data driven prototyping: add records to data lists with input forms
  3. Drag a Button to the Canvas, label it “New” and place it below the input form you just created.
  4. Create two additional screens in your prototype, naming them “Confirmation Page” and “Flight List”.
  5. From the Variables palette, create a variable for each of the Input Text Fields you have on the screen, leaving the default value empty.
  6. Drag each Input Text Field to its respective variable. This will create an “On Page Unload” + “Set Value” event, and will set the variable’s value to whatever’s entered in its respective Input Text Field. Repeat this until each Input Text Field has an “On Page Unload” + “Set Value” event.Data driven prototyping: add records to data lists with input forms
  7. Drag the “New” Button to the “Confirmation” screen in the Screens palette, which will create an “On Click” + “Link To” event.
  8. On the “Confirmation screen”, we’ll display the values stored in the variables in Text elements. We’ll also have a button that, once clicked, creates a new record in the Data Master with all the new flight information. To create this screen, drag as many Text widgets to the screen as the variables you have, i.e. seven, to the Canvas. Then, drag a Button to the Canvas and place it below the Text elements.
  9. Drag each variable from the Variables palette to the Text element where you want it displayed. This will create an “On Page Load” + “Set Value” event, which will display the value stored in the variable in each Text element.
  10. Select the Button, go to the Events palette and add an “On click” + “Data Master Action – New” event. In the Calculated Expression builder, drag the variables for each Data Master field to each corresponding space in the expression.Data driven prototyping: add records to data list with input forms
  11. Next, drag the Button to the “Flights List” screen to create an “On Click” + “Link To” event.
  12. Lastly, go to the “Flights List” screen and drag a Data List to the Canvas and select the Data Master you’ve created.Data driven prototyping: add records to data list with input forms

That’s it! You can now click “Simulate” and try adding a flight to the list.

You can download our example here.