Edit-in-place rows in your Data List

With Justinmind, you can edit-in-place rows in your Data List.

data-driven-prototyping-edit-rows-in-place-gif

To edit-in-place rows in your Data List, follow these steps:

  1. In a new web prototype, go to the Data Masters palette and create a new Data Master.
  2. Name it “Flights” and create a field called “Status”. Click “OK”.
  3. Double-click on the data master you’ve just created and select the “View and edit records” tab.
    • Write some example data there.
    • Click “OK”.
  4. Now drag a Data List widget to the screen and, in the dialog that appears, select the “Flights” Data Master and then move the data master field “Status” from the left to the right using the arrow.
  5. Select the Text box in the cell of the Data List, right click on it and select “Group in dynamic panel”.
    • edit-in-place-list
  6. Now create another panel by clicking on the ‘+’ icon, double click on it so you can edit its content and drag an input text into it.
  7. Go to the Data Masters palette, expand the Data Master and drag the field “Status” on top of the Input text you’ve added in the panel.
  8. Select the text in “Panel_1” of the Dynamic Panel.
    • Go to the Events palette and add an “On Click” + “Set Active Panel” event, selecting “Panel_2” in the Outline palette of the Events dialog. data-driven-prototyping-edit-rows-in-place-set-active-panel
  9. Open “Panel_2” and select the input text (“Input_2”).
    • Go to the Events palette and add an “On Change” + “Data Master Action” event.
      • Select the “modify” button and build the expression displayed in the image below, by dragging the first row (“Current_row_1”) of the Data List (and not the header) and the Input Text Field in “Panel_2” to the final term in the expression:
      • data-driven-prototyping-edit-rows-in-place-modify-expression
  10. Click “OK” twice to go back to the canvas.
    • Now click on the gear icon next to the word ‘do’ and select ‘add action’.
    • Add an “On Change” + “Set Active Panel” and select “Panel_1”.

You can download our example here.