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

Fig 1.1.png

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

fig 1.2.png

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:

Fig 1.3.png

     In the figure displayed above:

     Phase1 will have following properties:

Fig 1.4.png

    Phase2 will have following properties:

Fig 1.5.png

   Phase 3 will have following properties:

Fig 1.6.png

Thus we will have the following structure:

Fig 1.7.png

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

Fig 1.8.png

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

     Fig 1.9.png

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:

     Fig 2.0.png

7.In Payment View

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

Fig 2.1.png

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.

Fig 2.2.png


8. In UiWindow


     Embed all the three views in UICompView

Fig 2.3.png


  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:

Fig 2.4.png

when clicked on Next button:

Fig 2.5.png

when clicked to form submission view:

Fig 2.6.png




To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

    1. Nimisha Girijan Post author

      Hi Digant,

      Sorry to say that iam not from ABAP background so do not have much idea on it .Although if it is on WD Abap i believe the properties would be the same for the UI element only the mannerisms would be controlled via ABAP coding.

      Regards,

      Nimisha Girijan

      (0) 

Leave a Reply