Learn how to prototype web and mobile apps

How to display Data Master records in a Data Grid in your web prototypes

Data Grids are a way to display the records of a Data Master in a grid layout. This grid’s data source is always a single Data Master which is selected when the grid is created. A Data Grid displays only one header and one row when editing it in the user interface but it is expanded when simulated, replicating its rows and displaying a different row for each Data Master’s record instance.

Adding content to your Data Grid

Data Grids have a default structure which displays as many columns as the fields you indicated when creating the Data Master. However, Grids can be customized by adding more information or rearranging the default information provided.

New widgets can be added into a Data Grid’s cell. However, be aware that some widgets can have a different behavior inside a Data Grid’s cell depending on their properties:

  • Associated to a Data Field: If the widget is associated with a field which belongs to the Grid’s Data Master, then the widget will display different values depending on in which it is displayed.

Display data master records in data grid in web prototypes - Table

  • Not associated to a Data Field: If the widget is not associated with any field, then it will display the same value for each row of the Data Grid. Hence, you can fully customize your Data Master’s graphical representation:

Display data master records in data grid in web prototypes - Table

Associate widgets with a Data Master field

Not every widget can be associated with a Data Master field. Only the following can:

  • Input widgets
  • Selection widgets
  • Image widget

In order to associate a widget to a Data Master field, first select the widget on the screen and then select the desired Data Master field from the ‘Data Field’ drop-down you will find in the Properties panel. The drop-down will show all the available fields which the selected widget can be associated with.

This tutorial explains how to display Data Master records using the Data Grid widget.

Data grid table in web prototypes

You can download an example here.

  1. Create a new web prototype, go to the Data Masters tab and create a new Data Master.
  2. Name it ‘Products’ and create three fields: name, photo and price.
  3. Change the ‘photo’ field type to ‘file upload’ and click OK.
  4. Double-click on the Data Master you’ve just created and select the ‘View and edit records’ tab.
  5. Write some sample data there and add some sample images, then click OK.
  6. Now drag a Data Grid widget to the screen. Name it ‘Products_grid’ and select the Data Master ‘Products’. Then select all the fields and click OK. 
  7. Now, on the canvas, the upper-left grid cell will be displayed with the sample field names and titles. The position of each field can be modified by dragging and dropping the element into the desired position and any field can be deleted just by clicking on it and pressing the ‘delete’ key.


The grid’s properties tab also allows to modify the spacing between cells, using the ‘spacing’ field.


In order to customize the grid layout, the orientation can be set to ‘Horizontal’ or ‘Vertical’ and the amount of columns or rows can be defined too. Also, you can set the amount of items you want displayed in each page using the ‘Items per Page’ field located in the Properties tab.


Note: If the amount of Data Master’s instances is higher than the items per page, the Pagination actions will need to be used in order to see all the elements (see the ‘Paginating Data Lists’ tutorial).



To see the items displayed as a grid, click on ‘Simulate’!

Next tutorial > How to display Data Master records in a selection widget