Conditional formatting of an element based on value of calculated variable

Need help
1

Hi all. First post. Very optimistic about Bubble.

Looking for advice. I’m working on an application where the user submits a text element and a score. I have these going into a list nicely. I have a dynamic text element that does a :sum of all the scores and displays it.

I’d like conditional formatting for that dynamic text element when the :sum = 100 but I’m struggling to see how to do it. Advice appreciated.

Cheers.

2

Have you done the conditions lesson at bubble.is/welcome? The way you’d do it is you create a condition that reads ‘when the list:sums > 100’ (or whatever the type of thing is) and then modify the element’s properties.

If you hit some issues can you paste a screenshot?

1 Like
3

Hi Emmanuel

Thanks for replying. Yes, I’ve done the tutorials.

If you see the screenshots below, I have a text field called BizObj-total. The formula in the first screenshot accurately calculates and displays a :sum value. So far no problem. In the second screenshot I’m trying to do conditional formatting if the value of BizObj-total > 99. The formula is exactly the same but I can’t seem to get any formatting change to occur.

Any suggestions very welcome as tracking the values of variables like this is core to the application idea.

Cheers

Phil

4

Have you tried using the debugger? See this https://bubble.io/chapter?id=1442431436562x229863804532215000.

You can “inspect” an element, and then see how this expression is evaluated. Why don’t you try that to see whether the expression is the right one?

5

I’ll give that a try, Thanks!

1 Like
6

You should get familiar with it, it’s super useful to understand why elements are displayed in a certain way, and to see how workflows get run, action by action. If you click on a dynamic expression you can see how which part is evaluated and explore the data.

7

Yes, that was really useful. I used the Evaluator to unpack the expression and it’s definitely correct, just not responding to the instruction to reformat it’s colour. See Evaluator grab below.

8

Can you share a link? Do you have more than one state that applies?

9

App home, test version: https://bubble.io/site/decisionengine/version-test/index?debug_mode=true

Location of conditional formatting “oddity”: https://bubble.io/site/decisionengine/version-test/project_home?id=1445688878813x713400723645463600&debug_mode=true

There are multiple steps to take to get to the page with the formatting oddity, I’m afraid, including user registration.

Can you get there without registering? If not, the steps are:

  • Register
  • Create new project
  • Select that project
  • Add new business objectives (including % score) until the total is more that 99

The conditional formatting is for the total figure to turn green when BizObj-total > 99

10

That’s because you’re overwriting the font inside the text itself. [right][color=#ffffff][size=4]

Using BBCODE is a fallback, but it’s not the best way, ideally use the property editor.

11

Aha! I will try that :slight_smile:

12

Awesome. That was the issue. Many thanks!

1 Like