Show TOC

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

 

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 displaythe attribute values of the Servicedata 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 UIexplorer, expand the servappdevelopment component.

  2. Expand the nodes   Web Dynpro   Components   CustomerComp   Views.  

  3. Double-click the OrderDetails view.

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

  5. Select the Tabletemplate, and enter Orders as the table name.

  6. Select the attributes of the QueryResultnode, and choose Next.

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

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

    End of the note.

  8. In the Outline view of the 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 avebutton.

  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.