How to implement live Progress Bar

0
Hi all,   I am trying to implement a progress bar into a wizard step form. The form has 10 steps, each with 5 response boxes for a total of 50 responses all from the same entity. I am trying to implement it so that when a text area is populated, the progress bar advances 2%, so hypothetically once question 10 has a response, it should show 20% complete for example.   I have tried to implement a microflow to calculate and return these values for the Progress Bar widget however I am unsure how to correctly create this. I tried to look for similar solutions online that increases the progress bar as attributes within an entity are populated but haven’t found anything so some guidance would be great.   Thank you!
asked
2 answers
0

Hey Matt!

I feel your pain man. The best way to achieve this, in my opinion, would be to increment the values you used in the progress bar in a nanoflow when the user changes the text area. You could even do a validation in the nanoflow to make sure it isn't empty and only increment when it's filled. This should update the values referenced by the widget and cause the widget to update. If it doesn't you can add a 'Refresh Object' action in the nanoflow and refresh your page parameter object to force a refresh of the page.

 

So essentially it's like this:

You have a page parameter object with the progress variables in it. You use those progress variables to configure the progress bar widget. You have multiple text box fields on the page for filling in your form or answering your questions. You configure the on change events for each of those text box fields to trigger a nanoflow that updates the page parameter object's progress variables, and if needed refresh that page parameter object.

 

I hope this makes sense! If you need more help feel free to comment and we'll work through it.

answered
0

See the various websocket widgets/modules in the marketplace that offer this. You can send a message or value from the microflow to the browser.

answered