Tips for Using Conditional Statements in Bubble.io
In this Bubble tutorial we demonstrate how you can use conditional statements to change the background color of content based on a numerical value. We create a series of traffic light color changes (red, green, yellow) to show low, medium and high values in our data.
Master conditional statements: Change background colors dynamically based on cell values in Bubble's conditional statements!
Traffic light your data: Learn to visually indicate low, medium, and high values using red, yellow, and green backgrounds in repeating groups.
Simplify complex logic: Discover how to stack conditional statements without using AND operators in Bubble's hierarchical system.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.