Customizing the Customer Details View 

Use

The Customer Details view is the default view of the application. When the application is accessed from the SAP NetWeaver Mobile client, this is the first view that is displayed.

The view should have the following UI elements:

·        Customer table: It should display all the attribute values of the Customer data object.

·        Show Orders button: On activation, the application should call the fireQuery method and navigate to the Order Details view.

·        Exit button: On activation, the application should exit from the window. For this, you have to call the exit method you defined in the CustomerCompWindow.

Procedure

...

       1.      In the Laptop UI explorer, expand the servapp development component

       2.      Expand the nodes Web Dynpro → Components  → CustomerComp → Views.

       3.      Double-click the CustomerDetails view.

       4.      Choose the Properties tab.

       5.      Choose Add, and select CustomerCompWindow as the required controller.

       6.      Choose Save, and then choose the Layout tab.

       7.      In the Outline view of the SAP NetWeaver Developer Studio, click RootUIElementContainer with the secondary mouse button and choose ApplyTemplate.

       8.      Select the Table template, and enter Customer as the table name.

       9.      Select the attributes of the Customer node, and choose Finish.

§         In the Outline view of the SAP NetWeaver Developer Studio, arrange the order in which the columns should appear on the UI. You arrange the order by selecting the table attribute with the secondary mouse button and choosing either of the options Move Up or Move Down.

§         Enter the name for the column headers. Each table attribute has a header attribute and an editor attribute. You enter the name in the text property of the header attribute.

   10.      In the Outline view of the SAP NetWeaver Developer Studio, click RootUIElementContainer with the secondary mouse button and choose Insert Child.

   11.      Choose Button, and enter Show Orders for the button ID

   12.      In the Properties tab for the button, perform the following actions:

Property	Actions
Text	Enter ShowOrders
OnAction	a.      Choose Create and enter the following details: Name: ShowOrders Fire Plug: ToOrderDetails                             b.      Choose Finish.

   13.      Choose Save.

   14.      In the Outline view, double-click the Show Orders button.

   15.      In the Properties tab, select the OnAction property and choose Go.

   16.      Enter the following code:

ShowOrders method

public void onActionShoworders(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )   {     //@@begin onActionShoworders(ServerEvent)      wdThis.wdGetCustomerCompController().fireQuery();      wdThis.wdFirePlugToOrderDetails();     //@@end   }

   17.      In the Outline view of the SAP NetWeaver Developer Studio, click RootUIElementContainer with the secondary mouse button, and choose Insert Child.

   18.      Choose Button, and enter Exit for the button ID.

   19.      In the properties tab for the button, perform the following actions:

Property	Actions
Text	Enter Exit
OnAction	a.      Choose Create and enter the following details: Name: ExitApp                             b.      Choose Finish.

   20.      Choose Save.

   21.      In the Outline view, double-click the Exit button.

   22.      In the Properties tab, select the OnAction property and choose Go.

   23.      Enter the following code:

ExitApp method

public void onActionExitApp(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )   {      //@@begin onActionExitApp(ServerEvent)       wdThis.wdGetCustomerCompWindowController().wdFirePlugExit();      //@@end   }