Modifying records to a Data List using forms

With Justinmind, you can modify records in a Data List. edit-row

To modify records in your Data List, follow these steps:

Designing the User List screen

  1. In a web prototype, create three screens. One will display the data (the list of users), one will allow you to edit the data, and one will show a confirmation of your edits.
  2. Create a Data Master with 3 fields in it (Name, Surname, and Age) and name it “Users”.
  3. Create a new Data List and name it “Users” and include only the Name and Surname Data Master fields.
  4. Create a variable and name it “Users”. Leave its default value as empty.
  5. Double-click on the Data List to open its cells. Select “Users.Name” (the input within the Current_Row, and Row_Cell_2), go to the Events palette and add an “On Click” + ‘Set Value” event, setting the value to the variable.
     
    In the Expression builder, drag the row that holds the data “Current_row_1” of the Data List to the space in the Expression builder. This will ensure that the data of whichever row is clicked will be stored in the variable.
  6. Create an “On Click” + “Link To” event for Users.Name (the input) and link to the edit screen.data-driven-prototypes-edit-rows-in-data-list-events

Designing the Edit User screen

  1. Drag the “Users” Data Master from the Data Master palette to the canvas. This will automatically create the Input Text Fields and titles you’ll use to edit the data.
  2. Drag a Button to the Canvas below the Input Text Fields you just placed on the Canvas.
  3. Select the first Input Text Field (Name).
  4. With the Input Text Field selected, go to Events palette and add an “On Page Load” + “Set Value” event and select the same Input Text Field as the target of the event.
     
    For the value, click “Calculated”.
     
    In the Expression builder, drag the “Select” function to the open space in the expression.
     
    Select the Variables tab. Drag the variable into the first space.
     
    Select the Data Masters tab. Drag the “Name” attribute to the second space in the expression.
     
    Click “OK” twice to return to the Canvas.data-driven-prototypes-edit-rows-in-data-list-expression
  5. Repeat steps three and four for all Input Text Fields, replacing the attribute each time so that each have an “On Page Load” + “Set Value” event, and each attribute is addressed in an expression.
  6. The “Edit” screen will display the details of the row selected in User List, stored in the “Users” variable. Now we’ll need to save the new values in several variables to send them to the next screen. Let’s do it.
  7. Create one variable per Input Text Field in the “Edit” screen. You’ll have: Name, Surname, and Age.
  8. Drag each Input Text Field to its corresponding variable. This will create an “On Page Unload” + “Set Value” event.data-driven-prototypes-edit-rows-in-data-list-variable
  9. Drag the Button to the “Confirmation” screen to create a Link. Then, click to that screen.

Editing the User Confirmation screen

  1. Drag one Text widget per variable (created in the previous screen) to the Canvas.
  2. Drag each variable to the corresponding Text box. This will create an “On Page Load” + “Set Value” event for each Text widget.
  3. Drag a Button to the canvas.
  4. Select it create an “On Click” + “Data Master Action – Modify”.
  5. In the Expression builder, drag the “Users” variable to the space the expression. Then, drag each variable to the corresponding fields. Click “OK” twice to finish building the event.data-driven-prototypes-edit-rows-in-data-list-modify-expression
  6. Drag the Button to the first screen to create a Link.

And that’s it. Click “Simulate” to try out your prototype. If you follow the entire flow from the first screen, you’ll see how the rows are updated each time you make a change.

You can download our example here.