Show TOC

Customizing the Order Details ViewLocate this document in the navigation structure

Context

The Order Details view displays the orders for the selected customer. The user selects the customer in the Customer Details view.

The view should have the following UI elements:

  • Orders table: It should display the attribute values of the Service data object. It should display only the orders of the selected customer and should allow the user to enter/ update specific values in the table.

  • Save button: On activation, the application should save the values entered in the Orders table to the local database.

  • Back button: On activation, the application should navigate to the Customer Details view.

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 OrderDetails view.

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

  5. Select the Table template, and enter Orders as the table name.

  6. Select the attributes of the QueryResult node, and choose Next .

  7. For the attributes EQUIPTYPE , HOURS_SPENT , and PERC_DONE - select InputField as the Editor .

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

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

  9. Choose Button , and enter Save for the button ID

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

    Property

    Actions

    Text

    Enter Save

    OnAction

    1. Choose Create and enter the following details:

      Name: Save

    2. Choose Finish.

  11. Choose Save .

  12. In the Outline view, double-click the S ave button.

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

  14. Enter the following code:

    Variable declaration

    //@@begin others

    ServiceModels model = ServiceModels.getInstance();

    //@@end

    Save method

    public void onActionSave(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

    {

    //@@begin onActionSave(ServerEvent)

    model.commit();

    //@@end

  15. Choose Button , and enter Back for the button ID.

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

    Property

    Actions

    Text

    Enter Back

    OnAction

    1. Choose Create and enter the following details:

      Name: Back

      Fire Plug: ToCustomerDetails

    2. Choose Finish .