Modifying records to a Data List using forms

With Justinmind, you can modify records in a Data List and create dynamic and editable displays of data. edit-row

To learn how, 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.Create 3 screens in your prototype
  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 four variables and name them “Users”, “Name”, “Surname”, and “Age”, respectively. Leave their default values empty.Add 4 variables
  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, selecting the “Users” variable as the target of the action. For the value, click the “Calculated” radio button and the “Add expression” text. You’ll see the Calculated Expression builder appear.

    In the builder, drag “Current_row_1” of the Data List to the open space in the expression. This will store the row the user clicks on during simulation in the variable’s value.

  6. With Users.Name (the input) still selected, create an “On Click” + “Link To” and link to the edit screen. This is how your events should look so far: data-driven-prototypes-edit-rows-in-data-list-events

Designing the Edit User screen

  1. Go to the “Edit” screen and look to the Data Masters palette. Drag the “Users” Data Master palette to the Canvas, which will automatically create a form in which you can edit the data. Drag a Button to the Canvas below the form you just created.Create a form
  2. Select the first Input Text Field – labeled ‘Name’ – and create an “On Page Load” + “Set Value” event, selecting the same Input Text field element as the target of the event. For the value, click the “Calculated” radio button and the “Add expression” text. You’ll see the Calculated Expression builder appear.Set the value to the Name Input Text Field
  3. In the builder, drag the “Select” function to the open space in the expression. Select the Variables tab in the builder and drag the “Users” variable to the first open space that appears. Select the Data Masters tab and drag the “Name” attribute to the second space in the expression.data-driven-prototypes-edit-rows-in-data-list-expression
  4. Repeat steps two and three for all Input Text Fields, replacing the attribute each time so that each have an “On Page Load” + “Set Value” event, and each attribute from the Data Master is addressed in an expression. This will display the details of the row selected in User List that’s stored in the “Users” variable.

    Now we’ll need to save the new values in the variables we created earlier, so we can display them on the “Confirm” screen.
  5. Drag each Input Text Field to its corresponding variable. This will create an “On Page Unload” + “Set Value” event, giving the variable the value of whatever’s entered in each Input Text Field.data-driven-prototypes-edit-rows-in-data-list-variable
  6. Drag the Button to the “Confirmation” screen to create an “On Click” + “Link To” event.

Editing the User Confirmation screen

  1. Go to the “Confirm” screen. Drag four Text widgets (one for each variable) to the Canvas. Drag a Button to the Canvas and place it below the Text elements.
  2. Drag each variable to the corresponding Text element, which will create an “On Page Load” + “Set Value” event for each Text element.Set text values from the variables
  3. Select the button and create an “On Click” + “Data Master Action – Modify” event.
  4. In the Calculated Expression builder, drag the “Users” variable to the open space the expression furthest to the left. Then, drag each variable to the corresponding fields in the expression. Click “OK” twice to finish building the event.data-driven-prototypes-edit-rows-in-data-list-modify-expression
  5. With the button still selected, drag the Button to the first screen to create an “On Click + “Link To” event.

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.