How to display Purchase order status dynamically by using sap.m.wizard control in sapui5

[Praveen_N]

Hi Readers!

Hope Everyone are doing good and safe.

In this blog I am going to explain the use of sap.m.wizard control and its properties, methods and event in sapui5 .

Firstly I am going to explain about sap.m.wizard control updated properties and methods. Then I will give an example with explanation.

Create wizard in xml view.

<Wizard id="POStatusWizard" finishButtonText="Finish" currentStep="step1" 

showNextButton="false"></Wizard>

Now i'll explain sap.m.wizard properties.

Complete property is event. This event trigger when you reach last step of wizard the “Review” button and press.

finishButtonText property is user to change text of finish button. (default: Review)

showNextButton property is user to show or hide Next Button of each step. Property default value is true.

currentStep property is a new property of wizard and it is available from 1.50 version. To this property to change current step directly.

Steps is a aggregation property to bind dynamic wizard steps into the content.

Create wizard steps of wizard in XML view.

<Wizard id="POStatusWizard" finishButtonText="Finish"

	 showNextButton="false">

   <WizardStep id="POCreated" visible="true" title="PO Created"

	activate="wizardCompletedHandler"></WizardStep>

</wizard>

Methods of wizard control

• Add step to wizard 

Adds a new step to the Wizard.

This.getView().byId(“wizard”).addStep( new sap.m.WizardStep(“step1”,{

						   Title:”step1”,

						   Validate:true

						}));

• Get Current Step.

Returns the ID of the element which is associate of currentStep. or null

This.getView().byId(“POStatusWizard”).getCurrentStep();

• Set Current Step.

Set association currentStep to the given step. This method is available since 1.50 version.

This.getView().byId(“wizard”).setCurrentStep(this.byId("POCreate");

• Get Finish Button Text.

Returns the finish button text as string.

This.getView().byId(“POStatusWizard”).getFinishButtonText();

• Get Progress.

Returns the number of last activated step of wizard as Number.

This.getView().byId(“POStatusWizard”).getProgress();

• Get Progress Step.

Returns the last activated Step of wizard as wizardStep.

This.getView().byId(“POStatusWizard”).getProgressStep();

• Get Steps.

Returns the aggregation of wizard and its included in wizard content. And it’s returns as array.

This.getView().byId(“POStatusWizard”).getSteps();

• Go To Step.

Goes to the give step. The step must be already activated and visible. It won’t work when step            is not activated and visible.

This.getView().byId(“POStatusWizard”).gotostep(this.getView().byId("POApproveStatus1"), true);

• Invalidate/ validate step.

Invalidate/validate the given step. its boolean value

This.getView().byId(“POStatusWizard”).invalidateStep(this.getView().byId("step3")); // invalidate

This.getView().byId(“POStatusWizard”).validateStep(this.getView().byId("step3")); //validate

• Next/Previous step methods.

Goes to the one further step and validates current step. // next step

Goes to the one step back and discard the current step. // previous step

This.getView().byId(“POStatusWizard”).nextStep();

This.getView().byId(“POStatusWizard”).previousStep();

• IndexOfStep method.

Checks the given step is in the aggregation of wizard. If found the step and returns index of               that step otherwise returns -1.

This.getView().byId(“POStatusWizard”).indexOfStep(this.getView().byId("step2"));

• removeAllSteps method.

This method is user to remove all steps of wizard.

This.getView().byId(“POStatusWizard”).removeAllSteps();

• DestroySteps method.

Destroy all steps of aggregation in the given wizard.

This.getView().byId(“POStatusWizard”).destroySteps();

That's All basics and updated Properties and methods.Now i'm going show example.

Example: My requirement is to give Purchase order as input, which results Purchase Order status as output in wizard steps.

Let’s do it!

Let’s start the sample Application and follow the below steps.

Step1: go to webide and create sapui5 sample application then project created with following structure as shown in below screen shot.

Step2: add below following XML code to your XML view.

<HBox class="sapUiSmallMarginTop sapUiSmallMarginBottom">

							<Label text="Purchase Order Number:" class="sapUiMediumMarginBegin sapUiTinyMarginTop" design="Bold"/>

							<Input value="{viewInitialModel>/PONumber}" id="PONumId" width="100%" class="sapUiTinyMarginBegin" showValueHelp="true"

								valueHelpRequest="onPONumValuehelp"/>

							<Button text="check Status" type="Emphasized" press="onCheckStatus" class="sapUiMediumMarginBegin sapUiTinyMarginTopS"/>

						</HBox>

						<Wizard visible="{viewInitialModel>/visibleWizard}" id="POStatusWizard" finishButtonText="Finish"

							class="sapUiResponsivePadding--header sapUiResponsivePadding--content" showNextButton="false">

							<WizardStep id="POCreated" visible="{=${POStatusModel>/POCreate} === 'X' ? true : false}" title="PO Created"

								activate="wizardCompletedHandler">

								<VBox class="sapUiSmallMargin">

									<f:SimpleForm id="POCreatedDetails" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="3" labelSpanM="4"

										labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="1" columnsM="1"

										singleContainerFullSize="false">

										<f:content>

											<Label text="PO Number"/>

											<Text id="nameText" text="{POStatusModel>/PONum}"/>

											<Label text="PurchaseId"/>

											<Text text="{POStatusModel>/PurchaseId}"/>

											<Label text="PurchaseId Name"/>

											<Text text="{POStatusModel>/PurchaseName}"/>

											<Label text="Recommended Delivery Date"/>

											<Text id="countryText" text="{POStatusModel>/RecommendedDelDate}"/>

										</f:content>

									</f:SimpleForm>

								</VBox>

							</WizardStep>

							<WizardStep id="POApprovedbySupplier" visible="{=${POStatusModel>/POApprovedbySupplier} ==='X' ? true : false}" title="PO Approval stage1"

								activate="wizardCompletedHandler">

								<VBox class="sapUiSmallMargin">

									<f:SimpleForm id="POApprovedBySupplyDetails" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="3" labelSpanM="4"

										labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="1" columnsM="1"

										singleContainerFullSize="false">

										<f:content>

											<Label text="Created on"/>

											<Text id="createdDate"

												text="{path:'POStatusModel>/CreatedOn', type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Created by"/>

											<Text text="{POStatusModel>/CreatedBy}"/>

											<Label text="Supply And Logistics Officer"/>

											<Text text="{POStatusModel>/ApprovedBySupply}"/>

											<Label text="Chief Of Programme"/>

											<Text text="{POStatusModel>/ChiefOfProgramme}"/>

											<Label text="Recommended Delivery Date"/>

											<Text

												text="{path:'POStatusModel>/RecommendedDelDate',type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Purchase Order Type"/>

											<Text text="{POStatusModel>/POType}"/>

										</f:content>

									</f:SimpleForm>

								</VBox>

							</WizardStep>

							<WizardStep id="POApprovedbyProgrammer" visible="{=${POStatusModel>/POApprovedbyProgrammer} === 'X' ? true : false}"

								title="PO Approval stage2" activate="wizardCompletedHandler">

								<VBox class="sapUiSmallMargin">

									<f:SimpleForm id="POApprovedByProgrammeDetails" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="3" labelSpanM="4"

										labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="1" columnsM="1"

										singleContainerFullSize="false">

										<f:content>

											<Label text="Created on"/>

											<Text

												text="{path:'POStatusModel>/CreatedOn', type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Approved on"/>

											<Text

												text="{path:'POStatusModel>/ApprovedOn', type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Supply And Logistics Officer"/>

											<Text text="{POStatusModel>/ApprovedBySupply}"/>

											<Label text="Programme Officer"/>

											<Text text="{POStatusModel>/ApprovedByProgramme}"/>

											<Label text="Chief Of Programme"/>

											<Text text="{POStatusModel>/ChiefOfProgramme}"/>

											<Label text="Recommended Delivery Date"/>

											<Text

												text="{path:'POStatusModel>/RecommendedDelDate',type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Purchase Order Type "/>

											<Text text="{POStatusModel>/POType}"/>

										</f:content>

									</f:SimpleForm>

								</VBox>

							</WizardStep>

							<WizardStep id="POPicked" visible="{=${POStatusModel>/POPicked} === 'X' ? true : false}" activate="wizardCompletedHandler" title="PO Picked">

								<VBox class="sapUiSmallMargin">

									<f:SimpleForm id="POPickedDetails" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="3" labelSpanM="4"

										labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="1" columnsM="1"

										singleContainerFullSize="false">

										<f:content>

											<Label text="Created on"/>

											<Text

												text="{path:'POStatusModel>/CreatedOn', type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Supply And Logistics Officer"/>

											<Text text="{POStatusModel>/ApprovedBySupply}"/>

											<Label text="Approved on"/>

											<Text

												text="{path:'POStatusModel>/ApprovedOn', type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Programme Officer"/>

											<Text text="{POStatusModel>/ApprovedByProgramme}"/>

											<Label text="Chief Of Programme"/>

											<Text text="{POStatusModel>/ChiefOfProgramme}"/>

											<Label text="Recommended Delivery Date"/>

											<Text

												text="{path:'POStatusModel>/RecommendedDelDate',type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Purchase Order Type "/>

											<Text text="{POStatusModel>/POType}"/>

										</f:content>

									</f:SimpleForm>

								</VBox>

							</WizardStep>

							<WizardStep id="POLoaded" visible="{=${POStatusModel>/POLoaded} === 'X' ? true : false}" activate="wizardCompletedHandler" title="PO Loaded">

								<VBox class="sapUiSmallMargin">

									<f:SimpleForm id="POLoadedDetails" editable="false" layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="3" labelSpanM="4"

										labelSpanS="12" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="4" emptySpanM="0" emptySpanS="0" columnsXL="2" columnsL="1" columnsM="1"

										singleContainerFullSize="false">

										<f:content>

											<Label text="Created on"/>

											<Text

												text="{path:'POStatusModel>/CreatedOn', type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Supply And Logistics Officer"/>

											<Text text="{POStatusModel>/ApprovedBySupply}"/>

											<Label text="Approved on"/>

											<Text

												text="{path:'POStatusModel>/ApprovedOn', type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Programme Officer"/>

											<Text text="{POStatusModel>/ApprovedByProgramme}"/>

											<Label text="Chief Of Programme"/>

											<Text text="{POStatusModel>/ChiefOfProgramme}"/>

											<Label text="Recommended Delivery Date"/>

											<Text

												text="{path:'POStatusModel>/RecommendedDelDate',type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Purchase Order Type "/>

											<Text text="{POStatusModel>/POType}"/>

											<Label text="Purchase Order Picked On "/>

											<Text

												text="{path:'POStatusModel>/POPickedOn',type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

											<Label text="Purchase Order Loaded On "/>

											<Text

												text="{path:'POStatusModel>/POLoadedOn',type: 'sap.ui.model.type.Date',formatOptions: { source: { pattern: 'ddMMyyyy' }, pattern: 'dd-MMM-yyyy' }}"/>

										</f:content>

									</f:SimpleForm>

								</VBox>

							</WizardStep>

						</Wizard>

Step3: after adding XML view add the below logic into your controller. I used static data which is in onInit function.

onInit: function () {

			var that = this;

			// Initialize view model to manipulate view

			var model = new JSONModel();

			model.setData({

				"PONumber": "",

				"visibleWizard": false

			});

			that.getView().setModel(model, "viewInitialModel");

			// initialize data model 

			var wizardModel = new JSONModel();

			var Wdata = [{

				"PONum": "54276977",

				"POCreate": "X",

				"POApprovedbySupplier": "",

				"POApprovedbyProgrammer": "",

				"POPicked": "",

				"POLoaded": "",

				"POAcknowledged": "",

				"PurchaseId": "L099000543",

				"PurchaseName": "sample Purchase1",

				"Status": "POCreated",

				"CreatedOn": "10042019",

				"CreatedBy": "persion1",

				"ApprovedBySupply": "Person1",

				"ApprovedOn": "",

				"ApprovedBy": "",

				"ApprovedByProgramme": "Person2",

				"ChiefOfProgramme": "Person3",

				"POType": "ZLO",

				"RecommendedDelDate": "02052019",

				"POPicStatus": "",

				"POPickedOn": "",

				"POLoadedOn": "",

				"POAck": ""

			}, {

				"PONum": "54278667",

				"POCreate": "X",

				"POApprovedbySupplier": "X",

				"POApprovedbyProgrammer": "",

				"POPicked": "",

				"POLoaded": "",

				"POAcknowledged": "",

				"PurchaseId": "L099000669",

				"PurchaseName": "sample Purchase2",

				"Status": "POApprovedbySupplier",

				"CreatedOn": "04042019",

				"CreatedBy": "Person1",

				"ApprovedBySupply": "Persion1",

				"ApprovedOn": "",

				"ApprovedBy": "Persion1",

				"ApprovedByProgramme": "Person2",

				"ChiefOfProgramme": "Person3",

				"POType": "ZLO",

				"RecommendedDelDate": "22042019",

				"POPicStatus": "",

				"POPickedOn": "",

				"POLoadedOn": "",

				"POAck": ""

			}, {

				"PONum": "54278881",

				"POCreate": "X",

				"POApprovedbySupplier": "X",

				"POApprovedbyProgrammer": "X",

				"POPicked": "",

				"POLoaded": "",

				"POAcknowledged": "",

				"PurchaseId": "L099000544",

				"PurchaseName": "sample Purchase Name",

				"Status": "POApprovedbyProgrammer",

				"CreatedOn": "01042019",

				"CreatedBy": "Person1",

				"ApprovedBySupply": "Person2",

				"ApprovedOn": "15042019",

				"ApprovedBy": "",

				"ApprovedByProgramme": "Person2",

				"ChiefOfProgramme": "Person3",

				"POType": "ZLO",

				"RecommendedDelDate": "17042019",

				"POPicStatus": "",

				"POPickedOn": "",

				"POLoadedOn": "",

				"POAck": ""

			}, {

				"PONum": "54277437",

				"POCreate": "X",

				"POApprovedbySupplier": "X",

				"POApprovedbyProgrammer": "X",

				"POPicked": "X",

				"POLoaded": "",

				"POAcknowledged": "",

				"PurchaseId": "L099000232",

				"PurchaseName": "sample Purchase3",

				"Status": "POPicked",

				"CreatedOn": "02042019",

				"CreatedBy": "Person1",

				"ApprovedBySupply": "Person2",

				"ApprovedOn": "04042019",

				"ApprovedByProgramme": "Person2",

				"ApprovedBy": "Approval1",

				"ChiefOfProgramme": "Person3",

				"POType": "ZLO",

				"RecommendedDelDate": "05042019",

				"POPicStatus": "partially",

				"POPickedOn": "",

				"POLoadedOn": "",

				"POAck": ""

			}, {

				"PONum": "54278968",

				"POCreate": "X",

				"POApprovedbySupplier": "X",

				"POApprovedbyProgrammer": "X",

				"POPicked": "X",

				"POLoaded": "X",

				"POAcknowledged": "",

				"PurchaseId": "L099000540",

				"PurchaseName": "sample Purchase4",

				"Status": "POLoaded",

				"CreatedOn": "17042019",

				"CreatedBy": "Person3",

				"ApprovedBySupply": "person2",

				"ApprovedOn": "18042019",

				"ApprovedBy": "Approval2",

				"ApprovedByProgramme": "Person2",

				"ChiefOfProgramme": "Person3",

				"POType": "ZLO",

				"RecommendedDelDate": "25042019",

				"POPicStatus": "fully",

				"POPickedOn": "2604019",

				"POLoadedOn": "",

				"POAck": ""

			}];

			wizardModel.setData(Wdata);

			that.getView().setModel(wizardModel, "wizardModel");

		},

		onCheckStatus: function (oEvent) {

			var that = this;

			var PONum = that.getView().getModel("viewInitialModel").getProperty("/PONumber");

			that.getView().getModel("viewInitialModel").setProperty("/visibleWizard", true);   

// getting static data 

			var sData = that.getView().getModel("wizardModel").getData();

//added filter to get purchase order details based on given input value.

			var sObj = sData.filter(function (item) {

				return item.PONum === PONum;

			});

// Initialize model to display purchase order details.

			var POStatusModel = new JSONModel(sObj[0]);

			that.getView().setModel(POStatusModel, "POStatusModel");

		

// change current step dynamically.

that.getView().byId("POStatusWizard").setCurrentStep(that.byId(sObj[0].Status));

		}

Description:

JSON data created in onInit method to display PO status details. Once we click on check status button onCheckStatus method will trigger to display status of that particular PO Number.

In the above controller code, we need to filter data based on PO Number given in the input.

Output:

Before enter PO number in input

After enter PO Number in input click check status button see the output as below screen shot.

 

 

Conclusion: Hope this blog will give a clear view to use wizard control. I hope this Blog was helpful and understand the concept of wizard dynamic step change.

Thanks for Reading.

Stay home Stay safe.

Thank You

Praveen Nalajala