How to enable all the steps active all the time in sap.m.Wizard?

[soni]

Hello All,

For sap.m.Wizard control initially only the first step is enabled then it forces to follow the steps sequentially.

Once the order is followed then only all the steps become enable and we can navigate between any step at any time.

Is there any way to make all the steps always active so that at any time user can go to any step?

Thank you,

Soni

[former_member234069]

Hi all,

I encountered the same challenge and found a ugly, but working solution.

If you check the sources of the sap.m.Wizard, you will notice it loads sap.m.WizardProgressNavigator. This is the control on top. It also handles the navigation from and to steps. I assume that the wizard has the identifier wizard so the sap.m.WizardProgressNavigator can be accessed by its identifier wizard-progressNavigator:

var oWizardProgressNavigator = this.getView().byId("wizard-progressNavigator");

This control and the wizard steps and the progress navigator will be available only after rendering. So we need to wait for the rendering to be finished, before, we can do anything.

In the onAfterRendering function, we get the amount of wizard steps, iterate and move to all steps After the iteration we move to the first step once again:

/**
 * onAfterRendering is used to hack the wizard which does not support to the steps active up front.
 * @returns {void}
 */
onAfterRendering: function() {

    // Get the wizard and its progress navigator
    var oWizard = this.getView().byId("wizard");
    var oWizardProgressNavigator = this.getView().byId("wizard-progressNavigator") 

    // First step needs to be included, or else this hack does not work and the user ends up at step 2
    for (var i = 1, iLength = oWizard.getSteps().length; i <= iLength; i++) {

        oWizardProgressNavigator._moveToStep(i);
    }


 // Go to the first step
 oWizardProgressNavigator._moveToStep(1);
}

Hope this helps.

Regards,

Ulrich

[Chantele]

You could validate all sets by setting validated=true

This will the next button is available on all steps

[sebastianraemsch]

I had the same idea. But if I´m not wrong this doesn´t work. Did you try that?

If I query my steps they all say "validated = true" but I cannot access all steps.

[Chantele]

i tried it using dev tools and it worked ok.

When all validated was set to true in all element, it showed the next button and opened up the breadcrumb trail

[soni]

I tried that, next button is also coming but the problem is that all the steps are not active initially.

We have to follow the sequence and once the order is followed then only we can navigate among all the steps.

[sebastianraemsch]

Hi Soni,

I guess this is not possible. At least I also didn´t find a way to do it in standard.

An ugly solution would be to go through the steps by Javascript and then move back to the first one. But I wouldn´t do so.

You may have a look at the source code of the Wizard Progress Navigator:

https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/WizardProgressNavigator.js

Maybe you find an approach there.

Sorry that I couldn´t provide a solution.

Best regards, Sebastian