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.
To display status icons in a Data List, follow these steps:
- 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.
- Double-click on the Data Master you’ve just created, select the “View and edit records” tab, and write some example data.
- Now drag a Data List widget to the Canvas. Name it “samples”, and select the Data Master you just created and all its fields to populate the Data List.
- Select the value in the “Status” column and delete it. Select that empty cell, go to the Properties palette and choose “horizontal layout”.
- 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.
- Select Current_Row_1 (the first row in the Data List) and go to the Events palette. Add an “On Page Load” + “Show” event, selecting the “check” icon image as the target to be shown.
- Look back to the Events palette and click the “Add a condition” text next to the event you just created. You’ll see the Conditional Expression builder appear. Follow these steps to create the condition:
1. Drag the ‘Select’ condition to the open space in the expression.
2. Drag Current_Row_1 into the first open space that appears.
3. Click to the ‘Data Masters’ tab in the builder and drag the ‘Status’ attribute to the second open space in the expression.
4. Drag the ‘=’ comparator to the right of the ‘Status’ attribute in the expression.
5. Type in ‘active’ in the open space that appears.
- Back in the Events palette, click on the “else” text, which will show the Events dialog. Create another “On Page Load” + “Show” event, this time selecting the other icon (“delete”) as the target to be shown. There’s no need to create a condition for this event.
And that’s it! Click “Simulate” to interact with your prototype.
You can download an example here.