Learn how to prototype web and mobile apps

How to edit rows using check boxes in your web prototypes

In this tutorial, you will learn how to select multiple rows in a Data List and perform an operation. In this example, you will be able to change the status to active/inactive when the check box is selected next to a data field.

Download an example here.

1) Go to the Data Masters tab and create a new Data Master.

2) Name it ‘batch users’ and create three fields: first name, last name and status. Then 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. Then click OK.

4) Now drag a Data List widget to the screen. Name it ‘batch users’ and select the Data Master. Then select all the fields. 

5) 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 check box inside the new column. 

6) Drag two Buttons like the ones in the example. Select the ‘de-activate selected’ button, go to the ‘events’ tab and add an ‘On click’ + ‘Data Master action’. Select the ‘Modify’ button under the ‘batch users’ Data Master and build the expression displayed in the image below, by dragging – in this order – the data function FILTER, the whole Data List and the Check box (it’s easier to drag it from the outline.  Remember to select “is checked” in the drop-down menu that will appear below it in the expression builder). Finally, write “inactive” in the Status value:


This expression will change the status to ‘inactive’ to all the users in the Data List that have the check box checked.

7) Click OK twice. Now select the ‘Activate selected’ button, and follow the same steps as in the other button but this time write ‘active’ in the status value in the expression builder.

In addition you can add a Check box to the header of the first column to add a “Select all” option. You will only have to select the Check box in the first row, go to the events tab and add an ‘On click’ + “Set value” event. In the events dialog, select the check box in the cell as the component that will display the value, and click the ‘Calculate’ button to open the expression builder. In the expression, just drag the Check box that you’ve added in the header and click OK twice. Remember that it’s much simpler and quicker to select the check boxes from the outline when in the events dialog.

That’s all! You can click on ‘Simulate’ and enjoy!

Next tutorial > Edit rows using input forms