Hello,
I am trying to fill a portion of a progression bar when clicking only the next button, but I only found the events onCurrentPageChanging and onCurrentPageChanged to do so: when I use them, clicking on the previous button also fills the progression bar, which I don't need.
I saw on your API that option.oldCurrentPage might help me, but I don't understand how I can use it. Could you help me with this please ? I work with ReactJS.
Thanks in advance,
Mehdi M.
Hello,
If you want to have a custom behavior of the progress bar, you need to hide built-in one and draw your own custom progress bar. You can update this custom progress bar in the onCurrentPageChanging and onCurrentPageChanged event handlers. Here is the sample of the custom navigation - https://surveyjs.io/Examples/Library/?id=survey-customnavigation&platform=jQuery&theme=modern It doesn't implement exactly what you need but gives an idea.
Thanks, Serge
SurveyJS Team
Thanks for your answer.
Unfortunately I don't really see how this helps me … as far as I understand this example, the style of the interface buttons is changed regardless of whether the user clicks on previous or next, unless I am mistaken there is no specific event triggered when only the next button is clicked in there.
Hello,
Probably it was same misunderstanding from my side. Can you please explain what do you mean under the "clicking on the previous button also fills the progression bar"?
Thanks, Serge
SurveyJS Team
Hello,
No worries, I'll try to be clearer:
So, I've implemented my own custom progress bar with Bootstrap.
After that I've used onCurrentChanged event to fill this progress bar when a question is answered (i.e. when the user clicks on "Next").
However, the onCurrentChanged event triggers when the page changes, which means it also triggers when the user goes on the previous page using the "Previous" button. When that happens, the progress bar is also filling itself: I do not want that to happen, so I am looking for an event that only triggers when the "Next" button is clicked, and not when the "Previous" button is clicked.
To be very clear: when I say "the progress bar is filling itself", it means the colored part of the progress bar (which indicates the progress of the user in the form) is increasing in size.
I hope it is clearer! But don't hesitate to tell me if it's not.
Thank you,
Mehdi
Hello,
Got it.
You have to add this check in your onCurrentPageChanged event:
if(!!option.oldCurrentPage && !!option.newCurrentPage && option.newCurrentPage.visibleIndex === option.oldCurrentPage.visibleIndex + 1) { //End-user click on prev page. }
We will work on this enhancement.
Thank you,
Andrew
SurveyJS Team
Alright! Thank you :)
One more thing if I may, and if that's not too much trouble: I'm not sure on how to add an option to an existing event of your API. Is this implementation okay?
survey.onCurrentPageChanged.add(function(options) {
if (!!option.oldCurrentPage && !!option.newCurrentPage && option.newCurrentPage.visibleIndex === option.oldCurrentPage.visibleIndex + 1 ) {
// handle the progress bar when the user clicks on prev page
}
})
Because I tried something similar a few days ago, but the behaviour of onCurrentPageChanged didn't seem to change.
Sure, here is the correct code.
survey.onCurrentPageChanged.add(function(sender, options) { if (!!option.oldCurrentPage && !!option.newCurrentPage && option.newCurrentPage.visibleIndex \=\=\= option.oldCurrentPage.visibleIndex + 1 ) { // handle the progress bar when the user clicks on prev page } });
Thank you,
Andrew
SurveyJS Team
Great. Many thanks!
Mehdi M.