Is it possible/likely to add a progress bar to the Toolbox?
Currently I am updating a text field with the percentage and that’s functionally sufficient. Though aesthetically I think a progress bar is a reasonable tool to request.
This is something that will be supported really soon with our Custom Components feature. I’m looking forward to announcing it in the next few weeks.
1 Like
I should have a workable progress bar shortly (hour or so) which you will be able to turn into a custom component.
Might not be as good as theirs, though 
(edit @ 17:12 - might be another hour - looking good though!)
1 Like
Thanks! I’m looking forward to it!
AWESOME! I don’t know how they could/would do it better but this is all I needed. Thanks!
1 Like
You’re welcome.
It’s not got much in the way of error checking, and it’s not very object orientated in its operation. But I’ll work on all those things.
I think it doesn’t quite handle 100% either (it falls slightly short).
But, I need this as well, so i will keep updating. Expect more over the weekend.
Thanks. That does make sense, but it will certainly do for my needs.
The one question I have left might be dumb. I don’t know how to get the progress bar out of your app and into mine. I’ve copied and pasted each form source code but the Progress bar is not available as a custom component.
I’ll keep reading, if there’s an easy way, I hope you can point me to it.
If you click the drop down next to the form on the left hand column of the IDE, one of the options is “use as component”
Check the check box (ignore the other options to add properties, etc).
Now, create a new form, and you will see the ProgressBar in the toolbox on the right as a custom component.
You might need us to enable a beta flag on your account for that 
In the meantime, copying and pasting the code will work. Once you’ve done that, you can drag the form out of the list on the left and into the designer to use it as a custom component.
Ooops, sorry.
I didn’t think of that.
Hi @dev01 ,
I have created a new version of my progress bar here :
It’s a bit more controllable, and the underlying code is a bit better. Still tons to do on it, but if you clone the project and run it you’ll get a feel for how you can customise its look.
Would appreciate any feedback you may have.
David, thanks for sharing that!
On face value, I can tell you that this offers every feature that I could expect. So far as I’m concerned it solves my problem. In terms of looking through the code I won’t have time to do that for a while, so I unfortunately have nothing constructive to contribute on that front.
Thanks again
1 Like
Hi! Adding in some a quick note to hopefully save someone else time:
I didn’t want to have anyone click a button in order for the progress bar to update. It took me forever to realize that we can’t initialize the progress bar in init(*), it has to be in a specific method. I added it into a method on showing a column panel, and now all is working well.
Thanks David for building this out!
1 Like
I think that tool might need a bit of updating. I’ll see what I can do this week. Been a while since I visited it.
I have an app where I used a custom HTML component to display the HTML5 <progress> element. I had to use call_js() with jQuery to set the value, height, and foreground color of the element though.
If people are interested, I can make a shareable version of that component (though it will only show the values at runtime; the IDE uses a placeholder).
1 Like
I exported my custom HTML <progress> bar to a clonable app; feel free to give this a shot!
https://anvil.works/build#clone:HFHJZAVVHF2TFLMZ=QHJMSNLN7BX6ANEKWKRIQC3O
You should be able to add a progress bar element and select its value (ranged 0-100), height (in pixels), and color.
I couldn’t find a way to get form properties to propagate into my custom HTML without using javascript, so the IDE still shows a default placeholder instead of the assigned values.
Is there any way to do this so that the IDE will update as well?
3 Likes