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
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 🙂
Hi Aditi,
Dynamic step removal is not yet supported, But this can be done in other way.
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
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.
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
how to get the previous step index
how to hide review button in wizard