Open custom HTML dialog on Wizard Step Change


How do I run a function on wizard step change? I want to trigger a dialog box which displays some helpful text to the user if a condition is returned True.


Hello @DryChips,

Please find the code sample in our documentation: Detect wizard step change.


So I have used the code in the documentation to do what I need it to do but I have a slight problem, which I can't seem to figure out.

I want the form to stop the user from proceeding to the next wizard if they answer 'No' and show the dialog window in Wizard 0. As you can see, this initially happens but if click the 'NEXT' button, it proceeds to Wizard 1. How can I stop them from proceeding? Thank you!

What do you mean with this? Do you want to submit the form or close it?

I want them to stop users going to wizard 1 / Employee Details and display the dialog box.


You can either add validation to the field or add a condition to the step change:

//keep user on the first step step
fd.container('Container1').widget.$on('on-change', function(prevIndex, newIndex) {
    if (prevIndex === 0 && fd.field('Field0').value === 'No') {
        window.setTimeout(function() {
        }, 100);