Editing Data List records

With Justinmind, you can edit existing records in a Data List, by using the Data Master action “modify” and an input form.

Edit rows with input forms in your web wireframes - gif

To edit Data List records, follow these steps:

  1. In a web prototype, go to the Data Masters palette and create a new Data Master.
    • Name it “record action update” and create two fields: first name and last name.
    • Then click “OK”.
  2. Double-click on the Data Master you’ve just created and select the “View and edit records” tab.
    • Write some example data there.
    • Then click “OK”.
  3. Now drag a Data List widget to the screen.
    • Name it “samples” and select the Data Master.
    • Then select all its fields.
  4. Right-click on the Data List and select “New column”.
    • Drag a Text widget and write “update”.
    • Edit rows with input forms in your web wireframes - data list
  5. Drag some Text widgets, Input Text Fields and a Button to match our example or just drag the data master to the screen to get the form.
    • Edit rows with input forms in your web wireframes
  6. Select the “update” Text and go to the events tab.
    • Add an “On Click” + “Set Value” event, and then select the “variables” tab.
    • There, create a new variable, name it as you wish, and select it.
    • Click on the “Calculate” button and drag the row (“Current_row_1”) of the Data List to the expression builder (it’s easier to select it from the outline).
    • Click “OK” twice.
  7. Click on the gear icon next to the word “do” and add another “Set Value” event, this time selecting the Input test field that will display the “first name” as the component that will display the value.
    • Click on ‘Calculate’ and build the expression displayed in the image below, by dragging the “Select function, the variable and the Data Master Field “first name” to the expression builder:
    • Edit rows with input forms in your web wireframes
  8. Click “OK” twice.
    • Now repeat the last step but this time use the ‘last name’ text and the “last name” Data Master Field.
  9. Select the Button and go to the Events palette.  
    • Add an “On Click” + “Data Master Action”.
    • Click “modify” and build the expression displayed in the image below, by dragging the variable, the “first name” Text Input Field and the “last name” Text Input Field to the expression builder:
    • Edit rows with input forms in your web wireframes - modify expression
    • Click “OK” twice,

And that’s it. Click “Simulate” to interact with your prototype. 

You can download an example here.