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.
To learn how, follow these steps:
- In a new web prototype, go to the Data Masters palette and create a new Data Master.
- Name it “Flights” and create three fields. Name them “Airline”, “Depart To”, and “Status”.
- Double-click on the Data Master you’ve just created and select the “View and edit records” tab. Write some example data there.
- 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.
- Select the ‘Status’ text input field within the Data List, right click on it and select “Group in dynamic panel”.
- 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.
- 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 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.
- 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’.
- 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.