Prototyping Data

Imagine you’re creating a prototype for an application to manage clients in your company. Since your company has many clients, you’ll need some way to display them in bulk, possibly in the form of cards or tables. You’ll also need a way to edit or delete individual clients from the list and have those changes maintained across different screens in your prototype. While a regular text table might work, it’s not very dynamic, and it’s hard to maintain if your data changes over time. How should we prototype this?

In Justinmind, Data Masters are what you’re looking for.

A Data Master is a list of information, similar to a database or spreadsheet. The data can be text or images, and consist of fields (column titles) and records (rows).

Let’s learn how to build our client information prototype:

Creating a Data Master

We’ll use a Data Master to store our client information. Here’s how to create one:

  1. Look to the Data Masters palette in Justinmind. If you don’t see it, go to the View menu, look to Palettes, and check Data Masters to be shown.creating a data master
  2. Click the ‘+’ icon to create a new Data Master. Here’s what to do next: Creating a new data master
    1. Add a name for your Data Master. We’ll call ours ‘Clients’.
    2. Click the ‘+’ icon to add a field. A field is the name of a column of data. We’ve created four fields – Name, Income, Contact, and Managed by.
    3. Select the type of data you’re adding. Since we’re only adding text, we’ll leave the type as ‘text’. Click “OK” to save your Data Master.
  3. Look again to the Data Masters palette and double click on the Data Master you just created. You’ll see a new tab: View and Edit records.

    Click to the View and Edit records tab and you’ll see ‘sample text’ written in each record. Click on a record to edit it. We’ve renamed each record with a company name, the income, the company contact, and who the account is managed by.

    Click the ‘+’ icon to add more records. To delete a record, select it by clicking on the circle next to it, and then click the ‘X’ icon.

Importing Data

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 will appear:import data master csv
    1. Fill in the name of the Data Master
    2. Select the .csv file.
    3. Choose a field delimiter.

    Click “OK to import your .csv file.

    Note: the first row in your .csv file will be used as the field names

Displaying Data

Now that we’ve entered in all of our client information into a Data Master, it’s time to display our data on the Canvas. We want to display our information in two ways: in card form with more detail, and in a compact list with less detail.

Data in Cards

Let’s start by creating our card display:

  1. Look to the Widgets palette and find the Dynamic content section. There, select the Data Grid widget. You’ll then see a dialog pop up. Here’s what to do next:Creating a data grid
    1. Name your Data Grid. We’ve named ours ‘ClientCard’.
    2. Select the ‘Clients’ Data Master we created earlier to populate the Data Grid.
    3. Since we want this card display to have more detail, we will include all fields in the Data Grid. Click the ‘>>’ icon to move all fields into the Data Grid.
  2. Click “OK” and place the Data Grid on the Canvas. Let’s take a closer look at our Data Grid. You’ll see:Data grid structure defined
    1. The fields we named earlier. They are regular text elements.
    2. The records of the Data Master. They will appear in brackets and will show data during simulation.

    Expand the Data Grid contents in the Outline palette, and you’ll see something called Grid_Cell_1. Grid_Cell_1 serves as the preview of how all cells in the Data Grid will look, and any changes or alterations you make to this cell will also appear in all other cells.Data grid defined

  3. Click “Simulate” and see how your Data Grid displays all data you entered in the Data Master.Simulating the data grid
  4. Now that we know how our Data Grid is structured, let’s customize its appearance:

    1. Double click into Grid_Cell_1, select the ‘Name’, ‘Income’, and ‘Contact’ text elements, and delete them.
    2. Now with more space in the cell, move the remaining Text elements and Data Records around in the cell as you’d like.
    3. With Grid_Cell_1 still selected, use the indicators to resize the cell so it’s wider and longer.
    4. Drag two Button widgets into Grid_Cell_1, naming them ‘Edit’ and ‘Delete’. We’ll use these later to modify and delete clients from our Data Master.
    5. Lastly, select the entire Data Grid and look to the Properties palette. There, change the number of columns to 3. Additionally, increase the vertical and horizontal spacing between cells.

You can further customize the Data Grid as you’d like. We’ve also changed the font family, size, and color, and edited the styles of the Buttons.

Here’s how our Client Card dashboard looks when we simulate:
Customized data grid
See more information on customizing a Data Grid here.

Data in a List

Now let’s create our compact list of client information:

  1. Look to the Screens palette and click the ‘+’ icon to add a new screen. Name it ‘List Dashboard’.Create a new screen
  2. Look to the Widgets palette and find the Dynamic content section. There, select the Data List widget. You’ll then see a dialog pop up. Here’s what to do next:Creating a data list
    1. Name your Data List. We’ve named ours ‘ClientList’.
    2. Select the ‘Clients’ Data Master we created earlier to populate the Data List.
    3. Since we want this card display to have less detail, we will only include some of the fields in the Data List. Click on individual fields and click the ‘>’ icon to move them to the Data List. We’re leaving out the ‘income’ field from our Data List this time.
  3. Click “OK” and place the Data List on the Canvas. Let’s take a closer look at our Data List. You’ll see:Data list defined
    1. The fields we named earlier.
    2. The records of the Data Master. They will appear in brackets and will show data during simulation.

    Expand the Data List contents in the Outline palette, and you’ll see something called Current_Row_1. Like Grid_Cell_1 in the Data Grid, Current_Row_1 serves as the preview of how all cells in the Data List will look, and any changes or alterations you make to this cell will also appear in all other cells.Data list structure

  4. Click “Simulate” and see how your Data List displays.Simulating the data list
  5. Now that we know how our Data List is structured, let’s customize its appearance:

    1. Select Header_1 (the Data List header) and look to the Properties palette. There, change the Layout to horizontal with centered alignment.
    2. Select Current_Row_1 and use the indicators that appear to drag down, which will increase the size of the rows in the Data List. Change the Layout to horizontal with centered alignment.
    3. Select the entire Data List and look to the Properties palette. Change the colors of the Odd/Even rows to transparent.
    4. Right-click on the Data List and select ‘New column’.
    5. Double-click on the new Row_Cell we just added, and drag two text elements inside, naming one ‘Edit’, and the other ‘Delete’. We’ll use these later to modify and delete clients from our Data Master.

You can further customize the Data List as you’d like. We’ve also changed the font family, size, and color of the text, and removed some of the borders.

Here’s how our Client List dashboard looks when we simulate:
Data list customized
See more information on customizing a Data List here.

Modifying Data

So far, we’ve created and customized the appearance of our client information in several ways. Now let’s learn how to add, edit, and delete records from our lists.

We’ll first need to create two new screens: an ‘Edit Client’ screen where we’ll edit a selected client’s information, and a ‘New Client’ screen where we’ll be able to add a new client to our list.

On the ‘Edit Client’ screen, drag four Input Text Fields to the Canvas. We’re using Input Text Fields from the Web Wireframing widget library, but any Input Text Field will work here. Then, add a button below the form and rename it ‘Modify’. Add another button next to it, naming it ‘Cancel’. Customize the appearance of the form as you’d like.
Add input text field
Do the same thing on the ‘New Client’ screen, just changing the button’s value to ‘New’.New client button

Add new client records

Let’s learn how to add new clients to our list.

  1. Navigate to the Card (Data Grid) Dashboard screen and drag a Button widget onto the Canvas, renaming it ‘New’.Add button to navigate to new client screen
  2. With that Button selected, create an “On Click” + “Link To” event, linking to the ‘New Client’ screen we created earlier.
  3. On the ‘New Client’ screen, select the ‘New’ button. Create an “On Click” + “Data Master Action” event. Select the ‘New’ radio button. You’ll see the Calculated Expression builder appear.
  4. Here’s the structure of the “Data Master Action – New” builder:Data master action - new, structure
    1. Each ‘Field’ we have in our Data Master
    2. The values that will be added to our Data Master, and will be displayed in our Card and List displays of data.
  5. Drag each corresponding Input Text Field to the open spaces in the expression and click ‘OK’.Data Master action - new, event
  6. With the ‘New’ button still selected, create an “On Click” + “Link to” event, selecting the ‘Previous screen’ radio button.
  7. Select the ‘Cancel’ button and create an “On Click” + “Link to” event, selecting the ‘Previous screen’ radio button.
  8. Navigate to the List (Data List) dashboard and drag a Button widget to the Canvas, renaming it ‘New’. Create an “On Click” + “Link To” event for this button, linking to the ‘New Client’ screen.

Now each of our Dashboards will be able to link to where we can add new data. Click “Simulate” and click the ‘New’ button, which will link you to the ‘New Client’ screen. Enter some information in the form and click ‘New’. You’ll see our new client information added to our Card.

Modify client records

To edit our client records, we’ll need some way to select a specific row to modify. We’ll use the special functionality in Current_Row_1 (in Data Lists) and Grid_Cell_1 (in Data Grids) to select a row – they are able to detect the row you interact with during simulation.

After selecting a row, we need to store that row’s information somewhere so we can place it into an Input Text Field to edit it. In this example, we will use a Variable, which can store whole rows of client information at a time.

Now that we know this, we can learn how to modify our client information:

  1. Create a variable named ‘SelectedRow’ with a blank default value.Add variable
  2. Navigate to the Card Dashboard screen and select the ‘Edit’ button we placed into Grid_Cell_1 earlier.
  3. With the ‘Edit’ button selected, create an “On Click” + “Set Value” event, selecting the SelectedRow variable as the target of the action. For the value, click ‘Calculated’ and the ‘Add expression’ text. You’ll see the Calculated Expression builder appear.Set value to the variable
  4. In the builder, drag Grid_Cell_1 to the open space in the expression. It might be easier to select and drag it from the builder outline rather than the builder canvas.Give variable grid_cell_1 value
    We’ve now transferred the value of the card we clicked on to the variable.
  5. Look back to the Events palette to see the event you just created. Add an “On Click” + “Link To” event for the ‘Edit’ button, linking to the ‘Edit Client’ screen.
  6. Go to the ‘Edit Client’ screen. Select the base screen (represented by a monitor icon in the Outline palette). Create an “On Page Load” + “Set Value” event, selecting the ‘Name’ Input Text Field as the target of the action. For the value, click ‘Calculated’, and then ‘Add expression’. You’ll see the Calculated Expression builder appear.Give input text fields the variable value
  7. In the builder, follow these steps to create the expression:

    1. Drag the ‘Select’ function to the open space in the expression
    2. Drag the SelectedRow variable to the first space that appears.
    3. Click to the Data Masters tab in the builder and expand the Data Master so you can see the attributes (the Data Master fields). Then, drag the ‘Name’ attribute to the second space in the expression.

    Repeat steps 6 and 7 for the other Input Text Fields, making sure to change the target of the action, and the attribute in the Data Master Action expression each time.

  8. Now we’ll create the events to change our client information.

  9. Select the ‘Modify’ button at the bottom of the form and create an “On Click” + “Data Master Action – Modify” event. This will open the Calculated Expression builder.

    Here’s the structure of the “Data Master Action – Modify” builder:Data master action - modify, structure

    1. The open space where we’ll specify the row that will be modified.
    2. The updated information that will be changed in the Data Master.
  10. Drag the SelectedRow variable to the first open space on the left. Then, drag the corresponding Input Text Fields to the open spaces in the expression and click OK.Modify Data Master
  11. Back on the Canvas, and with the ‘Modify’ button still selected, create an “On Click” + “Link to” event, selecting the ‘Previous screen’ radio button.
  12. Select the ‘Cancel’ button and create an “On Click” + “Link to” event, selecting the ‘Previous screen’ radio button.
  13. Repeat steps 2 – 5 on the List Dashboard screen, dragging Current_Row_1 into the open space in the expression when you’re setting the value to the SelectedRow variable.

Click ‘Simulate’ click the ‘Edit’ button for a record, which will link you to the ‘Edit Client’ screen. Enter some information in the form and click ‘Modify’. You’ll see the edited client information in the Card.

Delete client records

Next, let’s learn how to remove client records.

  1. Go to the Card Dashboard screen. Select the ‘Delete’ text that we added into Grid_Cell_1 earlier. Create an “On Click + “Data Master Action” event. Select the ‘Delete’ radio button. You’ll see the Calculated Expression builder appear.

    Here’s the structure of the “Data Master Action – Delete” event:Data maser action - delete, structure

    1. The open space where we’ll specify the row that will be deleted from our Data Master.
  2. Drag Grid_Cell_1 into the open space in the expression. It might be easier to select it from the dialog outline. Because of the special functionality of Grid_Cell_1 (and Current_Row_1) and Data Master Action will only delete the row where you click the ‘Delete’ text.Delete data master action
  3. Repeat steps 1 and 2 on the List Dashboard screen, dragging Current_Row_1 of the Data List into the open space in the expression this time.Data master action - delete, current row

Last steps

We’re almost done! We just need some way to switch between the Card and List Dashboards so we can see how our changes are maintained across screens.

  1. On the Card Dashboard screen, drag two icons, one representing the Card Dashboard, and the other the List Dashboard, next to the ‘New’ button. We’ve used icons from the Font Awesome widget library.Switch to dashboard icons
  2. Create an “On Click” + “Link To” event for each icon, linking to each Dashboard.
  3. Repeat these steps on the List Dashboard screen.Link to dashboard events

That’s it! Simulate your prototype and see how you can edit, add, and delete client records from your Dashboards.

You can download our example here.