Data Lists

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

data master records data list

Displaying Data Master Records in a Data List

Learn how to display Data Master Records in list form with Data List in your interactive prototypes.

To do so:

  1. In a new web prototype, create a new Data Master, by clicking the ‘+’ icon in the Data Masters palette. In the dialog that appears, give your Data Master a name. To match our example, name it “Product”.
    • data master product
  2. Add Fields to your Data Master by clicking the ‘+’ icon on the right-hand side. To match our example, create the following Fields: ID, Name, Description, and Image.
    • data master fields product
  3. Change the type of the Image Field to “File Upload” and click “OK”.
    • type field file upload
  4. Next, click on the Data List widget in the Dynamic Content section of the Basic Widget library.
    • In the dialog that appears, give your Data List a name (“ID_Data_List” to match our example).
    • Select your Data Master from the “Data Masters” drop-down.
    • We want to include all Data Master Fields in the Data List. To move them all into the selection box, click the right double line arrow icon.
    • Then, click “OK” and position your Data List in the center of the canvas.
    • Note that you can view your Data List by clicking “Simulate” in the top right-hand corner of the canvas. You should be able to see a table with sample data.
  5. To replace the sample data with real data, go back to the Data Masters palette.
    • Double click on your Data Master and select the View and Edit records tab in the dialog that appears.
    • Create data Records, giving each an ID, name, description and uploading an image. Click “OK”.

 Remember, you can also import real data from a database or Microsoft Excel

Click “Simulate” again to simulate your Data List with the real data in place.

data list simulate

Adding Records to a Data List

By making your prototype interactive, you can perform certain operations with your Data List, such as adding additional Records to it. To do so, you’ll need to create a “Data Master Action” event.

data master action

Follow the steps below to learn how to do so in a contact list:

  1. Create a Data Master in a new web prototype.
    • Name it “Contact list” and create two Fields: First Name and Last Name.
    • Click “OK”.
    • data master contact list
  2. Back in the Data Masters palette, double click on your Data Master and select the View and edit records tab.
    • Create three Records, giving each a first and last name. Click “OK”.
    • data master records contact list
  3. Next, click on the Data List widget in the Dynamic Content section of the Basic Widget library.
    • In the dialog that appears, give your Data List a name (“Names_Data_List” to match our example), and move both Data Master Fields from the left to the right (by clicking the right double line arrow icon).
    • Click “OK” and position your Data List in the center of the canvas.
  4. Drag two Text widgets and two Input Text Fields to the canvas and create an input form to match our example. Rename the Text elements “First Name” and “Last Name”.
    • text widgets names
    • Alternatively, you can drag the Data Master to the screen to create a form.
  5. Next, drag a Button next to your input form. Rename it “Create new”.
    • create new button
  6. Select the Button and go to the Events palette.
    • Add an “On Click” + “Data Master Action” event and below, select “New” below. The Expression builder will appear.
  1. Drag the “First name” Input Text Field to the first term in the Conditional expression and the “Last name” Input Text Field to the second. Click “OK” twice.
  2. Make sure your newly created event is selected. Back in the Events palette, add another action (click on the gear action by the word “Do” and select the option “Add action after selected”).
    • Create an “On click” + “Set value” event, selecting the entire Data List from the Outline palette.
    • Below, click the “Calculate” radio button and then click the “Add Expression” link. The Expression Builder will appear.
  3. Drag your Data Master from the Data Masters tab to the term in the Conditional expression and click “OK” twice.

Click “Simulate” to simulate your prototype and add more rows to your list.

You can download our example here.

Data List properties

From the Properties palette, you can modify the following for your Data List:

  • Number of rows per page
  • The size of each cell

Customizing a Data List

With Justinmind, you can customize the appearance of your Data Lists.

Follow the steps below to learn how to resize the cells, change the color of rows, change their text style and decoration, reorder the columns, and change the layout of a Data List.
Customized data list

  1. Start by creating a new Data Master by clicking the ‘+’ icon in the Data Masters palette. Add fields and records to your Data Master. Once finished, click on the Data List widget from the Widgets palette, and select the Data Master you just created to be used for the Data List’s contents.
    Data list widget
  2. Look to the Outline palette and click the ‘arrow’ icon next to the Data List’s name. This will expand the Data List’s contents, allowing you to edit the properties of each section individually. Expanded data list
  3. In the expanded Data List in the Outline palette, click on “Header_1”. Indicators to change the Header’s width and height will appear. Select one of the indicators on the right and drag to widen the Data List. Then, select one of the bottom indicators and drag down to lengthen the Data List.
    Resize data list
  4. Click on an individual “Row_cell” and use the indicators to resize the row’s column. Columns will all have the same height, but can have different widths.Resize a cell
    Note: you can also use the Properties palette to input column and cell height or width.
  5. Now we’ll change the colors of the Data List in various ways. First, we’ll change the Even/Odd colors by looking to the Properties palette. Under the Tooltip section, you’ll see an option to change the colors for alternating rows in the Data List.
    Odd and even colors
  6. You can also select “Header_1” and change its color to change the color of all cells in the header.
    Change header color
  7. Next, we’ll change the style of text in the Data List. To change the style of text in a header, expand a “Row_cell”, select the “Text” element, and use the Properties palette to change the text’s style. You will need to change each “Text” in each “Row_cell” of the header individually.Header font
  8. To change the text style in individual columns, expand “Current_row_1”, select an “Input” and change its text style using the Properties palette. This will apply to all cells in a column. You will need to change the “Input” of each column individually.Column font
  9. We’ll now change the column order in the Data List. Select the Data List in the Outline palette and hover over it on the Canvas. An ‘arrow’ indicator will appear. Drag and move a column to a different position in the Data List.Move a column
  10. Lastly, we’ll change the layout of a column of the Data List. Select a “Row_cell” of “Current_row_1” and change its layout to change the layout of all rows in one column.Change layout

Click “Simulate” to see your customized Data List.

Creating a search filter in a Data List

You can prototype a searchable list using a Data List.

searchable list

Follow the steps below to learn how to do so:

  1. In a new web prototype, drag an Input Text Field and a Button to the canvas.
    • Rename the button “Search”.
    • search input text field
  2. Create and populate a Data Master with one “Name” Field and add ten Records, to match our example.
    • add records name field
  3. Then, create a Data List that contains all of your Data Master Fields. Name it “Name_Search_Data_List”.
    • Click “OK” and place it on the canvas below the Input Text Field and Button.
    • create data list search
  4. Select the Button and go to the Events palette.
    • Add an “On Click” + “Set Value” event, selecting the entire Data List from the Outline palette.
    • Below, click “Calculated” and then the “Add Expression” link. The Expression Builder will appear.
  5. Build the following expression:
    • Drag the “Filter” function to the term in the Conditional expression.
    • Drag your Data Master (from the Data Masters tab) to the next term.
    • Drag the Input Text Field to the final term and click “OK” twice.

Click “Simulate” and try searching for a Data Master Record in your Data List.

You can download our example here.

Deleting rows from a Data List

You can easily delete a row from a Data List using the “Delete” Data Master action.

delete rows data list

Follow the steps below to learn how to do so:

  1. Create a Data Master in a new web prototype.
    • Name it “Contact List” and create two Fields: First name and Last name.
    • Click “OK”.
    • Back in the Data Masters palette, double click on your Data Master and select the View and edit records tab. Create six Records, giving each a first and last name. Click “OK”.
    • new data master contact list
  2. Next, click on the Data List widget in the Dynamic Content section of the Basic Widget library.
    • In the dialog that appears, give your Data List a name (“Names_Data_List” to match our example), and move both Data Master Fields from the left to the right. Click “OK” and position your Data List in the center of the canvas.
    • names data list
  3. Right click on your Data List in the Outline palette and select the “New Column” option.
    • Select the second cell of your new column (from the canvas or the Outline palette), drag a Text widget into it and write “Delete” in it.
  4. With the Text element selected, go to the Events palette.
    • Add an “On Click” + “Data Master Action” event, selecting “Delete” below. The Expression builder will appear.
  5. Drag the first row (“Current_row_1”) of the Data List to the term in the Conditional expression from the Outline palette.
    • Click “OK” twice.

Click “Simulate”. When you click the “Delete” button, the first row of data will be deleted.

You can download our example here.

Sortable columns in a Data List

You can sort each of the columns in your Data List in ascending or descending order. You might use this feature when interpreting a list of ages or dates. 

sort data list columns

Follow the next steps to learn how to do so:

  1. Create a Data Master in a new web prototype.
    • Name it “Sortable_data” and create three Fields: First Name, Last Name and Date of Birth.
    • Change the “Date of Birth” Field Type to “Date”.
    • data master sortable data
  2. Back in the Data Masters palette, double click on your Data Master and select the View and edit records tab. Create five Records, giving each a first name, last name and date of birth. Make sure you enter the date in the correct format (mm/dd/yyyy).
    • Click “OK”.
    • create five data master records
  3. Next, click on the Data List widget in the Dynamic Content section of the Basic Widget library.
    • In the dialog that appears, give your Data List a name (“Sortable_Data_List” to match our example), and move all Data Master Fields from the left to the right. Click “OK” and position your Data List in the center of the canvas.
    • data list sortable data
  4. From the Outline palette, select the cell in the Data List that contains the “First Name” Text element.
    • Go to the Properties palette and make sure that the layout is set to “Free Layout”.
    • data list free layout
  5. Next, drag two Triangle widgets to the right-hand side of the “First Name” cell on the canvas. Rotate one of them 180 degrees so that they appear to be ascending and descending sorting arrows. The user will use them to sort the Data List’s values.
    • rotate triangle element
  6. Select the ascending Triangle and go to the Events palette.
    • Add an “On Click” + “Set Value” event, selecting your Data List from the Outline palette.
    • Click the “Calculate” radio button below and then click the “Add Expression” link. The Expression builder will appear.
  7. Build the following expression:
    • Drag the “SORT” function to the term in the Conditional expression (make sure you don’t mix it up with the Number function “SQRT”).
    • Drag your Data List from the Outline palette to the second term.
    • Drag the “Name” Field from the Data Master in the Data Masters tab to the third term. Do not write “Name” in the term manually. Click “OK”.
  8. Back in the canvas, select the descending Triangle and go to the Events palette.
    • Add an “On Click” + “Set Value” event, selecting your Data List from the Outline palette.
    • Click the “Calculate” radio button below and then click the “Add Expression” link. The Expression builder will appear.
  9. Build the following expression:
    • Drag the “SORT” function to the term in the Conditional expression (make sure you don’t mix it up with the Number function “SQRT”). Change the value in the drop-down below to “descendant”.
    • Drag the first row of the Data List from the Outline palette to the second term.
    • Drag the “Name” Field from the Data Master in the Data Masters tab to the third term. Do not write “Name” in the term manually. Click “OK”.
  10. Repeat steps five to nine for the remaining Fields (Last name and Date of Birth).
    • In the Expression builder, you’ll need to change the “SORT” function’s value to “descendant” for each event created for the descending Triangle, as well as the relevant Data Master Field in each event.

Click “Simulate” to view your prototype and filter your list.

You can download our example here

Paginating a Data List

With Justinmind, you can paginate your Data List. You might want to do this when if you have lots of data Records. 

paginate data list

Follow the next steps to learn how to paginate your Data List:

  1. In a new web prototype, create a new Data Master, by clicking the ‘+’ icon in the Data Masters palette.
    • In the dialog that appears, give your Data Master a name. To match our example, name it “Product”.
    • create product data master
  2. Add Fields to your Data Master by clicking the ‘+’ icon on the right-hand side. To match our example, create the following Fields: ID, Name, Description, and Image.
    • add fields to data master
  3. Change the type of the Image Field to “File Upload” and click “OK”.
    • change field type file upload
  4. To replace the sample data with real data, double click on your Data Master in the Data Masters tab and select the View and Edit records tab in the dialog that appears.
    • Create data Records, giving each an ID, name, description and uploading an image. Click “OK”.
  5. Next, click on the Data List widget in the Dynamic Content section of the Basic Widget library.
    • In the dialog that appears, give your Data List a name (“ID_Data_List” to match our example).
    • Select your Data Master from the “Data Masters” drop-down.
    • We want to include all Data Master Fields in the Data List. To move them all into the selection box, click the right double line arrow icon.
    • Then, click “OK” and position your Data List in the center of the canvas.
  6. Customize your Data List in the Properties palette as preferred.
    • customize data list properties
  7. Next, select your Data List in the Outline palette and go to the Properties palette.
    • In the Rows per Page section of General properties, set the number of rows to three. This means that only three Records will be listed per page in your Data List.
    • change rows per page
  8. To allow the user to navigate to different pages within your Data List, drag four Button widgets to the canvas and label them “Next”, “Previous”, “First” and “Last”. Position them on the canvas to match our example.
    • four buttons
  9. Select the Button named “Next” and go to the Events palette.
    • Add an ‘”On Click” + “Paginate Data Grid” event, selecting the Data List from the Outline palette.
    • Below, select the “Next page” action from the drop-down list, and click “OK”.
  10. Repeat step nine for the remaining Buttons, updating the action each time.
  11. If you want to display the number of listed pages based on the number of rows per page established, drag an Index widget from the Dynamic content section of the Basic Widget library to the canvas.
    • index widget
  12. Link the Index element to your Data List by choosing the “ID” Data List from the Data Grid drop-down in the Properties palette.
    • data grid drop down
Note: you can also use the Summary widget to displays the number of results available in all listed pages and what values are being displayed at any given time. It is configured just like the Index widget.

Click “Simulate” and click between pages in your Data List. The Data List’s values should change each time you click “Next”.

You can download our example here

Executing actions when a Data List has been modified

The event trigger “On Data Change” allows you to execute actions when:

  • A new Record is added to a Data List
  • An existing Record is modified
  • A Record is deleted from the Data List

Follow the steps below to create a form with a list of names and status (active or offline). The list will be sortable both by name and status.

data list of names

  1. Create a Data Master in a new web prototype.
    • Name it “Users” and create two Fields: “Name” and “Status”. Click “OK”. Change the “Status” Field Type to “Category”.
    • Change the category values to “Active” and “Offline”.
    • file type category
  2. Back in the Data Masters palette, double click on your Data Master and select the View and edit records tab. Create six Records for the “Name” Field. Randomly select “Active” or “Offline” categories in each of the corresponding Records for the “Status” Field. Click “OK”.
    • create six records
  3. Next, click on the Data List widget in the Dynamic Content section of the Basic Widget library. In the dialog that appears, give your Data List a name (“Users_Data_List” to match our example), and move both Data Master Fields from the left to the right. Click “OK” and position your Data List in the center of the canvas.
    • users data list
  4. Drag a Dynamic Panel inside the first cell of the “Name” Field (“Current_row_1”) and resize to 30 x 30 pixels and place it on the left, inside the cell.
    • add dynamic panel
  5. Add a second panel to the Dynamic Panel (click the ‘+’ icon).
    • add second panel
  6. Add icons, which represent the “Active” and “Offline” statuses, within the Dynamic Panel – one per panel.
    • You could use icons from one of our Widget Libraries. To match our example, download and install the Font Awesome Widget library. Learn more about installing additional widget libraries here.
    • active offline status
  7. Select the Active icon from Panel 1 from within the Dynamic Panel and go to the Events palette.
    • Add an “On Click” + “Data Master Action” event, selecting “Modify” below. The Expression builder will appear
  8. Build the following expression:
    • Drag the “Current_row_1” row to the first term in the Conditional expression.
    • Leave the “Name” term empty.
    • Write “Offline” in the “Status” term.
  9. Now do the same with the Offline icon. Select it from Panel 2 from within the Dynamic Panel and go to the Events palette.
    • Add an “On Click” + “Data Master Action” event, selecting “Modify”.
    • When the Expression builder appears, build the same expression, this time writing “Active” in the “Status” term. Click “OK” twice.
  10. Follow these steps to make the row appear white when the user’s status is active and gray when offline:
    • Back in the canvas, select the “Current_row_1” row of your Data List in the Outline palette.
    • Add an “On Data Change” + “Change Style” event, select the “Current_row_1” row of your Data List.
    • Below, tick the Background option and choose the color white. Click “OK”.
  11. Back in the Events palette, click on the “add condition” link on the left of your action.
    • When the Condition builder appears, drag the Status input field “Category_1” input from within “Row_cell_4” in the Outline palette to the term in the Conditional expression.
    • Drag the “Equals” function to the second term. Write “Active” in the third term and click “OK”.
  12. Create another action (click the gear next to “Do” and choose the option “Add action after selected”).
    • Make it an “On Data Change” + “Set Active Panel” event, selecting Panel 1 of the Dynamic Panel. Click “OK”.
  13. Back in the Events palette, click on the “Else” link on the right of the action you’ve just created.
    • Add another “On Data Change” + “Change Style” event, selecting the “Current_row_1” row of your Data List.
    • Below, tick the Background option and choose the color gray. Click “OK”.
  14. Now create another action (click the gear next to “Do” and choose the option “Add action after selected”).
    • Make it an “On Data Change” + “Set Active Panel” event, selecting Panel 2 of the Dynamic Panel. Click “OK”.

Click “Simulate” to interact with your form and sort users by name or status. The active users’ rows should appear with a white background and offline users with a gray background.

You can download our example here.