Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to display expressions in Data Lists


In this tutorial, you will learn how to perform and display collections functions in a Data List. In the example we will reproduce, we will see a list of users and their age. Below, two text will automatically display the total number of users and their average age. 

You can see an example below.

perform and display collections functions in a Data List

1) In a web prototype, go to the Data Master tab and create a new Data Master. Name it ‘users’ and create three fields: first name, last name and age. Click OK.

2) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Write some example users there and click OK.

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

4) Drag four Text box widgets to the canvas to match the example above. They will display the total number of users and their average age.

5) Select the Text box that will hold the number of users, go to the Events tab, and add an ‘On page load’ + ‘Set value’ event. In the events dialog, select the same text box, click on ‘Calculate’ and build the expression displayed below, by dragging the DATA COUNT data function and the Data Master to the expression builder:

expr_collections_dataCount

6) Click OK twice and select the Text that will hold the average age of the users. Go to the events tab and add another ‘On page load’ + ‘Set value’ event. In the events dialog, select the same text box, click on ‘Calculate’ and build the expression below, by dragging the DATA AVG data function, the Data Master and the ‘age’ field to the expression builder:
expr_collections_dataAvg

And that’s it! You can now click ‘Simulate’ and enjoy!

Next tutorial > Log in using a Data Master