Forum Academy Marketplace Showcase Pricing Features

Progress Bar for completion

Hello all!

I’m trying to set up a Progress Bar that increases after certain items have been clicked (viewed) by the user.

Progress Bar has a custom state (number) and it’s dynamic value is set to be this state.

Each item (menu) has a yes/no custom state, set to be “yes” once it’s clicked.

The conditional formatting of Progress bar is set to +25 onto it’s percent once each menu’s state is “yes”.

Problem is…despite clicking several items and adding 25 to the progress bar multiple times, the progress bar never grows above 25%.

Anyone have any advice, or an easier way to make this happen?

Much appreciated

Tom

PS: I’d prefer not to use a database to do this: I don’t need to save this data and am trying to keep my database light

It looks like your app editor is set to private, as I can’t access the link.

I’m not sure the conditional formatting works like that on a Progress Bar, but I’m not sure. You may need menu 2 to be +50, menu 3 to be +75, and menu 4 to be +100. Have you tried that?

Ooof, sorry - it’s public now so hopefully accessible - thanks for the reply.

I have, but because all 4 buttons are visible, users could click on the 4th one and boost their percent to 100 without clicking on the others.

The ‘+’ command is a little misleading as it seems to really be ‘set’.

Hey @t.w.gant

See the test page I’ve created:

I think there might be a slightly leaner version in the workflows if you use terminate this workflow or even have a master text element that holds the states numbers, but working as is…

Essentially I’ve set each button to have a custom state as follows:

The value can be set depending if the button has been clicked or not - so it can either add the value if the button is clicked or remove the value if the button was clicked e.g. clicked = yes, but then changed the state to clicked = no, therefore removing the value.

Then on the progress bar its just a simple calculation:
image

(no conditions needed on the progress bar)

Hope this helps - any question lemme know.

Luke.

7 Likes

Hey Luke,

That looks absolutely perfect! I still can’t work out how you add and remove or define the value - do you have the editor version for me to check out.

Thank you very much - I get how you’re doing it but just seem to be missing the final step - is it toggling the values?

Your welcome. Yes it can take a little thinking to wrap your head around the logic, especially with conditional states combined with the ‘Only when’ condition.

Sure - I’ve just modified the original Editor you first posted, its under a new page called ‘index-clone’
https://bubble.io/page?name=index&id=forum-example&tab=tabs-1

Take a look and see the workflows and custom states set on each button, hopefully it will make sense when its broken down. As mentioned there are a few other ways to do this operation, this might not be the best, but it works :wink:

Each button as 2 custom states, 1 is to tell if the button has been clicked yes/no (this is used in the workflow conditions ‘Only when’ as its important we add or subtract the ‘25’ value) and the other state is a number where we can assigned when the button is clicked, either zero (blank) or a number value like 25 in this case. Anyhow take a look and if there is any logic your unsure of let me know.

1 Like

Ahhh you genius! Thank you so much!

It’s brilliantly simple and works a treat. Definitely a bit convoluted but I don’t think there’s any other way to do something like this. It’s a bit problem I’ve had when using progress bars and your solution offers a great little workaround. Thanks again :smile:

Again your welcome, its always a nice feeling to get to the bottom of something, so glad I could assist.

Please mark this post as resolved so it could perhaps help someone else who may stumble upon this problem in the future.

Cheers

Hi Luke,

Would you still happen to have this example available. I am having a similar problem. My app has 5 modules where users watch learning videos. I want to display the progress with the percentage of each module.

@luke2

can you please provide the example?

tks