Learn how to prototype web and mobile apps

How to display user status icons in a Data List in your web prototypes

In this tutorial, we will look at how to display user status icons in a Data List populated with values from a Data Master.

You can download an example here.


1) In a web prototype, go to the Data Masters tab and create a new Data Master. Name it ‘user icon’ and create two fields: user name and status. Then click OK.

2) Double-click on the Data Master you’ve just created and select the ‘View and edit records’ tab.

3) Write some example data there. Then click OK. Now drag a Data List widget to the screen. Name it ‘samples’ and select the Data Master and all its fields.


4) Select the value in the ‘Status’ column (not its header) and delete it. Select that empty cell, go to the Properties tab and choose ‘horizontal layout’.

5) Insert two images in that cell (one for the check icon and one with the ‘delete’ icon). Select both and mark them as hidden in the Properties tab.


6) Select the row or the value in the first column and go to the events tab. Add an ‘On page load’ + ‘Show’ event.


7) Select the image with the ‘check’ icon and click OK. Then click the ‘Add a condition’ button. Now create this condition:


8) Click OK twice. In the ‘events’ tab click on the ‘else’ link next to the event you’ve just created. Add another ‘On page load’ + ‘Show’ event, this time selecting the other icon (the ‘delete’ one).
And that’s all! You can click on ‘Simulate’ and enjoy!

Next tutorial > Design a shopping cart process in your web wireframe