Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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

In this tutorial, you’ll learn how to display the records of a Data Master in a Data List in your interactive prototypes.

1) Create a new web prototype in the Justinmind editor, and create a new Data Master, by clicking on the “+” button in the Data Master tab at the bottom left of the screen, next to the Outline tab. In the dialog box that pops up, name the Data Master; for example: “Product”.

2) Click on the “+” button (below the Name input field on the right-hand side), add all the required fields and the corresponding field types on the right-hand side of the table. For this example, create these fields: ID code, name, description, and photo.

Data-driven prototyping: edit table records

3) In the row you titled “Photo”, select “File upload” in the field types drop-down menu.

4) Click OK. The new Data Master is now available in the Data Masters tab.

5) Drag the Data List widget onto the canvas. In the dialog that shows up, write an ID, select the Data Master you’ve just created in “Data Masters”, and specify which fields you will use as columns. In this example, use the Data Master “Product” with all the fields you’ve created, therefore move all fields from the left Data Master field box to the right box using the double right arrow. Click OK.

data-driven-prototyping-drag-table-data-list

6) The space to be occupied by the table is now displayed. By clicking anywhere on the canvas, a Data List with a empty row is drawn.

7) Click the Simulate button to verify the results. The table should show sample rows.

Let’s replace these sample rows with others that contain representative data.

8) Double click the Data Master “Product” and click on the “View and Edit records” tab in the Data Master dialog pop-up. A table appears in which each column corresponds to a Data Master record or row. Here you can define the test data that will be displayed in all the Data Lists associated with this Data Master.

Data-driven prototyping: edit table records

 

9) Enter some product names and attach some images in the “Photo” field. Click OK.

10) Remember you can also import real data from a data base or MS Excel

11) Click on ‘Simulate’ and see how the data you added appears, along with the photos.

Data-driven prototyping: table data list

You can customize the Data Lists in many ways, for instance formatting it as a Data Grid.

Next tutorial > Paginating data lists

6 Comments

  1. haige

    May 26, 2015 at 5:32 am

    Cool and very advanced

  2. Sahar Waqar

    June 4, 2015 at 7:37 am

    Can we use Join to combine to different Data Masters and populate the result in single Data List ?

    It is written here
    “Data Grids are a way to display the records of a Data Master as a list. This list’s data source is always a single Data Master which is selected when the list is created.”

    Reference: https://www.justinmind.com/help/html/data_simulation_data_grids.html

    • Lidia Rodriguez

      July 3, 2015 at 10:36 am

      Hi, the data source is actually a single Data Master, you could, with events, add the fields of another one to the data master using the Data Master action ‘add’.

      • Sahar Waqar

        July 3, 2015 at 10:42 am

        It means no functionality has been implemented yet in Justinmind for JOINS.

        I’ll handle it with the approach you mentioned.

        Thanks.

  3. Kevin

    July 31, 2015 at 4:22 pm

    I’ve created 2 input text boxes and a button. I think I’ve setup everything to insert the values of the input boxes into the data list… but when I enter data (via simulate), the list doesn’t refresh / show the input. Thoughts?

    • Danielle Schneider

      August 1, 2015 at 12:39 am

      Hi Kevin,

      Make sure you have an event that refreshes the data list after you do the data master action.