Change cell background/text color based on cell value

Ask the community
,
1

I have a simple collection and want to change the value of a cell based on its value:

  • yes: text white, cell green

  • no, text white, cell red

  • maybe: text black, cell white
    Can someone point me to the relevant docs or show me how? Thanks!

Dave

2

Hi Dave

I just thought of this, I was looking for this too. In fact I nearly had it as well without my knowing. You can achieve this with the following code.

const tmpValue = $w("#text1").text;
if (tmpValue === "Yes") {
	$w("#text1").html = "<span style='color: #ff6347'>" + tmpValue + "</span>";
}

Watch out, you need to readd the font size and family too. All things you can do can be found here

3

@Edgar - many thanks and happy 2018! I appreciate your help on this.

Would I insert the relevant code in the onReady() section?

And as this is in a cell in a table, how do I get to the cell in the table?

Thanks!

4

Off course, Happy 2018 with happy coding!.

What I do when it’s related to a collection (so dataset) is in the onReady I add a function for when the dataset is ready too.

$w.onReady(function () {
    $w("#name").onReady(function () {
        // do stuff 
    });    
});

But I don’t know exactly what you set up. You may need to play with the location. It is somewhere in onReady though.

5

Hi I have the same issue. Can you please help? I have a box in a repeater. I want it to change color according to a text value in the DB.

1258×549 33.8 KB

6

Using $w references the element on all items on the page. You need to use item:

$w.onReady(function () {
  $w("#repeater1").onItemReady( ($item, itemData, index) => {
    $item("#text24").text = '$' + (parseInt(itemData.vaccinesRequested) * 35).toLocaleString('en')
 
 if (itemData.status == 'Confirmed') {
        $item('#box2').style.backgroundColor = "#8EE6A6";
    } else {
        $item('#box2').style.backgroundColor = "#E89999"
    }
  } );
});