Progress Bar for completion

Need help Plugins
1

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

2

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?

3

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’.

4

Hey @t.w.gant

See the test page I’ve created:
https://forum-example.bubbleapps.io/version-test/index-clone?debug_mode=true

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…

sdf

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

image
image716×242 12.3 KB

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
5

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?

6

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
7

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:

8

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

9

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.

10

@luke2

can you please provide the example?

tks

1 Like