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

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. 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 🙂

    (0) 
    1. 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.
      (0) 
  2. Sankar 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

    (0) 
  3. 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.

    (0) 

Leave a Reply