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)
this.getView().byId("_id_wizard").setShowNextButton(false); //Hides Next Button
this.getView().byId("_id_wizard").setShowNextButton(true); //Shows Next Button
this.getView().byId("_id_wizard").mAggregations._progressNavigator.attachStepChanged(this.fHandleStepChanged);
var currentStep = this.getView().byId('id_wizard').mAggregations._progressNavigator.getCurrentStep();
var wizardProgress = this.getView().byId('_id_wizard').getProgress();
var cntrlStep3 = this.getView().byId('_id_wizStp3');
this.getView().byId('_id_wizard').goToStep(cntrlStep3);
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Subject | Kudos |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
User | Count |
---|---|
6 | |
6 | |
5 | |
4 | |
3 | |
3 | |
3 | |
3 | |
3 | |
2 |