Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

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

7 Comments
Labels in this area