Learn how to prototype web and mobile apps

Delete rows from a Data List in your web prototypes

In this tutorial, you will learn how to delete rows from a Data List, using the ‘Delete’ Data Master action.

Download an example here.


1) Create a new Data Master. Name it ‘Users’ and create two fields: first name and last name. Click OK.

2) 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.

3) Now drag a Data List widget to the screen. Name it ‘Users’ and select the Data Master and all its fields. Position it on the canvas.

4) Right click on the Data List and select ‘New column‘. Then select the newly created column (move the mouse to the top of the column) and drag it to the left most of the Data List. Drag a Text widget and make it look like a ‘delete’ action, i.e. write ‘X‘ in it. Alternatively, you can use a ‘X’ icon from one of the widget libraries (we used the ‘Close’ button from the iOS9 library).

5) Select the ‘X’ and go to the events tab. Add an “On click” + “Data master action” event, and select the ‘Delete’ button under the Data Master.

6) Create the expression filling the required parameter in with a data source. Notice that the first and only parameter of the expression refers to the record or records collection you want to delete. In this case, you will drag the row of the Data List to the expression (it’s easier to drag it from the outline view. Be careful to drag the row that holds the data, not the header one). Click OK twice.


That’s all. You can now simulate and enjoy!

Next tutorial > Change the color of a clicked Data List row