Learn how to prototype web and mobile apps

Displaying a star rating system in an interactive prototype

In this tutorial, we will learn how to display a star rating system in your interactive prototype, where user ratings are displayed as stars.

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_ratings’ and create two fields: item and rating. Then click OK.

2) Double-click on the Data Master you’ve just created and select the ‘View and edit records’ tab. Write some example data there, i.e. item 1, 1 star; item 2, 2 stars, etc. Then click OK.

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

4) Select the value in the column ‘rating’ (not its header) and remove it. Insert in its place as many rating images as the number of users (in this example you can see 5). Important: place each image on top of the previous, so that they are all placed in the first row below the header. Select each image and mark it as hidden from the Properties tab.

5) Now select the entire first row of the Data List and go to the events tab. Add an ‘On page load’ + ‘Show’ event, selecting the first rating image as the component that we want to show.

6) Click OK and go back to the events tab. Click the ‘add condition’ button next to the event you’ve just created, and build this expression:


7) Click OK twice. Now click on the ‘else’ link on the right-hand side of the event you’ve just created, add another ‘On page load’ + ‘Show’ event, this time selecting the second rating image as the component we want to show. Define the same condition as before, but compare it with the ‘2 star’ value. Do the same with all the rating images.

That’s it! You can now simulate and enjoy!

Next tutorial > Display user status icons