Change the color of a clicked Data List row in your web prototypes
In this tutorial, you will learn how to change the color of a clicked Data List row. In the example, every time a row is clicked, a selection feedback is displayed.
You can download the below example here.
1) In a new web prototype, go to the Data Masters tab 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 tab ‘View and edit records’. 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.
6) Go to the ‘events’ tab 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.
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.
That’s all! You can now click on ‘Simulate’ and enjoy!