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 Product List screen

  1. In a web prototype, create three screens: “Product List”, “Edit product” and “Edit product confirmation”.
  2. Click on the “Product List” screen in the Screens palette to open it.
  3. Create a Data Master with 4 fields in it (Name, Description, Price and Photo) and name it “Products”.
  4. Create a new Data List and name it “Products” and include all Data Master fields.
  5. Double-click on the Data List to edit its cells. Select “product name”, go to the Events palette and add an “On Click” + ‘Set Value” event.
    • In the Events dialog, click on the Variables palette, create a variable and call it “Product”.
    • Select it and click on the “Calculate” button.
    • Then, drag the row that holds the data “Current_row_1” of the Data List to the Expression builder.
    • Click “OK” twice to return to the canvas.
    • Note that the row clicked by the user is the one that will be saved in the variable.
  6. Drag “product name” to the “Edit product” screen. That will add a navigation event to that Text box.
    • data-driven-prototypes-edit-rows-in-data-list-events
Note: the variable stores all the information of the instance displayed in the row (in this case, all of the product information) and not only the information displayed in the columns. Therefore, when changing the screen, the variable contains a product, not an image and text.

Designing the Edit Product screen

  1. Drag the “Products” Data Master from the Data Master palette to the canvas. Then drag a Button to the canvas.
  2. Select the first Input Text Field.
    • Go to Events palette and add an “On Page Load” + “Set Value” event.
    • Then, select the same Input Text Field as the one that will change its value and click the “Calculate” button.
  3. In the Expression builder, drag the “Select” function to the conditional expression.
    • That function can extract a value from a Data Master record. Drag the “Product” variable to the first term.
    • Select the Data Master palette and expand the “Product” Data Master.
    • Then drag the “Name” field (that corresponds to name of the input field) to the second term in the conditional expression.
    • Click “OK” twice to return to the canvas.
    • data-driven-prototypes-edit-rows-in-data-list-expression
  4. Repeat Step three for all input fields.
    • The “Edit Product” screen will display the details of the row selected in Product List, stored in the “Product” variable. Now we’ll need to save the new values in several variables to send them to the next screen. Let’s do it.
  5. Create one variable per input field in the “Edit Product” screen.
  6. Drag each Input Text Field to its variable.
    • data-driven-prototypes-edit-rows-in-data-list-variable
  7. Drag the Button to the “Edit Product Confirmation” screen. Then, open that screen.

Editing the Product Confirmation screen

  1. Drag one Text widget per variable (created in the previous screen) to the canvas.
    1. Rename each Text box so as to display the value of each variable.
    2. Drag each variable to the corresponding Text box.
  2. Drag a Button to the canvas.
    1. Select it and go to the Events palette.
    2. Add an “On Click” + “Data Master Action” event, selecting the “Modify” option.
  3. In the Expression builder, drag the “Product” variable to the first term. Then drag each variable to the corresponding fields. Click “OK” twice to go back to the canvas.
    • data-driven-prototypes-edit-rows-in-data-list-modify-expression
  4. Drag the Button to the “Product list” screen and open that screen.

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

You can download our example here.