Dynamic value for progress bar

I’ve got a Bootstrap 4 progress bar on the page which I want to show a calculated percentage using two fields in the database. I can’t seem to get it to work, though. What’s the correct syntax?

Some more info… I have two fields - one with a current value, one with a target value. My calculation is (current/target)*100 so I have a percentage.

The value field in Wappler doesn’t have the lightning button so I’m putting the code in myself but it’s not working!

Thanks in anticipation.

Which value field are you referring to?

Sorry, I wasn’t very clear.

Width: %

Did you check this link.. this is good tutorial for progressbar and you will find how to add percentage

1 Like

Please check the link @s.alpaslan provided. It shows how to use any dynamic data for the progressbar width.

1 Like

Thanks everyone. I had already looked at that link (I really do try to find the solution before I post here, honest!) so will look at it again.


Working nicely. Thanks again.

Quick follow on question. My maths has produced a number with lots of decimal places. That’s fine for the width value but not for what’s displayed so I’d like to round it to the nearest whole number. What’s the best way to achieve that?

Use the formatter options for numbers and round /format your number as you need :slight_smile:

1 Like

Thanks again. Because I have a calculation, the formatter didn’t give me what I needed but it did point me in the right direction. I’ve added .round(“0”) to it and it’s working perfectly.


1 Like