Repeater Cell Interactions

newbie-question

#1

Hi, I’m enjoying the learning curve I am on in terms of getting familiar with Axure and every day is a learning day so they say.

The current stumbling block i have is around the repeater interactions. I am trying to understand how i can change the background and text colour of table cells based on the value of the data in a cell.

For example if the value in the particular cell is greater than 30 then change the cells background colour to blue and the font colour to white or if the cell value = 18 then set the background colour to green and the font colour to white etc etc

I have created a really simple repeater table and added interaction cases on Item Loaded but cannot work out how to add actions that will change the styling of the cells based on the Case criteria.

Here is the simple repeater Color_Column.rp (53.3 KB)

Any help would be appreciated.

Regards

Alan


#2

If you only had a couple colors, you could set the shape’s “selected” or “error” states to whatever styling you want based on conditions. If you’re going to have more than that, I’d do the following:

  • create a dynamic panel with states for each background color you want
  • put that panel behind your rectangle with the score text, and make the front rectangle transparent
  • in your conditional logic, set the state of the dynamic panel to the appropriate color

If you need to change the text color, e.g., from black to white, you can still use the rectangle’s “selected” state, or use the “set text” action and use rich text to style (instead of simply linking the score widget to the dataset).

Color_Column.rp (63.7 KB)


#3

This is great and I really appreciate your time and effort to help me resolve my issue.
I have had a play around with your example and this has helped me understand how to use states to be able to change the background colour of the cells in the column.

Am I able to set the font colour of the text in the cells if needed, i.e. if I use a dark colour I will need to use a light font colour so the values can be seen by the user.
You have done this for the red cell, making the font white but i cant work out how you have done that and how i can replicate this to other cells if needed.

Regards

Alan


#4

Hey Alan,

The part where I’m setting the text color is in this case:

image

If you click into the “set text” action, you’ll see this—note that, under “SET TO”, I’ve selected “rich text”.:

If you click “edit text”, you’ll see this:

…which seems confusing, because there doesn’t appear to be anything in the text box. But that’s because I’ve colored it white. If you select everything inside the text box, you’ll see:

You can change the color to whatever you want. Does that make sense?