Using ViewSwitch UI in Web Dypro java (NWDS 7.3)
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 3: Add 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 4: Create 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 5: Map 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
- 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 9: Create 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:
