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 flight search screen. When the user inputs their flight details and clicks the buttons, information about their flight will be displayed in a table or list (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.
    • 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 Text Fields to the canvas. Alternatively, drag your Data Master to the canvas from the Data Masters palette.
  3. Create two additional screens in your prototype: “Confirmation Page” and “Flight List”.
  4. To create your “Add flight” screen, drag the Data Master to the canvas.
    • Data driven prototyping: add records to data lists with input forms

  5. Drag a Button to the canvas and place it below the input form.

  6. From the Variables palette, create a variable for each of the four input fields you have on the screen, leaving the default value empty.

  7. Drag each input field to its respective variable. 

    • Note that 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
  8. Finally, drag the Button to the “Confirmation” screen.
  9. In the “Confirmation screen”, we will display the values stored in the variables in Text boxes. We’ll also have a button that, once clicked, creates a new record in the Data Master with all the information stored in the variables.
  10. To create this screen, drag as many Text boxes to the screen as the variables you have, i.e. seven, to the canvas. Then, drag a Button to the canvas.
  11. Drag each variable from the Variables palette to the Text box where you want it displayed. When loaded, the screen will display the value stored in the variable.
  12. Select the Button, go to the Events palette and add anOn click” + “Data Master Action. Click the “New” button, and drag the variables for each Data Master field to the conditional expression terms.
    • Data driven prototyping: add records to data list with input forms
  13. Drag the Button to the “Flights List” screen.
  14. The “Flights List” screen will display all flights. To create this screen, 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 “Simulate” and try adding a flight to the list.

You can download our example here.