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

/wp-content/uploads/2014/04/1_433377.png

/wp-content/uploads/2014/04/2_433378.png

Step 2: Adding ViewSwitch UI in conceptual panel.

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

/wp-content/uploads/2014/04/3_433388.png

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.

/wp-content/uploads/2014/04/23_434454.png

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

/wp-content/uploads/2014/04/5_433394.png

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

/wp-content/uploads/2014/04/6_433396.png

/wp-content/uploads/2014/04/7_433401.png

Step 5Map this node to view controller by drag drop

/wp-content/uploads/2014/04/8_433402.png

Step 6: Bind below properties of ViewSwitch UI as below

/wp-content/uploads/2014/04/9_433403.png

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.

/wp-content/uploads/2014/04/10_433404.png

/wp-content/uploads/2014/04/11_433405.png           

           

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.

/wp-content/uploads/2014/04/12_433409.png

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

/wp-content/uploads/2014/04/13_433410.png

Give name and Click next

/wp-content/uploads/2014/04/14_433411.png

Add parametes: click on new button

/wp-content/uploads/2014/04/15_433412.png

Give parameter name and type->Finish

/wp-content/uploads/2014/04/16_433413.png

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

/wp-content/uploads/2014/04/18_433414.png

Drag and drop NodeElement as below and click ok

/wp-content/uploads/2014/04/19_433421.png

Step 12: Deploy and run application.

Output:

/wp-content/uploads/2014/04/24_434457.png

/wp-content/uploads/2014/04/25_434458.png

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply