Edit-in-place rows in your Data List

With Justinmind, you can edit-in-place rows in your Data List to create a seamless data-editing experience in your prototypes.
data-driven-prototyping-edit-rows-in-place-gif
To learn how, 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 three fields. Name them “Airline”, “Depart To”, and “Status”.
  3. Double-click on the Data Master you’ve just created and select the “View and edit records” tab. Write some example data there.
  4. Now drag a Data List widget to the Canvas and choose the Data Master you just created and all of its fields to populate the Data List.
  5. Select the ‘Status’ text input field within the Data List, right click on it and select “Group in dynamic panel”.edit-in-place-list
  6. Add another panel by clicking on the ‘+’ icon so there are two sub-panels in total. Double click on the panel so you can edit its content. Drag an Input Text Field into the panel.
  7. With the Input Text Field in Panel 2 selected, go to the Properties palette and look to the ‘Data Field’ dropdown. Select Flights.Status from the dropdown. Now, the Input Text Field in the panel will contain data from the Data Master.Select data field for input text field
  8. Select the text in Panel 1. Go to the Events palette and add an “On Click” + “Set Active Panel” event, selecting Panel 2 as the panel to be set as active. data-driven-prototyping-edit-rows-in-place-set-active-panel
  9. Go back to Panel_2 and select the Input Text Field again. Create an “On Change” + “Data Master Action – Modify” event. In the Calculated Expression builder, drag the first row of the Data List (Current_row_1) into the open space in the expression. Next, drag the Input Text Field in Panel_2 to the open space that corresponds to ‘Status’.data-driven-prototyping-edit-rows-in-place-modify-expression
  10. Look back to the Events palette and click on the gear icon next to the word ‘do’ and select ‘add action’. Add an “On Change” + “Set Active Panel” event and select Panel 1 as the panel to be set as active.

That’s it! Click “Simulate” to interact with your prototype.

You can download our example here.