Prototyping Forms, Data Lists and Data Grids

With Justinmind, you can create interactive prototypes with data simulation. Configure dynamic data lists and data grids, replicate data conditions and reproduce forms that will behave like the final design.

What is a Data Master?

A Data Master is a set of records that defines a prototype’s object and allows you to build data-driven prototypes.

With Data Masters you can prototype and simulate:

Forms – you can create forms by drag and drop Text and Input Text Field widgets to the canvas. However, Data Masters allow you to create and simulate data-driven registration forms.

create a form data masters

Data Lists enable you to visualize a Data Master data in list form, one data record per line.

create a data list

Data Grids display chunks of Data Master data inside a grid/table, one data record per cell.

create a data grid

Creating a Data Master

To create a Data Master in Justinmind, follow these steps:

  1. Go to the Data Master palette and click the ‘+’ icon.
    • creating a data master
  2. The following dialog will appear:
    •  data master dialog
      1. Give your Data Master a name
      2. Your Data Master must contain at least one Data Master Field (fields categorize each data record, just like the first row of a Microsoft Excel sheet). Create fields by clicking the ‘+’ icon on the right. Each field you create will be listed here
      3. Click “OK” to return to the canvas to return to the canvas
  3. Back in the Data Masters palette, double click on your newly created Data Master.
    • Select the View and edit records tab at the top of the dialog that appears. Here, you can view, add and edit your Data Master Records in the Records table.
  4. You can create a new Record in two ways:
    • Click the ‘+’ icon on the right.
    • new data master record
    • Or, import your own data from a .csv file. Learn more here

Types of Fields

You can categorize your Data Master Records by changing your Data Master Fields “Types” (e.g. Text, Date, True/False etc.).

To define the Type of a Data Master Field, go to the Data Masters palette. Double click on your Data Master and stay in the Data Master properties tab when the dialog appears.

data master field types

Choose from the following Types:

  • Text– this is the default Type for Data Master Fields. Use it to display a text string or text area (multi-line), password, number, email or URL.
    • Select it from the Type drop-down.
    • To specify which Text Type to assign the Field, click on the radio button on the left of the Field.
    • data master field text
    • Then, click on the gear icon on the right. A second dialog will appear.
    • Choose an option from the radio button list on the left (and preview the selection on the right) and then click “OK” to return to the dialog containing all Data Master Fields.
    • data master field text values
  • Date– this Type defines a Data Master Field that displays a date (in mm-dd-yyyy format), a date and time (in mm-dd-yyyy HH:MM format), or a time (in HH:MM format). Other date and time formats will not be accepted.
    • Select it from the Type drop-down. Remember, to specify which Date Type to assign the Field, click on the radio button on the left of the Field, then the gear icon on the right and choose an option from the dialog that appears.
    • data master field date
  • Category– this Type defines a Data Master Field that displays a value from a range of predefined values. It is commonly used with a single selection elements and Data Master Records in this field can be represented as a Radio Button List, a List Box, a Custom Drop-Down List or a Drop-down List. 
    • Select it from the Type drop-down. Remember, to specify which Category Type to assign the Field, click on the radio button on the left of the Field, then the gear icon on the right and choose an option from the dialog that appears.
    • For this Type, you need to create values inside the second dialog, by clicking on the ‘+’ icon.
    • data master field category
    • Note: anything other than the exact values will be rejected when you simulate this Data Master.
  • True/False– this Type defines a Data Master Field that can only display Boolean true or false statements. It is represented as a Check Box.
    • Select it from the Type drop-down. To edit a Data Master Record in a True/False Field, go to the View and edit records tab of the same dialog. Select either “True” or “False” for each Record in the Field.
    • data master field true false
  • File Upload– this Type defines a Data Master Field that displays an image file, selected from your folders.
    • Select it from the Type drop-down. To add an image file to a Data Master Record in a File Upload Field, go to the View and edit records tab of the same dialog. Click the “…” icon on the right-hand side of each Record, select a file from your folders and click “Open” (or double click on the file) to select it.
    • data master field file upload
  • Multi-category– this defines a Data Master Field that displays a set of values from a range of predefined values and the user can select multiple values at once. This field can be represented as a Check Box List or a List Box.
    • Select it from the Type drop-down. To specify which Multi-category Type to assign the Field, click on the radio button on the left of the Field, then the gear icon on the right and choose an option from the dialog that appears.
    • For this Type, you need to create values inside the second dialog, by clicking on the ‘+’ icon.
    • data master field multi-category
Note: if you change a Data Master Field Type after having created Records for that Field, the Records will be restored to their defaults to match the Field’s new format.

Creating a form with a Data Master

To create a form using all Fields from within a Data Master, simply drag the Data Master from the Data Master’s palette and drop it onto the canvas.

data master form

Your Data Master Fields will serve as the form’s labels, displayed as Text elements. An Input Text Field will appear on the right-hand side of each Field.

data master form labels

If you want to create a form that contains manually-selected Data Master Fields, click on the ‘>’ icon of your Data Master in the Data Master palette. A drop-down selection of your Data Master Fields will appear. Drag the Fields you want to include in your form to the canvas, one by one.

drag data master fields

Associating input form fields with Data Master Fields

Apart from creating forms with Data Masters, you can also associate form elements to a Data Master Field.

For instance, say you’ve created a simple form without using a Data Master but want to perform advanced operations, such as adding and removing input fields upon user interaction. You can associate your form to a Data Master and perform these advanced operations. 

Note: not all UI elements can be associated with a Data Master Field.

These are the UI elements that can be associated with a Data Master Field:

  • Input UI elements – select the element and drag & drop the data master field over the element.
  • Selection UI elements – select the element and click the “Edit values” button in the Properties palette.
  • Images

associate element data master

Form Field validation

Click here to learn how to prototype field validation in a form. 

The basics of Data Lists and Grids

What is a Data List?

The Data List widget displays Data Master Records in list form.

Note: a Data List can only display data from one Data Master.

To use it, select it in the Dynamic Content Widget Library and customize it in the dialog that appears.

In Justinmind’s editor, the Data List displays:

data list explained

  1. A header row, containing the Data Master Field names
  2. A sample row with a preview of the structure of the row’s cells
  3. Additional rows that are empty until you simulate your prototype

The complete set of Data Master Records will only be displayed in the cells during simulation, like so:

data master records simulation

Learn more about using Data Lists here.

What is a Data Grid?

The Data Grid widget displays Data Master Records within a grid or table cells.

Note: just like the Data List, the Data Grid can only display data from one Data Master.

To use it, select it in the Dynamic Content Widget Library and customize it in the dialog that appears.

In Justinmind’s editor, the Data Grid displays:

data grid explained

  1. A sample cell with a preview of your Data Master’s Records
  2. Additional cells that are empty until you simulate your prototype

The complete set of Data Master Records will only be displayed in the cells during simulation, like so:

data master records simulation grid

Learn more about using Data Grids here 

Data Master operations

Once you’ve created your Data Master, it’s time to start using it in your prototype.

When you interact with a Data Master, you are essentially adding, modifying or deleting sets of data. To simulate operations such as these, you’ll need to add interactions to UI elements that will trigger the operations.

When you add events to UI elements, you can perform the following operations in relation to your Data Masters:

  • New- adds a Record to your Data Master
  • Modify- edits a Record of your Data Master
  • Delete- deletes a Record of your data master

New operation: how to add records through a form

Add new records to your Data Master to create input forms, databases and contact lists.

adding records form

To create a new Data Master Record in a Contact list, follow these steps:

  1. You’ll need a prototype with an input form that allows the user to add contacts to a contact list. Create a Data Master and delete the Records from the View and edit records tab.
  2. From the Data Masters palette, drag the Data Master to the canvas to create a contact form. This is where users can enter the details of their contacts.
    • Drag a Button to the canvas and name it “Add contact”. This will allow the user to add a new contact.
  3. Customize the contact form as preferred from the Properties palette.
    • customize contact form
  4. Select the Button and click “Add Event” in the Properties palette to create a new event.
    • Create an “On Click” + “Data Master Action” event.
    • Select the Data Master you want to add Records to from the Events dialog and click the “New” button. The Expression Builder will appear.
  5. Create the following expression in the Conditional expression:
    • Drag the Input Text Field that refers to the first Data Master Field to the first term in the Conditional expression.
    • Drag the Input Text field that refers to the second Data Master Field to the next term. Click “OK” twice.
  6. Back in the canvas, go to the Dynamic Content section of the Basic Widget library. Click on the Data List widget. Give it a name, select your Data Master from the Data Masters drop-down, and select all of your Data Master Fields. Click “OK” and position it on the canvas, below your contact form.
  7. Customize your Data List as preferred.
    • customize data list
  8. Select the Button and go back to the Events palette. Click on the gear icon on the right of the word “Do” and select the option “Add action after selected”.
    • Select “Set Value” from the actions drop-down and then your Data List from the Outline palette.
    • Below, select “Calculated” and then click on the “Add Expression” link. 
    • In the Expression builder that appears, drag your Data Master from the Data Masters tab to the term in the Conditional expression. Click “OK” twice.

Click “Simulate” to interact with your contact form. Enter a name and email address into the contact form. They will appear in your Data List.

You can find a more detailed tutorial on how to create new Data Master Records here.

Modify operation: How to edit Data Master records

Adjust the data in your Data Master quickly and easily. 

edit data master records

To modify Data Master Records, follow these steps:

  1. In the same prototype, create a “Modify” Button next to the “Add contact” Button. This will allow the user to modify a contact.
    • modify data master records
  2. Select this Button on the canvas and go to the Events palette.
    • Add a new event (click the “Add Event” button). Create an “On Click” + “Data Master Action” event. Click the “Modify” button. The Expression Builder will appear.
  3. Create the following expression in the Conditional expression:
    • Drag your Data Master to the first term in the Conditional expression.
    • Drag the Input Text Field that refers to the first Data Master Field to the next term (from the Screens tab).
    • Drag the Input Text field that refers to the second Data Master Field to the next. And then click “OK” twice.
    • Click “Simulate” to modify a contact.
    • You can find a more detailed tutorial on how to edit Data Master Records here.

Delete operation: How to delete a Data Master record

You can also delete a Data Master record.

delete data master records

To delete Data Master Records, follow these steps:

  1. In the same prototype, create a “Delete” Button next to the “Modify” Button. This will allow the user to delete a contact.
    • delete button
  2. Select this Button on the canvas and go to the Events palette.
    • Add a new event (click the “Add Event” button). Create an “On Click” + “Data Master Action” event. Click the “Delete” button. The Expression Builder will appear.
    • Drag your Data Master to the term in the Conditional expression.
Note: this event will allow you to delete your entire contact list. To learn how to delete just one contact, click here.

Import real data sets from .csv files

Justinmind allows you to import real data into your interactive prototypes by populating Data Masters with data from .csv files. 

To include real data in your Data Master, follow these steps:

  1. Double click on your Data Master in the Data Master palette and select the View and edit records tab. Click the “Import” button and a dialog will appear.
    • Choose your .csv file from your folders. Select which character in your .csv file will separate values (i.e. the field delimiter). To have each individual .csv value appear as a new Data Master Record, choose the “CSV using;” option.
    • Finally, choose whether to replace the current Data Master Records with the .csv file records, or combine them. Click “OK”.
  2. You will now be able to see your .csv values within your Data Master.
    • csv values

Create a Data Master from a .CSV file

You can also create a new Data Master directly from a .csv file. To do so:

  1. Go to the “File” option in the main menu and click “Import”.
    • Choose the “Data Master from CSV” option from the contextual menu.
    • import data master
  2. The following dialog box will appear:
    • import data master csv
      1. Fill in the name of the Data Master
      2. Locate the .csv file
      3. Choose a field delimiter. Choose “CSV using ;” to have each record displayed in a separate cell

Click “OK to import your.csv file.

Note: the first row of the .csv file must contain categories that match the names of the Data Master Fields (the column order doesn’t matter).The remaining rows will be used to fill the new Data Master Records.

Using Data Masters to build conditions and set values

You can visualize and interpret different parts of a Data Master (e.g. one Record or a selection of Records) from your Data Masters, Data Lists and Data Grids when creating expressions to build conditions and set values.

To leverage a specific Data Master Record(s), drag one of the following data sources to the expression:

  • Data Master- represents all records in a Data Master.
    • data master expression builder
  • Data Master Fields- represents all records in a Data Master Field.
    • data master fields expression builder
  • Data List- represents all Data Master Records displayed in the Data List.
    • data list expression builder
  • Data List’s row- represents the record displayed in the current row.
    • data list row expression builder
  • Data Grid- represents all Data Master Records displayed in the Data Grid.
    • data grid expression builder
  • Data Grid’s cell- represents the record displayed in the current cell.
    • data grid cell expression builder