Learn how to prototype web and mobile apps

How to customize Data Lists in your web prototypes

In this tutorial, you will learn how to display Data Master records in a Data List without the standard layout.

You can see an example below and download it here.

Customiza data-lists format in your interactive prototypes


1) In a new web prototype, go to the Data Masters tab and create a new Data Master.

2) Name it “Users” and create four fields: photo, name, text and time.

3) Change the type of the ‘photo’ field to ‘file upload’. Then click OK.

Data master in interactive prototypes

4) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Add some example data there and add some example images. Then click OK.

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

data-master-data list

6) Select the cell in the first column. Go to the properties panel and look for the property ‘layout’. Set ‘free layout’ as the new layout property. Now resize the cell until all the content you want to place (we will place all the information in just one cell) fits there.

Data list free layout in interactive prototypes

7) Move the texts and image widgets from the other cells to the first one. Remove the rest of the columns and leave just the first one.

8) Arrange all the content inside that cell until it matches the example.

And that’s it! You can now click on “Simulate” and enjoy!

Next tutorial > Display Data Master records in a Data Grid