Show TOC

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

 

This section describes how to create a base model that displays details for a specified buyer. It covers how to:

  • Create the model

  • Search for a data service

  • Define the logic and flow of the application

  • Define the layout

  • Deploy and view the runtime application

Procedure

  1. Create the model:

    Create a new Composite View named SalesOrderByBuyer in the tutorials development component that we created in the previous tutorial lesson. The Design board is displayed with a tab at the top left showing the model name.

  2. Discover and define the first data service:

    We are going to search in the Services Registry for the data service that we need. The Services Registry is a listing of Web services that is located centrally within a SOA landscape. It contains information about services provided in the landscape, with references to the services’ relevant WSDL metadata and to the locations of the callable service endpoints.

    Note Note

    Services that are published to the Services Registry are automatically available for use in Visual Composer Storyboard. However, the physical systems in which the services reside must still be defined as destinations in NetWeaver Administrator in order to be able to access them 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 BusinessPartnerByID* and click Next. The WSDL PortType Name that we need – BusinessPartnerByIDQueryReponseIn – is displayed.

    4. Click Next to display the endpoints defined 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. To select the input port and fields, in the left pane, highlight the BusinessPartnerByIDQuery node under In Ports. In this case, we only need one field as input - in the right pane, expand the BusinessPartnerSelectionByID complex field and select the checkbox next to the ID field. Note that the complex field is also selected automatically.

    8. To select the output port and fields, perform the following under Out Ports:

      1. Highlight the BusinessPartnerByIDResponse node and in the right pane, expand the BusinessPartner complex field. Select the following fields for output:

        • CompanyName (under the Organization complex field)

        • Firstname (under the Person complex field)

        • Lastname (under the Person complex field)

      2. In the left pane, expand the BusinessPartnerByIDResponse node and select the checkbox of the BusinessPartner_Address node. All of the fields are selected by default. Clear the checkboxes of the following fields:

        • Building

        • Type

      3. Click OK.

  3. Save your model.

  4. Define the input and output logic:

    1. To define the input UI element for the model, drag out from the BusinessPartnerByIDQuery port and choose Form 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 click in the Add/Remove Control (Add/Remove Control) column to the left of the ID field to add a control to the form for that field.

    3. Click Close. A new input form with an input field control for the ID field and a Submit button is added to Storyboard.

      Note Note

      Note that a data share connector is automatically connected to the form, because the dataset is clustered (complex). You can see that the dataset is clustered because the port on the data service is star-shaped. (Ports with flat (simple) datasets are square-shaped.) The data share connector holds a copy of the complex dataset. All the UI elements connected to the data share connector share the same data, so that the changes in the data on the UI elements are automatically reflected in the data share.

      End of the note.

    4. To define the output UI element, a form, drag out from the BusinessPartnerByIDResponse port and choose Form View from the context menu. The Define Data dialog box is displayed.

    5. 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 click in the left-most column under Add/Remove Control (Add/Remove Control) to add controls to the form for the Companyname, Firstname, and Lastname fields. We need to do this because by default the complex fields are also selected, and we do not want to add controls for them to the form.

    6. Click Close. A new output form with three input fields is added to Storyboard. Your model should look similar to this:

      Sales Order By Buyer Base Model (Sales Order By Buyer Base Model)

  5. Save your model.

  6. Define the layout of the UI:

    1. Click the Layout button at the bottom left of the workspace. The UI elements that you defined are displayed, showing a control for each field that you selected in the input and output forms.

    2. To revise the UI of the S1 input form, right-click the form and choose Configure from the context menu. In the Configure Form View task panel, do the following:

      1. In the Title field, change the form name to Define Buyer.

      2. On the Layout board, rename the Id field Buyer ID. At runtime, this is the field in which the user specifies the ID of the buyer whose sales order information should be displayed.

      3. Click the same field again and drag the right border to the left to shorten the field width.

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

    3. Save your model. It should look similar to this:

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

    4. To revise the UI of the output form, do the following:

      1. Rename the form to Buyer Details.

      2. Rename the fields of the form as follows:

        Companyname

        Company

        Firstname

        First name

        Lastname

        Last name

    5. Add controls to display the address fields, as follows:

      1. Change the layout of the form to have two columns: select the form and in the Configure task panel, specify 2 in the Columns field.

      2. Drag a Plain Text control from the Compose task panel to the output form, into the top cell of the new (empty) column.

      3. Drag four Input Field controls directly below the Plain Text control.

    6. In the Configure task panel, assign fields to the new input field controls, as follows:

      1. Select the first input field control, and from the dropdown list in the Value field, choose Define expression.

      2. In the Dynamic Expression Editor dialog box, expand the Data Fields group, and then expand the BusinessPartnerByIDQueryResponseIn.BusinessPartnerByIDResponse node.

      3. Expand the BusinessPartner_Address (Address) node, and double-click the Street field to add it to the expression pane.

      4. Click Check to check that the expression syntax is valid and then click OK. Note that the label of the field on the Layout board is updated automatically.

      5. Define fields for the remaining controls in the same way, using the City, PostalCode, and CountryCode fields respectively.

    7. Rename the new fields as follows:

      Text1

      Address

      PostalCode

      Postal code

      CountryCode

      Country

    8. Make the Address text bold as follows:

      1. Select the Plain Text control on the Layout board.

      2. In the Configure task panel, click the browse button to the right of the Styles field. The Define Styles dialog box is displayed.

      3. In the Font Style column, select Emphasized.

      4. Keep the remaining default selections and click OK.

    9. Shorten the height of the form by clicking it and moving the bottom border up towards the input field controls.

    10. Save the model.

      The Layout board should look similar to this:

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

  7. Deploy and view the model:

    1. Deploy the model and run the application.

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

      Runtime Application (Runtime Application)

Result

You have now created the base model. In the next section, Adding a Second Data Service and Preparing for Reuse, you will model another component that retrieves a list of sales orders for a specific buyer.