Conditional background color on component

Queries and Resources
1

Hi,

On a form component table, I can change the background color of a cell based on it’s value, which is great. For example, to set the color, use {{ self > 10 ? 'green' : 'red' }} .

In a standard component (text / text input etc) I can’t. Is there some way around it to apply conditional formatting there?

Thanks
Michel

3 Likes
2

Hey there @mm79! We don’t support custom styling for every component. You can apply custom CSS, but that’s not going to be able to be conditional. What’s your use case / what are you trying to accomplish here?

For text components, you can choose the text color - in the input for the hex color, you can actually write Javascript for conditional coloring (even though the editor doesn’t look like it lets you do that).

3

Hello Justin,

I just wanted to create some extra focus on certain field/values, for instance values below 0 in red. For instance in a dashboard or settings page.

For text components, you can choose the text color - in the input for the hex color, you can actually write Javascript for conditional coloring (even though the editor doesn’t look like it lets you do that).

Oh this is great, good to know. Thanks!

1 Like
4

+1 to this request. Would love to be able to highlight abnormal values in tables.

3 Likes
5

Edit: Looks like mm79 gave a sufficient answer above; here is a more detailed example:

It's a bit old, but I just solved it:

Create a javascript query where the results are the colors you want, then input that query execution in the field for color.

For instance, I created a query (X) that does the following:

{{

(A.query == 'Pass')

  • (B.query == 'Pass')
  • (C.query == 'Pass')
  • (D.query == 'Pass')

? 'Pass' : 'Fail'
}}

Then I create a new query (X_Format):

{{

X.query == 'Fail' ?
'#FF0000' : '#00FF00'

}}

And I place the following code into the color selection:

{{ X_Format.query }}

The result is that if the original query is 'Pass', this changes the color box to green; for 'Fail' it makes it red!

1 Like