3.5.4. Customer Editor With a List of Orders

Do the following to display the list of Orders in the Customers edit screen:

  • Go to the GENERIC UI tab on the navigation panel. Choose customer-edit.xml screen and click Edit.

  • Go to the Datasources tab on the screen designer page and click New.

  • Select the newly created data source in the list. Its attributes will appear in the right part of the page.

  • Specify collectionDatasource in the Type field.

  • Select com.sample.sales.entity.Order entity in the Entity list.

  • The data source identifier − ordersDs - will be automatically generated in Id field.

  • Select _local view in the View list.

  • Enter the following query in the Query field:

    select o from sales$Order o where o.customer.id = :ds$customerDs order by o.date

    The query contains orders selection criterion with ds$customerDs parameter. The parameter value named like ds${datasource_name} will contain id of the entity selected in datasource_name datasource at the moment, in this case it is the id of the Customer being edited.

    qs customer screen orders ds
  • Click Apply to save the changes.

  • Next go to the Layout tab in the screen designer and find the Label component in the components palette. Drag this component to the screen components hierarchy panel and place it between fieldGroup and windowActions. Go to the Properties tab in the properties panel. Enter msg://orders in the value field. Click the localization button next to the value field and define label values in available languages.

    qs customer screen label

If the application is not intended to be used in multiple languages, the value in the value field can be entered straight in the required language.

  • Drag Table from the components palette to components hierarchy panel and place it between label and windowActions. Select this component in the hierarchy and specify table size in properties on the Layout tab: set 100% in the width field and 200px in the height field.

    Go to the Properties tab. Set ordersTable value as id, choose orderDs from the list of available datasources.

    qs customer screen table
  • Click OK in the top panel to save the changes in the screen.