Show TOC

Customizing the Customer Details ViewLocate this document in the navigation structure

Context

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 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 Start of the navigation path Web Dynpro Next navigation step Components  Next navigation step  CustomerComp  Next navigation step  Views. End of the navigation path

  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 .

    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.

  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

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

    1. Choose Create and enter the following details:

      Name: ExitApp

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