Show TOC

Procedure documentationCustomizing the Customer Details View Locate this document in the navigation structure

 

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:

  • Customertable: It should display all the attribute values of the Customerdata 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 servappdevelopment 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 Tabletemplate, and enter Customer as the table name.

  9. Select the attributes of the Customernode, and choose Finish.

    Note Note

    • 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.

    End of the note.

  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 Propertiestab for the button, perform the following actions:

    Property

    Actions

    Text

    Enter ShowOrders

    OnAction

    1. Choose Create and enter the following details:

      Name: ShowOrders

      Fire Plug: ToOrderDetails

    2. Choose Finish.

  13. Choose Save.

  14. In the Outline view, double-click the Show Ordersbutton.

  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

    1. Choose Create and enter the following details:

      Name: ExitApp

    2. Choose Finish.

  20. Choose Save.

  21. In the Outline view, double-click the Exitbutton.

  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