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 “Flights” and create two fields: Airline and Flight.
    • 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 “FlightsList” and select the Data Master to fill its contents.
    • Select both to be included in the Data List.
  4. Right-click on the Data List and select “New column”.
    • Drag a Text widget into the row 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 generate the form.
    • Edit rows with input forms in your web wireframes
  6. Select the “update” Text and go to the Events palette.
    • Add an “On Click” + “Set Value” event, and then select the Variables palette.
    • There, create a new variable, name it as you wish, and select it to be the target of the “Set Value” action.
    • Click on the “Calculate” button. In the dialog that appears, drag the row (“Current_row_1”) of the Data List to the open space in the expression. You may find it easier to select it from the Outline palette.
    • Click “OK” twice to finish building this action.
  7. Click on the ‘gear’ icon next to the word “do” and add another “Set Value” action, this time selecting the “Airline” Input Text Field as target of the “Set Value” action.
    • Click on ‘Calculate’ and build the expression displayed in the image below, by dragging the ‘Select’ function into the first open space in the expression. Then, in the two new spaces that appear, drag the variable, and then the Data Master attribute “Airline”:
    • Edit rows with input forms in your web wireframes - select expression
  8. Click “OK” twice to finish building the action.
    • Repeat the last step, using the variable, but the “Flight” Data Master attribute instead.
  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 “Airline” Input Text Field and the “Flight” Input Text Field to the open spaces in the Calculated 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.