Show TOC

Procedure documentationAdding a Product Image Locate this document in the navigation structure

 

This section describes how to add an image of each product to the popup container. It covers how to:

  • Use the Redefine Ports functionality to select additional fields to be output from a data service

  • Add an image control

  • Use the image browser to specify the image to display

Procedure

  1. Add the field that contains the image URL:

    The ProductByIDAndDescriptionQueryResponse_In data service contains a field that provides a URL that contains an image for each product ID. However, in the previous lesson, we did not select this field for use, so we need to redefine the ports of the data service to include this field:

    1. On the Design board, right-click the ProductByIDAndDescriptionQueryResponse_In data service and choose Redefine Ports from the context menu.

    2. Do not change any of the field and node selections that you made previously. Under Out Ports, expand all the nodes. Highlight the WebResource node and select the Address field in the right pane. This is the field that contains the image URL.

    3. Click OK.

  2. Add an image control and define its properties:

    1. Right-click the popup container and choose Layout Board from the context menu.

    2. From the Compose task panel, drag an Image control to the Product Details form, directly below the Description control.

    3. Resize the form and the popup window to fit the controls in the form.

    4. Select the Image control and in the Configure task panel, clear the checkbox for the Indent field. This removes the control label and aligns it to the left of the form.

    5. Right-click the Image control and choose Browse from the context menu.

    6. In the Selected Images area on the right, click the Add Row (Add Row) button and in the URL field, select Define expression from the dropdown list.

    7. In the Dynamic Expression Editor dialog box, navigate to the following node in the tree on the right:   Data Fields   ProductByIDAndDescriptionQueryResponse_In.ProductByIDAndDescriptionResponse   Product   WebResource   . Then double-click the Address field that is located under the WebResource node and click OK, then OK again.

  3. Save, deploy, and view the application:

    1. Deploy the model and run the application.

    2. Click the SalesOrderDetails link and in the Buyer ID field, select a buyer name and click Submit.

    3. Select a row in the table and click the Product Details button to display information about the selected product in a popup window. The popup window now contains an image of the product:

      Product Details Popup Window with Image (Product Details Popup Window with Image)

Result

Congratulations! You have now completed the final tutorial. You can use the knowledge you have gained to start modeling your own applications using Visual Composer.