Wizard Container - Events for Next/Previous?

Forms
1

Hi! Liking the UI that the new Wizard control gives us. We'd like to run some code when a user hits the next button (that will affect the controls in the following step in the wizard).

Are there events that we can hook when the next/prev buttons are clicked? If not, how would be specifically hook the click event on the next button within that control?

Thanks in advance

2

Hello @officeadmin,

Yes, you can use the update:startIndex event. Please see the code example below.

Please learn more about the event here.

fd.container("Wizard0").widget.$on("update:startIndex", function() {
       console.log('Next Step');
});
3

Hi @mnikitina,

Is there a way to get the target step when the update:startIndex event is raised? I need to do certain validation but only applies for the next step from the current, not to the previous.

Thanks a lot

4

Hello @Pablo_Medina,

You can use the code below to check if a user moved to the next step of Wizard container:

fd.container("Wizard0").widget.$on("update:startIndex", function() {
    var previousTabIndex = fd.container("Wizard0").widget.activeTabIndex;
    window.setTimeout(function() {
        var currentTabIndex = fd.container("Wizard0").widget.activeTabIndex;
        //check that this is the next step
        if(currentTabIndex > previousTabIndex) {
            //do something here
        }
    }
    , 100)
})
5

Thanks @mnikitina!
Right...sorry for the dummy question....figured it out after I wrote the post (facepalm).

Cheers!

6

Hi again @mnikitina!

That worked perfectly but i have another question:

  • How does one access to the validation that happens on each step?
    In my form, in the first step, I have a List or Library control and I need the user to select exactly one item.
    I would also like to prevent the user to select more than one item but i couldnt find any event neither. Any ideas?
    Thanks!
7

Figured out the second of my questions by adding a watcher to the selectedItems property of the control:
control.$watch('selectedItems', function(items){...})

Still couldnt figure out how to get to the validation performed on each step tho :frowning:

8

Hello @Pablo_Medina,

The validation is triggered on each step of the Wizard container by default.

Have you added the validation for List or Library control?

9

Hi @mnikitina, thanks for your reply. Yep, I added the validator to the List or Library control and it didnt work. However, I found a not-that-elegant way to do that.
I added a common field in the form, then added a validator for that field that checks on the control I want to validate (in my case, that the list or library control has one selectedItem). Then I hide the container for that common field via CSS.

1 Like
10

Hi,

I am searching for the previousTab function for a Wizard container?!
fd.container('Wizard').widget.nextTab(); works like a charm, but fd.container('Wizard').widget.previousTab(); not.

Im using it with a Button.
What is wrong?

11

Hello @DanielB,

Please try out this code:

fd.container('Wizard').widget.prevTab()
1 Like