Skip to Content
Author's profile photo Former Member

SAPUI5: Working with Wizard Control (sap.m.Wizard)

Hi All,

The Wizard control enables users to accomplish a single goal which consists of multiple dependable sub-tasks. Each sub-task is provided in the form of a WizardStep. Although steps are managed globally through WizardProgressNavigator.

This blog shows functions and steps related to usage of Wizard Control found in sap.m library.

Special Note: Wizard seems to have a minimum of 3 Steps and maximum of 8 Steps. You can change this limit using Progress Navigator in Wizard.


1 – Create a Wizard (View)



<Wizard id="_id_wizard" complete="onPressReview" finishButtonText="Review" showNextButton="true">
</Wizard>

The event complete triggers a function when you reach at last step and press ‘Review‘ Button.

Property finishButtonText is a property to change name of Button on activation of all WizardStep you placed. (default: ‘Review’)

Property showNextButton is a property to switch display of Next Button at for each step that activates and moves to next step. (default: true)

2 – Create WizardStep as aggregation of Wizard (View):


<Wizard id="wizard" complete="onPressReview" finishButtonText="Review" showNextButton="true">
     <WizardStep id="id_wizStp1" validated="true" title="Step 1">
     <WizardStep id="id_wizStp2" validated="true" title="Step 2">
     <WizardStep id="id_wizStp3" validated="true" title="Step 3">
</Wizard>

The event validated enables ‘Next‘ button on that step. To toggle according to requirements, you need to use invalidateStep(‘control_of_step’) and validateStep(‘control_of_step’) functions.of Wizard. Can be efficient when you are using validations on each step.

Methods related to Wizard (Controller)

  • Show/Hide Next Button:

this.getView().byId("_id_wizard").setShowNextButton(false);  //Hides Next Button
this.getView().byId("_id_wizard").setShowNextButton(true);  //Shows Next Button


  • Handle Step Change (to trigger function named fHandleStepChanged on step change or click)


this.getView().byId("_id_wizard").mAggregations._progressNavigator.attachStepChanged(this.fHandleStepChanged);


  • Get Current Step

var currentStep = this.getView().byId('id_wizard').mAggregations._progressNavigator.getCurrentStep();


  • Get Progress of Wizard

var wizardProgress = this.getView().byId('_id_wizard').getProgress();

  • Move to a Step (Note: Only works on activated step)

var cntrlStep3 = this.getView().byId('_id_wizStp3');
this.getView().byId('_id_wizard').goToStep(cntrlStep3);

  • Validate/Invalidate a Step

this.getView().byId('_id_wizard').invalidateStep(cView.byId("_id_wizStp3"); //Invalidates Step 3
this.getView().byId('_id_wizard').validateStep(cView.byId("_id_wizStp3"); //validates Step 3


  • Validates the current step, and moves one step further. to Next Step / Previous Step

this.getView().byId('_id_wizard').nextStep(); // Move to next Step
this.getView().byId('_id_wizard').previousStep(); // Move to previous Step

That’s all basics of Wizard I’ve now, But I’ll be updating more soon. Thanks for your time

With Regards,

Umang Rustagi

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Aditi Bhargava
      Aditi Bhargava

      Hi umang,
      This blog was very helpful while I was developing wizard.
      though, I'm facing some issue.

      I'm trying to create a wizard using sap.m.wizard in which the number of steps can be dynamically rendered. I'm unsure on how to proceed with this.

      flow can be: 1-2-3-4-5
      1-3-4-5
      1-2-4-5
      1-3-5

      Problem I'm facing:
      when we create the wizard dynamically,
      if we click on item with 5 steps .. OKAY
      then we click on item with 7 steps .. OKAY
      then we click on item with 6 steps .. ERROR
      "dynamic step removal not yet supported"

      Please provide some insight into this problem.
      thanks in advance 🙂

      Author's profile photo Adarsh Sidnod
      Adarsh Sidnod

      Hi Aditi,

      Dynamic step removal is not yet supported, But this can be done in other way.

      1. Get the contraol of the all wizard steps.
      2. remove all steps from the wizard.
      3. Add the steps in which you want to add.
      Author's profile photo Sankar Narayana Kalapatapu
      Sankar Narayana Kalapatapu

      Hi Rustagi,

       

      Can i know which template we need to select for creation of project.

      Do we have step by step document or video with respect to Wizrd Floor Plan.

      Is it somewhere related to Smart Template Application.

      If yes, could you please share the details.

       

      Thanks,
      Sankar

      Author's profile photo James Ian Moyes
      James Ian Moyes

      Hi Rustagi,

      Do you have a real example of the full code for a wizard where the previous steps are hidden, only showing the selected step and also the navigation actually works going backwards and forwards by clicking on the navigation circles ( for activated steps of course).

      I thought your ideas were great, but when i tried to implement them, nothing worked as expected and there is very little information on the web to show a working example.

       

      thanks.

      Author's profile photo Former Member
      Former Member

      Hi Umang,

       

      I have been facing this issue, when I use discardProgress method to reset the progress of the wizard and go back to the first step, it does go back to the first step and disables the other steps. But I do not see a next step button to go to the next step.

      Please let me know if you have a solution for this.

      Thanks

      Author's profile photo Supriya Kumari
      Supriya Kumari

      how to get the previous step index

      Author's profile photo Harish Kumar Bongula
      Harish Kumar Bongula

      how to hide review button in wizard