Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create and populate a Data Master in your interactive prototypes


This tutorial will show you how to manually create and populate a Data Master in your interactive prototypes.

As mentioned in the previous tutorial, all data simulation in your interactive prototypes is sourced from a Data Master. This means that if you try to add a Data List or a Data Grid on the canvas, you’ll get a dialog pop up warning you that there are no Data Masters created, and that you need at least one to be able to use these widgets. In this case, to create a new Data Master, click YES in the pop up. You can either manually create a Data Master directly in the Justinmind editor, or you can import it from a .csv file.

To manually create a Data Master in the Justinmind editor, go to the Data Master tab and click on the green ‘+’ icon.

Data-driven prototyping: create a data master

A dialog will pop up prompting you to fill in the Data Master details. You must add a name and at least one Data Master field to create a Data Master, which will then be listed in the Data Master tab.

To add a field, click on the green ‘+’ icon on the right-hand side and select the field type (see below).

Data-driven prototyping: data types in data masters

Once you’ve done with creating your Data Master fields, click OK to go back to the canvas. In order to view and edit the records for each field, you need to double click on the Data Master from the tab.

Data-driven prototyping: data masters

The Data Master dialog pop-up will open again, but you will see a new tab, “View and edit records”, from where you can view, add or edit the Data Master records. You can add them manually by clicking on the green ‘+’ icon on the right side, or import them from a .csv file.

Data-driven prototyping: view and edit records of a data master

Field Types

Every Data Master can have a set of fields of a specific type. The fields will correspond, for instance, to the columns of a table. The type of each field can be defined and changed through the Data Master edit dialog, in the “Type” drop-down menu that you’ll find next to each field you add.

Note: changing the type of a Data Master’s field will make all the widgets in the prototype associated with it change in accordance with the new type. Additionally, the records for this field will be restored to their defaults to match the new format.

The Data Master fields’ types available are:

  • Text (default type)
    The text type defines a field that displays a plain text. This type can have six different graphical representations: text, text area (multi-line), password, number, email and URL. It can be edited by selecting the field (with the check button on its left-hand side) and clicking on the gear button on the right-hand side. A new dialog will appear to let you select the correct style. To edit a Text record just click on the corresponding cell in the ‘Records Table’ and type any text you want as a value.
  • Date
    The date type defines a field that displays a date using the format MM/DD/YYYY, a date and time using the format MM/DD/YYYY HH:mm or a time using the format HH:mm. This field type can have three different graphical representations: date; date and time; time. It can be edited by selecting the field, clicking on the gear button on the right-hand side, and typing in a date in the format MM/DD/YYYY, MM/DD/YYYY HH:mm, or HH:mm depending on the style you chose. Other formats of text will not be accepted for this field type.

Data-driven prototyping: date field in data masters

  • Category
    The category type defines a field that displays a value from a range of predefined values. This field type is commonly used with a single selection widget that can have three different graphical representations: (custom) drop-down list; radio button list; list box. It can be edited by selecting the field, clicking on the gear button on the right-hand side, and typing in the values you want for that field. Once you’ll have to add the actual records for each field, other text not matching any category’s value will not be accepted. E.g. You can type ‘Red’ if you defined the values ‘Red’,’Green’,’Blue’ for the category field. Have a look at the tutorials on how to simulate complex searches and how to filter data list columns to better understand the functioning of this field type.
  • True/False
    The true/false type defines a field that can only display true or false. It is always represented as a check box widget as it is the only boolean widget. To edit a Boolean record, click on the corresponding cell in the ‘Records Table’ and type ‘true’ or ‘false’.

data-driven-prototyping-create-data-master-true-false-fields

  • File upload
    The file upload type defines a field that can display a file path or an image file if the widget used to represent it is an Image widget. To edit a File record, click on the corresponding cell in the ‘Records Table’. Browse and delete buttons will appear. Click on the browse button and select a file (select an image file if you want the file to be displayed).
  • Multi-category
    The multi-category type defines a field that displays a set of values from a range of predefined values. This attribute is commonly used by a multi-selection widget that can have two different graphical representations. To select the correct representation and the desired range of values, select the attribute field on the ‘Data Master Fields’ table and click on the “gear” button. To edit a Multi-category record, click on the corresponding cell in the ‘Records Table’ and type any text matching some of the values in the values’ range defined. You can type more than one value in the range using commas to separate them. E.g.: You can type ‘USB,Firewire’ if you defined the values ‘USB’,’Bluetooh’,’Firewire’ for the multi-category field.

Next tutorial > Learn how to populate data masters with real data in your interactive prototypes