Is it possible color a label by value

Ask for Help
1

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.

2

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.

2 Likes
3

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

1 Like
4

This is what I want to achieve.

Screenshot 2022-01-31 at 11.22.30
Screenshot 2022-01-31 at 11.22.301170Ă—327 59.4 KB

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

5

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.
7 Likes
6

Great trick. Thanks for replying and sharing!

7

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?

8

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.

2 Likes
9

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