Open the SalesOrderDetails model if it is not already open.

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

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

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

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

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

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

Select the checkbox next to the ProductByIDAndDescriptionQuery node under In Ports. In the Fields pane, make sure that only ProductID and MaximumNumberValue are selected.

Under Out Ports, expand the nodes and select only the following fields:

Click OK.

Drag from the out port of the Item Details table to the in port of the data service you just added. A data map connecting line joins the two elements.

Double-click the new data map line to define the data mapping. The Map Data dialog box is displayed.

To map the ID field from the output of the Item Details table to the ProductID field in the input of the data service, select the mapping line between the two root nodes. In the ProductID row of the Assigned Value column in the lower part of the dialog box, choose ID from the dropdown list.

In the MaximumNumberValue row of the Assigned Value column in the bottom pane of the dialog box, enter the default value 10.

Click Close.

To define the output UI element, a form showing details for the product selected in the Item Details table, drag out from the ProductByIDAndDescriptionResponse port of the data service and choose Form View from the context menu. The Define Data dialog box is displayed.

Select the Product node on the left and click Deselect All. Add controls for the following fields: ProductID, CategoryID, ProductPrice, and currencyCode (make sure that you add controls for only these fields, and not the complex fields). Click Close. A new output form is added to Storyboard. Your model should look similar to this:

(Model with Product Form)

Save your model.

Switch to the Layout board.

In the Product form, reorder, rename, and resize the UI controls and layout so it looks similar to this:

(Layout of Product Details Form)

We also want to display the product description in the Product Details form. However, the field that contains this data is nested in a clustered dataset, so we cannot add it the way that we added the other fields. We can add a control to display the data and then define a dynamic expression for the field value of the control:

From the Compose task panel, drag a Popup container to the right-side of the Design board and rename it Product Details.

In the Configure Popup task panel, clear the Cancel button checkbox and click Yes in the confirmation dialog box (so that the popup window will have only an OK button).

Drag the Product Details form into the popup container and in the Configure Form View task panel, clear the Show title checkbox (we do not need to show the form title since the popup window also has a title).

Right-click the popup container and choose Layout Board from the context menu to display the layout of the popup container and its contents. Resize the form and the popup window to fit the controls in the form and then click (Close) in the Layout board title bar to close the window.

Now we want to add a button to the Item Details table that opens the popup showing details for the product that is selected in the Item Details table.

Select the Item Details table and switch to the Layout board.

Drag a Button control from the Compose task panel to the toolbar of the table and rename the button Product Details.

Right-click the button and choose Action from the context menu.

In the Define Action dialog box, click (Add Action) and choose  More Open Window . In the Window field on the right, select Product Details (the name of the popup container) and click Close.

Deploy the model and run the application.

In the runtime application, select Saskia Sommer in the Buyer ID field and click Submit. The Item Details table now has a Product Details button in its toolbar and should look similar to this:

(Runtime Application)

Select a row in the table and click the Product Details button to display information about the selected product in a popup window:

(Product Details Popup Window)