Show TOC

Procedure documentationCreating the Base Model for Retrieving Product Information Locate this document in the navigation structure

 

In this first section, you create a model that serves as the base component in the scenario. The model enables the user to send a query to a back-end system and to display results in a table, each line showing a different product record. The user then selects the required product according to the displayed information – including product ID, description and price.

In this tutorial, you will:

  • Create a new model and a new development component

  • Discover and define a service

  • Define the application logic and flow of your model: the input to and the output from the data service

  • Lay out the UI elements of your model

  • Deploy and run the model in the Web Dynpro HTML runtime

Before You Begin:

To use Web services as a source of data in your models, you must first define their destinations in SAP NetWeaver Administrator. For this example, we want to define the destination for a service that displays product data.

To configure the Web service:

  1. Open NetWeaver Administrator using the following URL:

    http://<machine name with full domain>:<portnumber>/nwa

    This URL is the same as the URL that you used for Visual Composer, with the /VC/default.jsp suffix replaced by nwa.

  2. If a Welcome screen is displayed, enter your user name and password, and click Log On.

  3. Choose   SOA Management   Technical Configuration   Destination Template Management  .

  4. Under Configure Destinations, click New. The New Destination wizard is displayed.

  5. From the Destination Type dropdown list, choose WSDL.

  6. Specify the following settings for the Web service destination:

    • Destination Name: QueryProduct

    • URL: http://<hostname>:<portnumber>/QueryProduct_In_Service/QueryProductInImplBean?wsdl=1.1

  7. Click Next and then Finish.

The Web service can now be accessed in Visual Composer Storyboard, from the Search task panel.

Procedure

  1. Create the model:

    1. Click New (New). 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. For Repository and Software component, leave the defaults shown.

    4. 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 field. The Create New Development Component dialog box is displayed.

      2. In the Development component field, type tutorials. (Note that only lower-case characters are allowed.)

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

    5. 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.

  2. Discover and define the first data service:

    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)

        Note Note

        The icons to the immediate left of a node name indicate the internal structure of the data:

        • Record (Record) shows that a single record is returned (this can be displayed in a form).

        • Record Set (Record Set) shows that a record set is returned (displayable in a table).

        End of the note.
    7. Click OK.

  3. Click Save (Save) to save your model.

  4. Define the input and output logic:

    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:

      Design Board (Design Board)

      Note Note

      A Star (Star) out port indicates that the output of this data services includes a complex data structure and that the output may include nested data.

      End of the note.
  5. Save your model.

  6. Define the layout of the UI:

    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:

        Layout Board (Layout Board)

        Note Note

        You can re-arrange columns by dragging one over the other. To add a (virtual) column to the table, drag an Input Field from the Compose task panel to the location you need in the table. Rename the column label and define its value in the Value field of the Configure task panel.

        End of the note.
  7. Save the model.

  8. Deploy and view the model:

    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:

      Runtime (Runtime)

  9. Close the model:

    Go back to Storyboard and click Close (Close).

Result

You have created a basic application that can be used by itself or combined with other components. In the next section of this tutorial, Modeling the Currency Converter Application, you will learn how to model another application, which you can embed into this base model.