Order of Wizard Steps with java script

Forms
1

I have a wizard that hides/shows steps based on form selection
The issue I have is the order that the steps show.

When value is selected, two steps show
I want to swap the order of these
Step 3 should be step 2

image
image1247×119 2.75 KB

2

Additional information, the new wizard steps are opening before the previous. I want to swap that so they open in order shown.

3

Hello @cortese98,

So, you remove a step and then you want to add it to the middle rather than to the end? Is that right?

Please share the current code you are using for that.

4

Step 1 is shown by default
Step 2 is shown when a selection is made on screen 1
On screen 2, there are options that open additional screens
Screen 3, 4, 5 open before step 2 instead of behind step 2
That breaks the next button

fd.rendered(function() {
var oneStep = fd.container('Wizard1').widget.tabs[1];

function showHideWizard() {
    if (fd.field('EngageAnEngineerOrRegisterADeal').value == false) {
        fd.container('Wizard1').widget.tabs.splice(1, 1);
    } else if (fd.field('EngageAnEngineerOrRegisterADeal').value != false) {
        fd.container('Wizard1').widget.tabs.splice(1, 0, oneStep);
    }
}
fd.field('EngageAnEngineerOrRegisterADeal').$on('change', showHideWizard);
showHideWizard();

});

5

@cortese98,

Please export the form and share it with me.

I'll review all the code you have now and suggest changes.

6

I sent to you via message

7

Hello @cortese98,

Thank you for the form file!

First of all, one fd.rendered() function is enough on the form. Then you add multiple event handlers that can cause conflict in the code.

Another important tip is that the function name must be unique. In your form, all functions have the same name: showHideWizard.

Regarding wizard steps order, you add all steps to the 1 position, but as I understand, they must be added at the end.

Please see the code example for adding removing wizard steps and update your code accordingly.

fd.rendered(function() {
    var wizard = fd.container('Wizard1')
    var secondStep = wizard.widget.tabs[1];
    var thirdStep = wizard.widget.tabs[2];
    var fourthStep = wizard.widget.tabs[3];

    fd.field('Toggle1').$on('change', showHidSesecondStep);
    showHidSesecondStep();

    fd.field('Toggle2').$on('change', showHidThirdStep);
    showHidThirdStep();

    fd.field('Toggle3').$on('change', showHidFourthStep);
    showHidFourthStep();

    function showHidSesecondStep() {
        if (fd.field('Toggle1').value == false) {
            var position = wizard.widget.tabs.map(e => e.title).indexOf('Step2')
            wizard.widget.tabs.splice(position, 1);
        } else if (fd.field('Toggle1').value != false) {
            wizard.widget.tabs.push(secondStep);
        }
    }

    function showHidThirdStep() {
        if (fd.field('Toggle2').value == false) {
            var position = wizard.widget.tabs.map(e => e.title).indexOf('Step3')
            wizard.widget.tabs.splice(position, 1);
        } else if (fd.field('Toggle2').value != false) {
            wizard.widget.tabs.push(thirdStep);
        }
    }

    function showHidFourthStep() {
        if (fd.field('Toggle3').value == false) {
            var position = wizard.widget.tabs.map(e => e.title).indexOf('Step4')
            wizard.widget.tabs.splice(position, 1);
        } else if (fd.field('Toggle3').value != false) {
            wizard.widget.tabs.push(fourthStep);
        }
    }

});
9

Thank you! This resolved my issue and cleaned up my scripting.

10

@mnikitina

When I get to step 10 - 17 the wizard page breaks. Is there something about double digit steps?

11

@cortese98,

No, the code should work for all steps. It doesn't matter if it is step 2 or 58.

It must be something in the code. Please share the part of the code that you use for step 10 and 11.

12

function showHidtenthStep() {
if (fd.field('SDWAN').value == false) {
var position = wizard.widget.tabs.map(e => e.title).indexOf('Step10');
} else if (fd.field('SDWAN').value != false) {
wizard.widget.tabs.push(tenthStep);
}
}
function showHidelventhStep() {
if (fd.field('Security').value == false) {
var position = wizard.widget.tabs.map(e => e.title).indexOf('Step11');
} else if (fd.field('Security').value != false) {
wizard.widget.tabs.push(elventhStep);
}
}
function showHidtwelveStep() {
if (fd.field('UCaaS').value == false) {
var position = wizard.widget.tabs.map(e => e.title).indexOf('Step12');
} else if (fd.field('UCaaS').value != false) {
wizard.widget.tabs.push(twelveStep);
}
}
function showHidthirteenStep() {
if (fd.field('Voice').value == false) {
var position = wizard.widget.tabs.map(e => e.title).indexOf('Step13');
} else if (fd.field('Voice').value != false) {
wizard.widget.tabs.push(thirteenStep);
}
}
function showHidfourteenStep() {
if (fd.field('Other').value == false) {
var position = wizard.widget.tabs.map(e => e.title).indexOf('Step14');
} else if (fd.field('Other').value != false) {
wizard.widget.tabs.push(fourteenStep);
}
}
function showHidfifthteenStep() {
if (fd.field('Cloud1').value == false) {
var position = wizard.widget.tabs.map(e => e.title).indexOf('Step15');
} else if (fd.field('Cloud1').value != false) {
wizard.widget.tabs.push(fifthteenStep);
}
}
function showHidsixteenStep() {
if (fd.field('Security1').value == false) {
var position = wizard.widget.tabs.map(e => e.title).indexOf('Step16');
} else if (fd.field('Security1').value != false) {
wizard.widget.tabs.push(sixteenStep);
}
}
function showHidseventeenStep() {
if (fd.field('contactcenter').value == false) {
var position = wizard.widget.tabs.map(e => e.title).indexOf('Step17');
} else if (fd.field('contactcenter').value != false) {
wizard.widget.tabs.push(seventeenStep);
}
}
});

13

@cortese98,

Step10 in the below code line is the title of the step:

var position = wizard.widget.tabs.map(e => e.title).indexOf('Step10');

Please make sure that the step title matches the text in the code.