Learn how to prototype web and mobile apps

Data simulation in interactive prototypes

With Justinmind it’s possible to create interactive prototypes with data simulation. You can import real data, configure dynamic data lists and data grids, introduce variables, replicate data conditions and reproduce forms that will behave like the real thing.

You can interact with your data during simulation, passing it between different screens and using it to control event execution.

This can be done with the Data Grid and Data List widgets, which source data from Data Masters, populated manually or imported from a data base.

Data driven prototyping: data masters

Data Grids

This widget displays the records of a Data Master as a grid. The data source is always a single Data Master that can be selected when the grid is created.

Data Grids are displayed as cells that contain all the data of a Data Master row.

Using the Properties panel, the orientation can be set to horizontal or vertical. The first cell will be displayed with the field names and the other cells will be displayed just as a grey cell in the editor. When simulating, cells will be filled with the Data Master’s record instances.

Tip: Use the DataGrid layout for visual information or to show a particular link or relationship between elements. Information in a DataGrid is processed similarly to an image and it reveals information about the data.

Data driven prototyping: data grids

Data Lists

This widget displays the records of a Data Master as a list. The data source is always a single Data Master selected when the list is created.

This widget is displayed as a header row with the Data Master field names, a sample row with the content structure of the row’s cells, and the other rows as grey rows. When simulating, rows will be filled with the the Data Master’s record instances.

Data driven prototyping: data lists

Tip: When it comes to dealing with lots of information, a good rule of thumb is to use the default Data List layout. The information in a Data List is meant to be read and should make it easy to find specific information.

Adding content to your Data List / Data Grid

Data Lists and Data Grids have a default structure that displays as many columns as the fields indicated when creating the Data Master. However, they can be customized, to include more information or by rearranging the default information provided.

Different widgets can be added into a Data List’s cell. However, notice that some widgets may have behave differently inside a Data List’s cell depending on their properties:

  • Associated with a Data Field: If the widget is associated with a field that belongs to the Data Master that is associated with the Data List, then it will display different values depending on the row it is displayed in, showing the different Data Master’s records for this field.
  • Not associated with 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 List.

Hence, you can fully customize your Data Master’s graphical representation.

Associate widgets to a Data Master’s field

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

  • Input widgets
  • Selection widgets
  • Image widget

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

Many specific functions and actions can be applied to Data Lists, like filters. You can read more about some special Data functions here.

Next tutorial > Manually create and populate a Data Master in your interactive prototypes