Is it possible color a label by value

Is it possible to somehow color something you show on screen by its value? For example:

If a number is above zero then it is colored green and if below zero then it is red.

Yes, it’s possible.
But depending on what the “something” is, you may need to use some CSS.

Just to clarify what I mean - I mean it depends which component you are using to display the numbers.
If you are using a single rich text component, for example, then it’s quite straight forward.
But if you had a whole series of numbers that you want to present as an inline list, then it gets a little more complicated.


Do you have a visual presentation of how you want it to be displayed?

1 Like

This is what I want to achieve.

I would like a single value to be green if the value is greater than 0 and read if it is lower than 0. I do not need the table or displaying multiple values in a row/table

So just a single value, that would be displayed in a rich text component?

If so, you could do something like this:

  • Create an if-then-else column, that references the number column
    – If Number is less than 0, then red
    – If Number is greater than 0, then green
    – Else black
  • Now create a template column, using the following: <span style="color: {colour};">{number}
    – Replace {colour} with the if-then-else column
    – Replace {number} with the original Number column
  • Then display the template column in a rich text component.

Great trick. Thanks for replying and sharing!

One last question. Would it be possible to achieve the layout like on the screenshot somehow without the colors with this technique? Like adding divs or other HTML tags?

Yes, it’s possible. And it’s really just an extension of what I have already shown you.

It’s just a matter of defining the table structure within the template, and then using replacements to insert the appropriate values.

This tutorial that I created a while back walks through the process of creating a HTML/CSS table.


This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.