Highlighting the selected row of a Data List

With Justinmind, you can change the color of a clicked Data List row. In our example, every time a row is clicked, a selection feedback is displayed.

Change the color of a clicked Data List row in your web prototypes

To highlight the selected row in Data List, follow these steps:

  1. In a new web prototype, go to the Data Masters palette and create a new data master.
  2. Name it “test” and create three fields: a, b and c. Then click “OK”.
  3. Double-click on the Data Master you’ve just created and select the “View and edit records” tab.
    • Write some example data there and click “OK”.
  4. Now drag a Data List widget to the screen.
    • Name it “tests” and select the Data Master.
    • Then select all the fields.
  5. Place the mouse cursor at the left of the row until it turns into an arrow pointing to the right, then click.
    • That way you’ve selected the entire row.
    • change-the-color-of-a-clicked-data-list-row-in-your-web-prototypes-select-row
  6. Go to the Events palette and add an “On Click” + “Change Style” event.
    • In the Events dialog, select the entire Data List and then select “background”, leaving the colors as they are.
    • Click “OK”.
    • change-the-color-of-a-clicked-data-list-row-in-your-web-prototypes-event
  7. Now click on the arrow icon next to the word “do” and select “add action”.
    • Add another “Change Style” event, this time selecting the blue color for the background of that row.
    • Click “OK”.
    • change-the-color-of-a-clicked-data-list-row-in-your-web-prototypes-event-2

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

You can download our example here.