Show TOC

Procedure documentationDefine Eventing between iViews Locate this document in the navigation structure

 

You can create two iViews that communicate with each other on the same page, using client-side eventing, so that the output of the first iView serves as the input to the second. Eventing in the portal is based on the use of the Enterprise Portal Client Manager (EPCM), an object defined by the portal client framework to handle functions such as client eventing.

Prerequisites

You have created the top-level iView icons on the same page in Visual Composer.

Procedure

To define eventing between two iViews created in Visual Composer.

  1. Drill down into the first iView and define the logic:

    1. From the out port of the last UI component in the flow, drag out and choose Signal Out. The Select Output Fields dialog box is displayed.

    2. Check the fields that should be output by the signal and click OK. An out port is added to the flow.

    3. Double-click the connecting line to the signal, to display the Configure Element task panel.

    4. In the Event name field, rename the evt1 line to a meaningful action, such as Select, or Submit.

    5. Note the name of the out port, the EPCM event and the exact names of the fields that are transferred out of the iView.

  2. Save the iView, navigate back and drill down into the second iView

  3. Build the logic of the second iView, creating an input signal (Signal In) by dragging out from the data service or dragging the port from the Compose Model task panel.

    1. If you dragged out from a data service, the Select Input Fields dialog box is displayed. Check the fields that correspond to the fields output from the first iView, although the full names may differ.

    2. Double-click on the in port and in the Configure Element task panel, rename the signal using the identical name used for the out port in the first iView. In the EPCM event field, enter the same name used in the EPCM event field of the out port in the first iView.

      Note Note

      When both iViews are defined in Visual Composer, a default EPCM value - com.sap.visualcomposer:epcm - is assigned automatically.

      End of the note.

    3. Add fields of the exact names output from the previous iView, such as BANK_CTRY and BANK_KEY. The result may be that you have fields of names similar to those automatically added if you dragged out from the data service, such as BANKCOUNTRY and BANK_CTRY.

    4. Double-click the connecting line from the in port and its connected component, and in the table of the Configure Element task panel, map the new fields of the port to the connected service or element.

  4. Save the second iView.

To define eventing between an iView created and existing in the portal, and an iView created in Visual Composer:

  1. Check the properties of the existing portal iView and find out its EPCM event name.

  2. In Storyboard, open the iView that is to be the second part of the eventing scenario and create the required port: as input or as output.

  3. Double-click the newly-created port and in the Configure Element task panel, enter the portal event name in the Signal name field and the EPCM event in the EPCM event field.

Result

At run-time, client-side eventing can be achieved by using the identically-defined ports.

Example

A page contains two iViews for eventing. The first iView may be used by the Sales department to track customer orders. It may look something like this:

This graphic is explained in the accompanying text.

This iView enables the user to select a sales organization as input to the Customer Search BAPI, which displays a list of all customers managed by that department. The customer selected from the list (Multiple Grid) serves as input to the Salesorder Getlist BAPI, which displays a list of all orders placed by that customer. The selected order is held in the output Port, which serves as input to the second iView:

This graphic is explained in the accompanying text.

In the Material iView, procurement personnel can input the specific customer order output from the Salesorder iView and use that as input to the Material Get Detail BAPI. The results are a list of all materials that must be ordered for completing that customer order.

At run-time, the two views will be able to communicate through client-side eventing based on the definition of identical properties for the output/input ports. The top-level page would look like the following:

This graphic is explained in the accompanying text.