Javascript colour change

App Building
1

Hey team,
This might be a super simple thing but I can't seem to get around it.
I have a form where I want the background colour of a label to change based on the input value of a rating box. I've got it triggering the script on change of the input field (via a javascript query). It looks like the query is running based on the debug window but none of the expected results are happening. This is my code:

var l = likelihood.value;
var c = consequence.value;
var ca = consequenceAfter.value;
var la = likelihoodAfter.value;

if(la == 5 || la == 5){
  riskLevel.style.background = "red";
  riskLevel.setValue("High");
}

Basically if consequenceAfter or likelihoodAfter is set to a 5 I want it to change the background colour of a label to red and change the value text to "High".

What am I missing? Also back when I used to do normal development stuff (it's been a few years so I'm rusty) I always used to use alert("test") in places to see if it got that far and to troubleshoot... but it doesn't look like alerts are working? Is that a thing in retool? Maybe I should get it to send a message to the dev console instead.

2

Sorry that should be
"if(la == 5 || ca == 5){"

Maybe I pre-emptively posted here. I've got the value change but can't get the background colour change. I've tried backgroundColor but also that doesn't come up as one of the options in the context dropdown thing but that's what I'd probably normally do with javascript. Hence why I changed it to background here... But that doesn't work either.

3

Hi @dhtbrowne

Thanks for reaching out! You can't do a typical JS alert() since the JS runs in a sandbox, but you can use console.log() or create notification event handlers:


For the query, the line riskLevel.style.background = "red"; will not work in Retool.

You can workaround this by making the background a dynamic value.

Here's an example:

First, create a temporary state variable that will define the label's background color:

Create a js query that will update the temporary state value as needed:

1 Like
4

Sorry I never replied, but thanks heaps that's great!