Change the background color of a Big Number based on the content of the Big Number

[MattLB]

SSIA

If the B# is ‘good’ I would like the background to be green, if ‘bad’ then red.

Good/bad/okay are all computed in Glide and different for each value so colors are assigned on the fly.

Not sure if that can be done in CSS.

TIA

Matt

[Mazen]

I think this is exactly what you’re looking for.

How to Color Rows in a Table Collection

There are multiple ways to color rows inside a Table Collection. To indicate row status (e.g., High, Medium, Low), you can use one of three approaches: Button column (aria-label) — reads the button’s aria-label to determine row color. Image fragment in the src — adds a fragment to the image URL (e.g., #High). Boolean column — uses a true/false value to control row color. Part 1 — Color Rows via Button Column This method reads the button’s aria-label and styles the entire <tr> accor…

[MattLB]

Thanks for looking into this. Unfortunately this isn’t a table collection; it is a Big Number component. I am trying to find a way to dynamically change the color based on the data displayed within the Big Number (red/yellow/green) for a dashboard.

I see how static CSS can be applied but not dynamic color information.

Regards,

Matt

[Himaladin]

The Big Number component doesn’t have attributes that support dynamic styling.
You’ll need to use a workaround or create your own HTML that mimics the component (which can take quite some time).

It would help if you explain your design first, so the appropriate workaround can be suggested.