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.
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.
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.
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.
You can customize the Data Lists in many ways, for instance formatting it as a Data Grid.