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.
  2. Double-click on the Data Master you’ve just created and select the “View and edit records” tab. Write some example data there.
  3. Now drag a Data List widget to the screen. Name it “FlightsList” and select the Data Master to fill its contents.
  4. Right-click on the Data List and select “New column”. Drag a Text widget into the new column’s row and type in “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.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 click to the Variables tab in the Events dialog. There, create a new variable and select it to be the target of the “Set Value” 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 the row (“Current_row_1”) of the Data List to the open space in the expression.
  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.

    For the value, click on ‘Calculated’ radio button and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.

    In the builder, first drag the ‘Select’ function into the 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. Repeat the last step, using the same variable, but drag the “Flight” Data Master attribute into the second open space instead.
  9. Select the Button and go to the Events palette. Add an “On Click” + “Data Master Action – Modify” event. Drag the variable to the first open space in the expression, and the “Airline” Input Text Field and the “Flight” Input Text Field to the next open spaces.Edit rows with input forms in your web wireframes - modify expression

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

You can download an example here.