It works great… EXCEPT I have to click the refresh button in my browser to get it to update. If I navigate to another page in the live app, and then back to the page with the progress bar, nothing changes, even if the value of the field in the data table does change.
I’m still a JS beginner, so I’m probably missing something super obvious. Any ideas? How can I make the JS code run when the page loads, without having to hit the browser refresh button?
I did try a version of what you’re suggesting, but I don’t have a table on the page and after speaking with support, it seems that currently, the progress bars will not display in a details component. That’s why I created the custom progress bar instead.
But, yes, the values for the progress bar are coming from a record field. I just can’t get the JS to pull the updated data without hitting the refresh button each time.
I’ll check out the custom component feature. In the meantime, I’ve found a workaround.
First, I added an HTML component. The only thing I added to the HTML component is the field with the value I want to use for the percentage of the progress bar. The value is in curly brackets, which means it continually updates according to the record value.
Then, I used this JS code to update the progress bar based on that HTML component, and to also hide the HTML component so it’s not visible on the page:
I think the JS is not pulling the updated record data, even when using the curly brackets in the JS tab, because the page isn’t being fully reloaded each time, so the JS is not triggering. The HTML component must update without the full reload.