Learn how to prototype web and mobile apps

How to edit-in-place the rows of a Data List in your web prototypes

In this tutorial, you will learn how to edit-in-place the rows of a Data List.

You can download an example here.


1) In a new web prototype, go to the Data Masters tab 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 tab ‘View and edit records’. 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 in the cell of the Data List, right click on it and select ‘Group in dynamic panel’.


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 tab, 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 tab and add an ‘On click’ + ‘Set active panel’ event, selecting “Panel_2” in the Outline tab of the events dialog. 


9) Open “Panel_2” and select the input text (“Input_2”). Go to the events tab 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 in “Panel_2” to the final position in the 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”.
That’s it! You can now click ‘Simulate’ and enjoy!

Next tutorial > Edit rows using check boxes