In this Bubble tutorial video, I'm going to show you some tips for working with conditional statements in order to change the background color of an element depending on the value within that cell.

Change background color with conditional statements

For example, I've got values here 1 to 70, and I'm going to add in traffic lights red, green, and yellow to indicate whether it's a low, medium, or high value. Let me show you how I've got this set up. So I've just got a simple data type called stats and I've got labels A through to D and they've got values. And then on my page I've got a repeating group that searches through my stats and shows them and at the moment they all have a green background. So here's tip number one.

Set Background to Flat Color first

If you're going to be changing backgrounds it's worth setting the background style to flat color otherwise in your conditional statement you'll need to basically turn it from transparent to flat color before you can then set a color each time. And we'll also start with a default value and I think we'll start down low because that just seems to make a bit of sense to me anyway. So I think we'll say if it is 5 or less, we will make it red. So that means that we'll say that anything that is, say, greater than... well greater than 6 will make yellow.

Stacking Conditional Statements

So I'll go into my conditional statement. My default is red and so I can say currentStats value is greater than 6 background color 6. There we go. Background color make it yellow. And then we'll say anything greater than 10 will make green. So we'll say currentSalesStats value is greater than 10 background color green. Okay here's another tip I don't have to say less than or equal to 10 here because conditional statements are hierarchical and we can see the expression of that by using the on/off toggle here there's another tip many people don't know about so I can say well if this condition is true what is it going to do to the elements on my page? Well it's going to turn it yellow but what if this condition is also true? Well then it's going to turn it green because if it is 12 it is both higher than 10 and higher than 6 and so all of the conditional statements stack up operate in a hierarchy and we end up with green. Let's check that out on our preview app. So there you go we've got our under sixes are red, our middle group is yellow and then our top group is green.

So that's a way to really simplify. We don't have to add in 'and' statements here, we simply stack them on top of each other. I'll just show you what I meant before about if we change this to 'non' then suddenly we don't get access to background color here. have to go for first background style and then we have to go to background color because if we don't have background style that sets a flat color we don't get access to background color.

So there is a number of tips for you of how to use conditional statements in Bubble in order to improve how your stats look. Let's add some traffic lights into those apps, we can make use of our red, green and yellow colors to really communicate high, low and medium values to our users.