Show TOC

Procedure documentationReusing a Model and Enabling Personalization Locate this document in the navigation structure

 

This section describes how to reuse the SalesOrderByBuyer model within a new model, and use it to display details for a specific sales order. It also describes how to enable runtime personalization of tables using SAP List Viewer (ALV).

Procedure

  1. Create a second model:

    Create a new composite view called SalesOrderDetails and save it in the same location as the previous model in this tutorial.

  2. Locate and reuse the previous Visual Composer model you created:

    1. In the Search task panel, from the Search in dropdown list, choose Visual Composer Models.

    2. In the Search for field, enter sales.

    3. In the Type field, select Model.

    4. Click Search. A list of all Visual Composer models that match the search criteria is displayed.

    5. Locate the SalesOrderByBuyer model that you created earlier in the tutorial and drag it onto the Design board.

    6. Choose Nested View from the popup menu. A nested view icon is added to the Design board. You can see that the icon has one out port. This is the port that you created by adding a signal out connector to the SalesOrderByBuyer model in an earlier step.

  3. Locate the data service that contains information about each sales order according to its ID:

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

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

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

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

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

    6. Highlight the SalesOrderByIDQuery node under In Ports. Expand the SalesOrderDSelectionByID_ID complex field in the right pane and select the checkbox next to the ID field.

    7. Highlight the SalesOrderByIDResponse node under Out Ports and expand the SalesOrder complex field in the right pane.

    8. Select the checkboxes of the following complex fields: TotalGrossAmount, TotalNetAmount, and TotalTaxAmount. Note that the two fields under each complex field are also automatically selected.

    9. In the left pane, expand the SalesOrderByIDResponse node under Out Ports, and highlight the SalesOrder_Item node.

    10. Select the checkboxes of the following fields: ID, GrossAmount (expand the GrossAmount complex field to see it), NetAmount (expand the NetAmount complex field to see it), and TaxAmount (expand the TaxAmount complex field to see it).

    11. Click OK.

  4. Define the input logic and flow:

    We want to use the Sales Order ID value that is output from the out port of the nested view as input to the data service.

    1. Drag out from the out port of the nested view and connect the line to the SalesOrderByIDQuery port of the SalesOrderByIDQueryResponseIn data service.

    2. Double-click the connecting line to open the Map Data dialog box.

    3. Select the mapping line, and in the Assigned Value column of the bottom pane of the dialog box, expand the SalesOrderSelectionByID_ID node. In the Assigned Value column of the ID field, choose (ID) ID.ID from the dropdown list. This transfers the value from the ID field in the SalesOrderByBuyer nested view to the ID field in the SalesOrderByIDQueryResponseIn data service.

    4. Click Close.

    5. The model should look similar to this:

      Nested Composite View Connected to Data Service (Nested Composite View Connected to Data Service)

  5. Define the output logic and flow:

    1. Drag out from the SalesOrderByIDResponse port and choose Form View from the context menu. This form will display overall cost information totals for each order. The Define Data dialog box is displayed.

    2. Highlight the SalesOrder_Item node in the left pane. In the right pane, 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 following fields to select them: TotalGrossAmount (under the TotalGrossAmount complex field), TotalNetAmount (under the TotalNetAmount complex field), and TotalTaxAmount (under the TotalTaxAmount complex field).

    3. Click Close. You can switch to the Layout board to see the fields that you just selected in the form view.

    4. On the Design Board, drag out from the out port of the form view and choose Table View from the context menu. This table will display specific cost information for each item in the order.

    5. In the Define Data dialog box, highlight the SalesOrder_Item (Item) node in the tree. In the list of fields for this node, select ID, GrossAmount, NetAmount, and TaxAmount. These fields show specific price information for each item in the sales order, whereas the fields that you selected in step 5.2 show total price information entire sales orders (total for all of the sales order's items together).

    6. Click Close. The model should look similar to this:

      Model with Two Output Views (Model with Two Output Views)

  6. Define the layout:

    1. Switch to the Layout board.

    2. Use the knowledge you gained earlier to reorder, rename, and resize the UI controls and views so they look similar to this:

      Sales Order Details Layout (Sales Order Details Layout)

      Note Note

      The empty SalesOrderByBuyer element is a representation of the nested view. You can only view the actual layout of a nested view on the Layout board of the nested component, not in the component in which it is nested.

      End of the note.

    3. Select the SalesOrderByBuyer element and in the Configure task panel, deselect the Show title checkbox, because we do not need to see its title at runtime.

    4. Let's display the three fields in the Sales Order Totals form in a single row: select the Sales Order Totals form and in the Configure task panel, change the value of the Columns property to 3.

    5. Drag each control into its own column and resize the form height, so that it looks similar to this:

      Form Layout with Three Columns (Form Layout with Three Columns)

      Note Note

      The control labels may wrap to two lines at runtime, depending on available space.

      End of the note.

  7. Save, deploy, and view the application:

    1. Deploy the model and run the application.

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

      Runtime Application (Runtime Application)

  8. Enable runtime table personalization:

    Visual Composer Web Dynpro runtimes are integrated with SAP List Viewer (ALV). SAP List Viewer enables users to perform data manipulation of tabular data at runtime. For a description of the runtime functionality provided by SAP List Viewer, see SAP List Viewer for Web Dynpro for Java.

    In the runtime application you viewed in the previous step, by default, the tables have two buttons in the table toolbar: Filter and Options. Using Visual Composer Storyboard, you can specify which additional functionality runtime users are able to access, and you can also define default display settings for tables at runtime.

    Let's define some additional personalization options that can be used for the Item Details table at runtime.

    1. On the Design board, select the Item Details table.

    2. In the Configure task panel, expand the List Viewer Configuration group.

    3. Select the Export checkbox (this adds a button to the table toolbar that enables the runtime user to export the data in the table to a Microsoft Excel file).

    4. Select the Display type checkbox (this enables the runtime user to display the table data in tabular or graphical chart format).

    5. Expand the Initial Display Settings group.

    6. Click the Browse button at the right of the Sort order field.

    7. Select the ID field in the Available Columns pane and click Add (Add) to move it to the Selected Columns pane.

    8. Click OK.

  9. Save, redeploy, and view the application:

    1. Click the Deploy button in the task-panel toolbar and then click Deploy. The model is compiled and deployed to both the Web Dynpro HTML and the Web Dynpro Flex runtimes.

    2. Click the SalesOrderDetails link and in the Buyer ID field, enter the value 10 and click Submit. The Item Details table should look similar to this:

      Item Details Table (Item Details Table)

      The Item Details table now has the following customizations at runtime:

      • Display As dropdown list: Enables you to display the data in a table, chart (graphic), or both

      • Export button: Enables you to export the data to a Microsoft Excel file

      • By default, table rows are sorted according to the item ID. Users can still change the sort order by clicking on a column header.

        Note Note

        The Sales Orders table does not have these additions, as we only defined them for the Item Details table.

        End of the note.

    3. Use the Display Filter Row and Open Settings Dialog buttons to access options that enable you to manipulate the table data. For example, you can try to:

      • Hide the Gross Price column

      • Calculate the total price for all displayed items

      • Display only items that cost more than 500

Result

You have completed the second tutorial, in which you modeled a base application and reused it in another model. To enhance your model using additional Visual Composer features, you can continue to the next tutorial: Tutorial 3: Enhancing the Advanced Application.