Skip to Content

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

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

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

3 Answers

  • Posted on Apr 27, 2016 at 01:43 PM

    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

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Apr 27, 2016 at 01:54 PM

    You could validate all sets by setting validated=true

    This will the next button is available on all steps

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Jul 29, 2016 at 11:15 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.