How to use Phase Indicator in Webdynpro Java -By Nimisha Girijan

This document will discuss the details and properties of Phase indicator UI element in webdynpro java.

About Phase Indicator UI Element:

“Similar to the Roadmap UI element, the PhaseIndicator UI element displays the steps in a wizard. Each step is represented by a separate Phase object. As opposed to using the RoadMap UI element, the application development can display larger steps using the PhaseIndicator UI element which may require more time by the user.”

Source:SAP Help

How to use Phase Indicator:

1.Create a webdynpro development component with the name wd\testui and structure as mentioned below

2. In UIComp-i.e Component Controller create the context nodes and attributes as follows with collection cardinality 1..1 and selection cardinality 0..1

3.Node Structure are as follows

CTX_VN_Enable-Node-Collection Cardinality 1..1 selection cardinality 0..1

All the attributes under this node is of type boolean        

CTX_VN_Phase-Node-Collection Cardinality 1..1 selection cardinality 0..1

CTX_VA_Phase            –  Datatype -Phase

CTX_VA_Phase_1         –  Datatype -Phase

CTX_VA_Phase_2         –  Datatype –Phase

CTX_VA_PhaseIndicator –Datatype –String

4 . In UICompView Right Click on Root Element in Outline view and Add UI element PhaseIndicator and insert three phases in it as depicted in the below figure:

     In the figure displayed above:

     Phase1 will have following properties:

    Phase2 will have following properties:

   Phase 3 will have following properties:

Thus we will have the following structure:

5. In the event tab of Phase Indicator create an event called Navigate with a parameter of data type String named p_step

          Also do the parameter mapping of Phase Indicator of p_step to  Phase as shown below:

    

6.In  FillingOfProduct View-

     Add a Text View with Description “You are in Product Filling View” and a button with text “Next” with action of ToPaymentView as shown below:

    

7.In Payment View

Add a Text View with Description “You are in Payment View” and a button with text “Next” with action ToSubmission

7.In Form Submission View

Add a Text View with Description “You are in Form Submission View” and a button with text “Back To Home Page” with action ToFillingOfProductView.

8. In UiWindow

     Embed all the three views in UICompView

1. 9.For Each View create Inbound and Outbound plugs

     FillingOfProduct View

Inbound Plug-	OutBoundPlug	Link
InFillingView	ToPaymentView	From To PaymentView to InPayment View Plug of PaymentView Link-Event called on Next button of Filling of product View

Code on this action would be:

      wdContext.nodeCTX_VN_Phase().currentCTX_VN_PhaseElement().setCTX_VA_Phase(WDPhaseStatus.COMPLETED);

      wdContext.nodeCTX_VN_Phase().currentCTX_VN_PhaseElement().setCTX_VA_Phase_1(WDPhaseStatus.WARNING);

      wdContext.nodeCTX_VN_Enable().currentCTX_VN_EnableElement().setCTX_VA_PhaseEnable1(false);

      wdContext.nodeCTX_VN_Enable().currentCTX_VN_EnableElement().setCTX_VA_PhaseEnable2(true);

      wdContext.nodeCTX_VN_Enable().currentCTX_VN_EnableElement().setCTX_VA_PhaseEnable3(false);

      wdThis.wdFirePlugToPayment();

Payment View

Inbound Plug-	OutBoundPlug	Link
InPaymentView	ToSubmissionView	From To SubmissionView to InSubmission View Plug of FormSubmission View Link-Event called on Next button of PaymentView

Code on this action would be:

   wdContext.nodeCTX_VN_Phase().currentCTX_VN_PhaseElement().setCTX_VA_Phase(WDPhaseStatus.COMPLETED);

      wdContext.nodeCTX_VN_Phase().currentCTX_VN_PhaseElement().setCTX_VA_Phase_1(WDPhaseStatus.COMPLETED);

      wdContext.nodeCTX_VN_Phase().currentCTX_VN_PhaseElement().setCTX_VA_Phase_2(WDPhaseStatus.WARNING);

      wdContext.nodeCTX_VN_Enable().currentCTX_VN_EnableElement().setCTX_VA_PhaseEnable1(false);

      wdContext.nodeCTX_VN_Enable().currentCTX_VN_EnableElement().setCTX_VA_PhaseEnable2(false);

      wdContext.nodeCTX_VN_Enable().currentCTX_VN_EnableElement().setCTX_VA_PhaseEnable3(true);

      wdThis.wdFirePlugToSubmission();

FormSubmission View

Inbound Plug-	OutBoundPlug	Link
InFormSubmissionView	ToFillingView	From ToFillingView to InFilling View Plug of Product View Link-Event called on Back to Home button of FormSubmissionView

Code on this action would be

     wdThis.wdFirePlugBackToHomePage();

UICompView

OutBoundPlug	In Bound Plug	Link
From Filling FromPayment FromSubmission	InFillingView InPayment InSubmission	onActionNavigate event of Phase Indicator

Code for onActionNavigate

onActionNavigate(wdEvent ,java.lang.String p_Step)

{

if(p_Step.equalIgnorecase(“Phase”))

{

      wdContext.nodeCTX_VN_Phase().currentCTX_VN_PhaseElement().setCTX_VA_PhaseIndicator(p_Step);

               wdThis.wdFirePlugInfilling();

}

else if(p_Step.equalIgnorecase(“Phase1”))

{

      wdContext.nodeCTX_VN_Phase().currentCTX_VN_PhaseElement().setCTX_VA_PhaseIndicator(p_Step);

               wdThis.wdFirePlugInPayment();

}

else if(p_Step.equalIgnorecase(“Phase2”))

{

       wdContext.nodeCTX_VN_Phase().currentCTX_VN_PhaseElement().setCTX_VA_PhaseIndicator(p_Step);

               wdThis.wdFirePlugInSubmission();

}

}

9.Deploy the dc and run the application:

When the application is run:

when clicked on Next button:

when clicked to form submission view: