Forum Academy Marketplace Showcase Pricing Features

Way to toggle any sort of event based on a text element's font color?

I’ve tried a couple different ways of doing this and can’t figure out how to make it work…

I have text in a cell that is formatted to change color to green if certain data conditions are satisfied. This works great. However, I would like to trigger some sort of element to appear in that cell only if the font has turned green…I’m totally flexible on how to make this happen (i.e. an icon, alert, text, anything is fine), but I can’t actually figure out any way at all to use font color as the condition for another event.

Thanks for any help you might be able to give! (And yep, I have completed the conditionality lesson.) Bubble is great, so thanks for the awesome product.

Here’s a simple example, in case I’m not being very clear: https://bubble.io/page?id=example99

The conditional formatting changes the name of any alpaca to green. I would like for the font color change to trigger an alert that says “this is an alpaca!”; or an icon of an alpaca; or really anything. I realize that in this example I could just tie such an element to the same data condition as the color change; but in the actual app I’m working on, the data conditions involved are a lot more complex so it would be best if the element could just trigger from the color itself.

You could set a custom state for the font that also get’s trigged. Something like, “isGreen” and make it a Yes/No. When “isGreen” is “Yes,” then Show the pic of the alpaca at a dinner party.

1 Like

Hmm, that was my first thought at the very beginning but I think I’m missing something crucial. I can create a custom state, call it isGreen, and set it to yes/no, but how do I tell bubble what “isGreen” actually means? That’s the part I just came up against a wall on. Glad to know that this functionality seems possible though!

Bubble doesn’t need to know what “isGreen” means. What you gotsta do is set isGreen to be yes, then do a check for whether or not isGreen is yes.

Hmm, looking at your example, I’m not able to make it do what I want to. I’ll poke at this some more. In short, it looks like some event has to trigger the state change of isGreen, you don’t seem to be able to just set it if some value meets conditions. I’ll play more. Sorry I’m not more immediately helpful.

1 Like

I had a really tricky time understanding custom states too but I think what you’re saying is definitely possible. I’m not sure if this is the best way, but here’s a more basic example I made in the forum app of a text element (called ‘Paragraph’) where its font color is changed to different colors depending upon the set custom state of ‘Paragraph’. I find it easier to create custom states that are text (instead of yes/no) to give me more flexibility and reduce confusion around things like ‘isGreen’ = ‘yes’ or ‘no’ (I find that way harder to understand). Instead of doing that I created a state called ‘color state’, which is a text, and the value is ‘Green’. I believe it works in the same way, it’s just a different way of labeling.

Preview:

Editor:

2 Likes

Do you guys know if its possible to search for a character within a text and change it’s colour… I.e i have a list of characters, if its “W” i want it to be green, “L”, red and “D” yellow. Had a play around with this but can only seem to get it to change if it finds a word not one character which doesn’t help me…