Tips for Working with Conditional Statements in Bubble.io
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. 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.
Learning Bubble and Additional Resources
Watching this video probably means that you're learning Bubble. That's fantastic! We've got loads of videos on our YouTube channel. Please hit like and subscribe. It really helps us out on YouTube, but we've got even more videos over at PlanetNoCode.com. Many of our videos are exclusive to our members and can only be found at PlanetNoCode.com.
Setting Up the Bubble App
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. Then on my page, I've got a repeating group that searches through my stats and shows them. At the moment, they all have a green background.
Tip 1: Setting Background Style
Here's tip number one: 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.
Setting Up Conditional Statements
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 five or less, we will make it red. So that means that we'll say that anything that is greater than six will make yellow.
I'm going to my conditional statement. My default is red, and so I said current stats value is greater than six, background color yellow. Then we'll say anything greater than ten will make green. So we'll say current cell stats value is greater than ten, background color green.
Tip 2: Hierarchical Conditional Statements
Here's another tip: I don't have to say less than or equal to ten 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 of my page? Well, it's going to turn it yellow, but what if this condition is also true? Well, that's going to turn it green because if it is 12, it is both higher than 10 and higher than six, and so all of the conditional statements stack up, operate in a hierarchy, and we end up with green.
Previewing the App
Let's check that out on our preview app. So there you go, we've got our under sixes are red, between our middle group is yellow, and then our top group is green. So that's the way to really simplify. We don't have to add in and statements here; we simply stack them on top of each other.
Tip 3: Background Style and Color
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. We 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.
Conclusion
So there are a number of tips for you on how to use conditional statements in Bubble.io 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.