Dynamic value for progress bar

[sitestreet]

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.

[Teodor]

@sitestreet

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

Which value field are you referring to?

[sitestreet]

Sorry, I wasn’t very clear.

Width: %

[s.alpaslan]

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

Adding Progress Bar to Upload Form

You already know HOW TO CREATE AN UPLOAD FORM and upload files to your server. Sometimes, for large files it is useful to have some kind of indication, that the file is uploading. The progress bar component is really useful here! We’d like to add the progress bar, below our upload form, so we select add after: [Screenshot_15] And in the content category we select Progress: [Screenshot_16] Select the progress bar, in the App Structure: [Screenshot_17] You can add a label inside it, we …

[Teodor]

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

[sitestreet]

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.

[sitestreet]

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?

[Teodor]

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

[sitestreet]

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.