Creating the Base Model for Retrieving Product Information

1. Click . The Create New Model dialog box is displayed.

2. We are creating a Composite View component. The option is selected by default. In the Name field, enter ProductDescription as the model name.

3. In the Runtime dropdown list, select Web Dynpro.

4. In the Repository dropdown list, select Local Repository.

5. In the Software Component dropdown list, leave the defaults shown: sap.com_UWSoftwareComponent. This default software component was automatically selected when you selected Local Repository in the previous step.

6. In the Development Component field, we will create a new development component for our models. To do so:

   1. Click New to the right of the Development Component dropdown list. The Create New Development Component dialog box is displayed.

   2. In the Development component field, type tutorials .

   3. Click OK . The name tutorials is added to the dropdown list.

7. From the Development Component dropdown list, choose tutorials and click OK . The ProductDescription model is created and saved in the new tutorials development component. The Design board is displayed with a tab at the top left showing the model name.

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

2. From the Search in dropdown list, scroll down and choose QueryProduct (WebService) .

3. Click Search . The data service we need - ProductQueryReponse_In - is displayed in the Results pane, possibly with other Web service operations that have similar names.

4. Drag the ProductQueryReponse_In operation onto the Design board. The Define Ports dialog box is displayed. When the selected data service processes a large amount of data, this dialog box is automatically displayed to enable you to define the specific ports and fields that are input to and returned from the data service.

5. To define the input port, in the top-left pane, select (click checkbox) the ProductQuery (ProductSelection) node under In Ports . When you select a node in the left pane, its fields are displayed in the right pane and all fields are selected. In this case, a single field - MaximumNumberValue - is displayed (and selected). This field is used to indicate the number of records to retrieve from the database.

6. To define the output port, expand the ProductResponse node under Out Ports (without selecting the checkbox) and then expand the Product node. To select the fields for output:

   1. Click the Product node name (rather than selecting the checkbox). In the right pane, the fields are displayed, but they are not selected.

   2. Scroll down and click Show All . This displays the full list of fields available under the Product node.

   3. Select the following fields to display in the model, scrolling down as needed:

      • Product ID

      • TypeCode

      • CategoryID (under the CategoryID complex field)

      • The Product Price complex field (automatically selects ProductPrice and currencyCode )

7. Click OK .

1. To define the input UI element for the model, drag out from the ProductQuery port and release the mouse. From the context menu, choose Form View . A ProductQuery icon is added to the Design board to represent the new UI element. When you drag out from a data service to define an element, the fields of the selected element are automatically mapped to corresponding fields of the data service, and the required controls are created for the fields.

2. To define the output UI element, a table, drag out from the ProductResponse port and choose Table View from the context menu. The Define Data dialog box is displayed. This dialog box reiterates the field selection that we performed in the Define Ports dialog box. If you click on the Product node, the fields that you selected previously are displayed in the right pane (expand the nodes as needed).

3. Click Close . Your model should look similar to this:

   

Use the Layout board to configure how each element is displayed at runtime.

1. Click the Layout button below the workspace. The UI elements that you defined are displayed, showing each field that you selected in the input and output forms.

2. To revise the UI of the input form, right-click the ProductQuery form (if it is not already selected) so that its edge is highlighted, and click the Configure button in the task-panel toolbar. In the Configure Form View task panel, do the following:

   1. In the Title field, change the name of the form from ProductQuery to Define Query .

   2. On the layout, right-click the Maximumnumb… field, choose Rename from the context menu and enter No. of rows as the field label (press Enter ).

   3. Drag the right border of the field to the left to shorten its width.

   4. Shorten the height of the form by clicking its edge and moving the bottom border up towards the Submit button.

3. To revise the UI of the output table, do the following:

   1. Right-click the table header and change the name of the table from Product to Product List .

   2. Rename each column header (field) of the table as follows:

      Productid	Product
      Typecode	Type
      Categoryid	Category
      Productprice	Price
      Currencycode	Currency

      The layout should look something like this:

      

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

2. Click Deploy . The model is compiled and deployed to both the Web Dynpro HTML and the Web Dynpro Flex runtimes. The deployed models are listed under the Completed Successfully message.

3. In the HTML list, click the ProductDescription model to view it. The model is displayed in the Web Dynpro HTML runtime.

4. In the No. of Rows field, enter the value 30 and click Submit . The results should be similar to the following:

   

Go back to Storyboard and click .