Show TOC

Procedure documentationAdding a Second Data Service and Preparing for Reuse Locate this document in the navigation structure

 

This section describes how to add a second data service to your model to retrieve a list of sales orders for a specific buyer. It covers how to:

  • Add a second data service to your model

  • Use panels to control layout options

  • Add a connector to prepare for componentization and reuse

Procedure

  1. Open the model:

    If the SalesOrderByBuyer model is not already open, open it.

  2. Discover and define the second data service:

    Note Note

    We will search for the service in the Services Registry. Remember that you need to define a destination for the physical system in which the service resides, so that it can be accessed at runtime.

    You define destinations for the physical systems using the same procedure that you used in the Before You Begin section of the first tutorial. More information: Creating the Base Model for Retrieving Product Information

    End of the note.

    1. Click the Search button in the task-panel toolbar. The Search task panel is displayed.

    2. From the Search in dropdown list, choose Services Registry and click the Search… button. The Services Registry Wizard is displayed.

    3. In the Find field, enter SalesOrderIDByBuyer and click Next. The WSDL PortType Name that we need – SalesOrderIDByBuyerQueryReponseIn – is displayed.

    4. Click Next to display the defined endpoints for the service. The service we selected has a single endpoint with a single operation.

    5. Click Finish to add the operation to the Search task panel.

    6. Drag the operation onto the Design board. The Define Ports dialog box is displayed.

    7. Highlight the SalesOrderIDByBuyerQuery node under In Ports. In this case, we only need one field as input – the BuyerID field directly under the SalesOrderIDSelectionByBuyer complex field. Select the checkbox next to the BuyerID field.

    8. Expand the SalesOrderIDByBuyerResponse node under Out Ports, and then highlight the SalesOrderID node. Select the ID field (under the ID complex field).

    9. Click OK.

  3. Define the data flow, connecting lines, and mappings:

    1. Drag from the BusinessPartnerByIDResponse out port of the first data service to the SalesOrderIDByBuyerQuery in port of the second data service. A data map connecting line joins the two data services.

    2. To map the BuyerID field from the output of the first data service to the BuyerID field in the input of the second data service, double-click the new data map line to define the data mapping. The Map Data dialog box is displayed.

    3. Select the mapping line between the two root nodes, and in the Assigned Value column of the bottom pane of the dialog box, expand the SalesOrderIDSelectionByBuyer node.

    4. In the Assigned Value column of the Buyer field, choose Define expression from the dropdown list. The Dynamic Expression Editor dialog box is displayed.

    5. Locate and select the BuyerID field in the second data service as follows:

      1. Expand the Data Fields node.

      2. Expand the BusinessPartnerByIDQueryResponseIn.BusinessPartnerByIDQuery node.

      3. Expand the BusinessPartnerSelectionByID node.

      4. Double-click the ID field to add it to the expression pane.

      5. Click Check to check that the expression syntax is valid and then click OK.

    6. Click Close to close the Map Data dialog box.

  4. Define the output:

    1. To define the output UI element of the second data service – a table showing the sales orders for the current buyer – drag out from the SalesOrderIDByBuyerResponse port and choose Table View from the context menu. The Define Data dialog box is displayed.

    2. In the right pane of the dialog box, click the Delete all controls defined for fields in the view (Delete all controls defined for fields in the view) button and then select the SalesOrderID node in the left pane. Make sure that the Add/Remove Control (Add/Remove Control) next to the ID field displays a checkmark (click it if it does not) to add a column to the table for that field.

    3. Click Close. A new output table with one column is added to Storyboard. Your model should look similar to this:

      Sales Order ID Output Table (Sales Order ID Output Table)

  5. Save, deploy, and view your model:

    1. Deploy and run the application.

    2. In the runtime application, in the Buyer ID field, enter the value 14 and click Submit. The results should be similar to this:

      Runtime Application (Runtime Application)

  6. Arrange the layout:

    Note that the table with the list of sales order IDs takes up the full width of the application window. Since the table only contains one column, we can make it narrower and place it to the right of the Buyer Details form. To do this, we need to place the two output views in a panel, so we can give them a horizontal flow, while keeping the overall application flow vertical.

    1. From the Compose task panel, drag-and-drop a Panel container onto the Design board. The arrow at the top-left corner of the panel indicates whether the panel contents are arranged vertically or horizontally. If the arrow is pointing down, select the panel and in the Configure task panel choose Horizontal flow in the Layout property. (If the arrow is pointing to the right, the panel contents are already configured horizontally.)

    2. Drag the Buyer Details and SalesOrderID views into the panel. (Drop the views into the panel when the panel is highlighted in orange.)

    3. Select the SalesOrderID table and press F2. Rename the table Sales Orders.

    4. Switch to the Layout board. Make sure that the Buyer Details form is to the left of the SalesOrderID table. If it is not, then drag the form to place it to the left of the table.

    5. Select the Buyer Details form and drag the right-center handle to the right to widen the form, until the form columns are wide enough to display the field labels.

    6. Rename the ID field in the table Sales ID. The model should look similar to this:

      Sales Order By Buyer Layout (Sales Order By Buyer Layout)

  7. Save, deploy, and view your model:

    1. Deploy the model and run the application.

    2. In the runtime application, in the Buyer ID field, enter the value 12 and click Submit. The results should be similar to this:

      Runtime Application (Runtime Application)

  8. Prepare the component for reuse:

    To be able to reuse the component in other models, and be able to connect it to other model elements, we need to define signals (connectors) that will define the component interface. We will take the sales order ID entered by the runtime user in this component and use it as input to another component that will display details about the selected sales order.

    1. On the Design board, drag out from the out port of the SalesOrderID table and choose Signal Out from the popup menu.

    2. Double-click the connecting line to open the Map Data dialog box. Expand the ID complex field. You can see that the ID field from the SalesOrderID table is automatically mapped to the ID field in the Signal Out connector.

    3. Select the connecting line and display the Configure task panel. Define the following properties to specify which data should be transferred via the connector, and which event triggers the data transfer:

      1. In the Event name field, choose select from the dropdown list. This event automatically transfers the data from the selected row.

      2. In the Select mode field, select Current data row, so that data for only the currently selected row at runtime is transferred via the connector.

    4. Click in an empty area of the Design board so that nothing is selected and then display the Configure task panel. In the Main Window group of properties, deselect the Show title checkbox, because we do not need to see the component title at runtime since we are going to nest it in another component. The model should look similar to this:

      Model Prepared for Reuse (Model Prepared for Reuse)

  9. Save the model.

Result

You have now added a second data service to your model and prepared it for reuse. In the next section, Reusing a Model and Enabling Personalization, you will reuse the SalesOrderByBuyer model within a new model, and learn how to use SAP List Viewer features.