Displaying status icons in a Data List

With Justinmind, you can display user status icons in a Data List populated with values from a Data Master.

change-status-icons-in-data-list

To display status icons in a Data List, follow these steps:

  1. In a web prototype, go to the Data Masters palette and create a new Data Master. Name it “user icon” and create two fields: user name and status. Then click “OK”.
  2. Double-click on the Data Master you’ve just created and select the “View and edit records” tab.
  3. Write some example data there. Then click “OK”.
  4. Now drag a Data List widget to the screen. Name it “samples”, select the Data Master and all its fields.
    • change-status-icons-in-data-list-data-master
  5. Select the value in the “Status” column and delete it. Select that empty cell, go to the Properties palette and choose “horizontal layout”.
  6. Insert two images in that cell (one for the check icon and one with the ‘delete’ icon). Select both and mark them as hidden in the Properties palette.
    • change-status-icons-in-data-list-data-list
  7. Select the row or the value in the first column and go to the Events palette. Add an “On Page Load” + “Show” event.
    • change-status-icons-in-data-list-data-list-show
  8. Select the image with the “check” icon and click “OK”. Then click the “Add a condition” button. Now create this condition:
    • change-status-icons-in-data-list-data-condition
    • Click “OK” twice.
  9. Back in the Events palette, click on the “else” link next to the event you’ve just created. 
    • Add another “On Page Load” + “Show” event, this time selecting the other icon (the “delete” one).

And that’s it! Click “Simulate” to interact with your prototype.

You can download an example here.