Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 

1.0   Purpose

This article will guide you through step by step process for using ViewSwitch UI or conceptual panel in web Dynpro java in NWDS 7.3 environment.

2.0   Assumptions

The following Development components are already created:

1.        Web Dynpro development component

2.        View

3.        Window is created and view is embedded.

4.        Application is created to call this window.

3.0   Step By Step Procedure

Step 1: Adding Conceptual panel in root Element in our view screen.

Go to Outline view right click on root Element -> insert child -> select conceptual panel ->click ok

Step 2: Adding ViewSwitch UI in conceptual panel.

Right click on conceptual panel ->insert child-> select ViewSwitch->click ok

Step 3Add View container UI in same view for holding the different screens which we wants to show on click of particular row of view switch. Set the vAlign property of View container UI as top.

Step 4Create context node and attributes in component controller of below mentioned type

CTX_VA_ENABLE                   -               Boolean

CTX_VA_IMAGE                       -               ViewSwitchIcon

CTX_VA_VWSWTCH              -               String

You can select the type as below for CTX_VA_IMAGE from packege com.sap.ide.webdynpro.uielementlibraries.pattern

Step 5Map this node to view controller by drag drop

Step 6: Bind below properties of ViewSwitch UI as below

Step 8:  write the below code in wdDoinit of view controller

  1. IPublicViwSwitchComp.IContextNode l_context=wdThis.wdGetViwSwitchCompController().wdGetContext();

            ICTX_VA_ViewSwitchElement l_param_eml;

            l_param_eml = wdContext.createCTX_VA_ViewSwitchElement();        

            l_param_eml.setCTX_VA_VWSWTCH("1. View");

            l_param_eml.setCTX_VA_ENABLE(true);

            l_param_eml.setCTX_VA_IMAGE(WDViewSwitchIcon.OVERVIEW);

            wdContext.nodeCTX_VA_ViewSwitch().addElement(l_param_eml);

            l_param_eml = wdContext.createCTX_VA_ViewSwitchElement();              

            l_param_eml.setCTX_VA_VWSWTCH("2. View");

            l_param_eml.setCTX_VA_ENABLE(true);

            l_param_eml.setCTX_VA_IMAGE(WDViewSwitchIcon.WORK);

            wdContext.nodeCTX_VA_ViewSwitch().addElement(l_param_eml);

            l_param_eml = wdContext.createCTX_VA_ViewSwitchElement();              

            l_param_eml.setCTX_VA_VWSWTCH("3. View");

            l_param_eml.setCTX_VA_ENABLE(true);

            l_param_eml.setCTX_VA_IMAGE(WDViewSwitchIcon.REPORT);

            wdContext.nodeCTX_VA_ViewSwitch().addElement(l_param_eml);

            l_param_eml = wdContext.createCTX_VA_ViewSwitchElement();              

            l_param_eml.setCTX_VA_VWSWTCH("4. View");

            l_param_eml.setCTX_VA_ENABLE(true);

            l_param_eml.setCTX_VA_IMAGE(WDViewSwitchIcon.BLANK);

            wdContext.nodeCTX_VA_ViewSwitch().addElement(l_param_eml);

            wdContext.nodeCTX_VA_ViewSwitch().setLeadSelection(0);

Here we are keeping enabled all the nodes we can change as per requirement or restricting user for selecting any step of viewswitch.

Step 9Create 4 views and added a text view to distinguish between them as here we are demonstrating 4 views.

           

           

Step 10: Embed view View1, View2, View3, View4, in view container of the ViwSwitchCompView view and addthe plug  and navigation link as below, givening name to outbound plug as Out1, Out2, Out3 and Out4.

Step 11: Create Event on Select Action of Vwswitch UI as “ViewSwitch” add parameter to this event as “NodeElement” of type IWDNodeElement

Click on create button

Give name and Click next

Add parametes: click on new button

Give parameter name and type->Finish

Note: We can also create index parameter of type integer and map to index parameter of ViewSwitch UI given in step 11.

Step 10:Write the code in action onActionViewSwitch

public void onActionViewSwitch(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent

wdEvent, com.sap.tc.webdynpro.progmodel.api.IWDNodeElement NodeElement )

       {

              //@@begin onActionViewSwitch(ServerEvent)

     

              switch (NodeElement.index()) {

              case 0:{

                     wdThis.wdFirePlugOut1();

                     break;

              }                   

              case 1:{

                     wdThis.wdFirePlugOut2();

break;

              }                   

              case 2:{                  

                     wdThis.wdFirePlugOut3();

                     break;              

              }                   

              case 3:{

                     wdThis.wdFirePlugOut4();

                     break;

              }

              default:

                     break;

              }

               wdContext.nodeCTX_VA_ViewSwitch().setLeadSelection(NodeElement.index());

              //@@end

}

Step 11: Parameter mapping          

Right click on ViewSwitch UI ->select  Parameter mapping

Drag and drop NodeElement as below and click ok

Step 12: Deploy and run application.

Output:

Labels in this area