Conditional Formatting in Container

App Building
1

I want to color the different text input fields in a container that are being populated from a JSON with a Query depending on a respective value within that JSON (the confidence level of the extracted values).

I tried including it in the Query with JavaScript functions which apparently is not supported or at least did not work for me.

The JSON has the following format:

> {
>         "type": "City",
>         "mention_text": "Berlin",
>         "confidence": 0.5,
>         "properties": []
>       },

Now I want to say if confidence == 1.0, the field for "City" should be darkgreen, between 0.75 and 1.0 darkgreen, etc.

Does anyone have an idea how to tackle this?

Thanks in advance

2

Hi @lennardriede,

Welcome to Retool!

There are a couple ways of doing this, at it's most basic, you make the background colour of a textInput dynamic by using the style section of the component and putting in code like this (simplified)

image
Select that, and customize it to

{{ textInput1.value > .5 ? 'darkgreen' : 'lightgreen' }}

If you need it to be more dynamic, based on the value in a JSON object, you could create a function that accepts a parameter for city, and structure it like this:

if(!type) return null //or 'white' or whatever you want

// Extract the confidence
const { confidence } = queryData.data.find( o => o.type === "City")
// Return colours as needed
if(confidence < .5) return 'mintgreen'
if(confidence < 1) return 'lightgreen'
if(confidence === 1) return 'darkgreen'

So the function would look like this once set up:

image
image695×379 14.8 KB

If you called this bgColour, you could change the function for the background to {{ bgColour({type: 'City'}) }} which would return 'lightgreen' in this case.