InBound and OutBound Plugs - What are they and How to Make Use of them for Navigations and Data transfer between views of different componentsPosted by Suchita Phulkar in suchita.phulkar on Sep 7, 2010 7:55:42 AM

inShare

In this blog, i am going to share some knowledge on inbound and outbound plugs as what are these plug, their use and how we can use them in navigation for data exchange between the views.This is my first blog so kindly bear with me and do suggest anything you feel is informative to include in this subject or anything that i missed out. Your suggesions and questions are most welcome. 

  The Figure above illustrates the Use of PlugsThere are two basic plugs:  1) Inbound Plug and 2) Outbound Plug.A plug is a junction Used for Entering or Existing a view.We navigate between two views using 1) Outbound Plug 2) Navigation Link and 3) Inbound Plug. We can also pass the data between two views through OUTBOUND and INBOUND PLUGS•1)      Outbound Plug : It is fired on leaving a view.  We define necessary logic to take care of things before leaving a view. The example could be adding / modifying/removing an entity from the BOL collection etc.•2)      Navigation Link : Specifies the Source view , its Outbound Plug  & Target view and its Inbound plug.•3)      Inbound Plug : It is fired on entering a view. We define necessary logic to take care of things before entering a view. The example could be enabling/disabling some entity features, adding the entity to the BOL which is passed by Outbound Plug etc.Suppose we want to navigate from view 1 to view 2 .View 1 will have an OUTBOUND PLUG.View 2 will have an INBOUND PLUGAnd Navigation Link will have View 1 as Source with its OUTBOUND PLUG and View 2 as Target with its INBOUND PLUG.Technically outbound or inbound plug is nothing but a method of the controller class. We trigger outbound plug method in an event handler as generally navigation happens on some event like click on a button. Click on a hyperlink etc.  Generally, in Outbound plug we read the BOL collection to get the entity on which event has happened , read that entity and pass it on to the next view ( if required ) to which we are navigating using IV_COLLECTION Attribute. This attribute is shared between OUTBOUND and INBOUND plugs to transfer the data. Thus Data that an outbound plug sends in IV_COLLECTION attribute is handed over to the inbound plug on the other side of a navigation Link.To illustrate the use of INBOUND and OUTBOUND plugs in navigation, consider following example.Following picture shows the Items List view from a sales order which has a field ( custom Z field ) labeled as  ‘Product Proposal'. I am purposely taking a Z-field so that one can learn from scratch. One can add Z field to the Items View by using GET_XYZ ,SET_XYZ,GET_I_XYZ and GET_M_XYZ prototype methods available in context node class of the view and later put this Z-field to the view using view config tool.

We want that the value in this product proposal field should get a hyperlink and when its clicked, it should navigate us to the Product mention in that row referred by the product id( basically navigate to the respective product's product details page for the product id appearing in the row on which the product proposal value is clicked).  To make the value in the field appear as a HOTLINK/Hyperlinked , We implement necessary coding in GET_P_PRODPROPOSAL method.

  On click of the link, we need to handle some navigation, for this we use fp_onclick property and set the event id as ‘PRODUCT_DETAILS’ as can be seen in the above image . So when user will click on the link, system will return this event id in DO_HANDLE_EVENT method. We will need to implement event handler.

To Navigate to Product Details page, on click on product proposal value : Product Details page is a viewset that combines several views.

From navigation perspective, we will need to navigate from BT115IT_SLSO/ItemsList window to ICCMP_PRODUCT/ProductWindow through BT115H_SLSO/MainWindow . Why through BT115H/Mainwindow ? Well, then answer is , the item view is an assignment block present on sales order overview page, hence we have to consider the component of this overview page which is  BT115H_SLSO. There are 3 main steps in this navigation as describer below

STEP 1)  Write the event handler to handle the click when user will click on value ( yes or no hotlink) in product proposal.

for this, Open component BT115IT_SLSO in component workbench.

Open view Items.

Right click on EventHandlers and select ‘Create’. Give name as ‘PRODUCT_DETAILS’ ( same name and in same case as the event id specified in fp_onclick as explained earlier ).

  You can see that event handler has been  created.

   

We will need an outbound plug here, which we will fire in the event handler just created and with which we will pass the Product Entity to the inbound plug of the target view.

Lets create the outbound plug.

Right click on outbound plugs and create outbound plug as follows

 

 You can see that outbound plug is created.

 

Double click the event handler  EH_ONPRODUCT_DETAILS and implement the coding.

 

Here we read the Current row on which the event occurred. The current entity is BTADMINI . We are interested      in Product Entity so we retrieve the product entity using the relation( lines 18 to 22). Next, we create a collection and add this product entity to it and then pass this collection to Outbound Plug.

 Double click the outbound plug and implement the coding.

           Since component interface is always a window, we have to delegate the navigation from a view to the window to which the view is attached. Hence we call the window’s outbound plug. We need to create outbound plug in the window to make this code work.

STEP 2)      Go to window BT115IT_SLSO/ItemsList . If not enhance, then first enhance the window by right click->enhance.

Right click on Outbound Plugs->create.

Give same name as used in the code  of view’s outbound plug. Hence we name the OP as TOPRODUCTDETAILS

Double click on the outbound plug to implement the code

 

Since this Window is embedded in Salesorder Overview page, we need to delegate the navigation from Items Window to Salesorder Overview Page’s Window which is BT115H_SLSO/Mainwindow.

To Add the outbound plug to corresponding window in runtime repository, Go to the runtime Repository Editor, expand the window node, further expand the node of ItemsList window, rightclick on Outbound Plugs folder and select add. Use F4 and select OP TOPRODUCTDETAILS.

 

STEP 3)      Now the source component's window is BT115IT_SLSO/ItemsList which is already present in the component BT115H_SLSO as a component Usage CUItems. ( if it wouldn’t, the we would have added it as a component usage)

The target component/Window is ICCMP_PRODUCT/ProductWindow is not readily available in BT115H_SLSO, hence we would need to add it as a component usage.

Open component BT115H_SLSO in component workbench. Select the runtime repository editor.

We can see the usage CUItems already present which has BT115IT_SLSO as used component. Expand this usage and further expand the interface view BT115IT_SLSO/ItemsList , right click on Outbund Plugs folder , select Add, use F4 and add the OP TOPRODUCTDETAILS that we had created before in step 2 .

 

Now Right Click on Component Usage and select ‘Add Component Usage’.

 

Give name and other details as shown below. Use F4 to select the interface view.

Save the runtime Repository. We can see that component usage is added.

 

Now Open the Windows Node, and attach the interface view of CUICCMP_PRODUCT to the main window. For this, expand theWindows node, right click on MainWindow and select Add View. Use F4 to add CUICCMP_PRODUCT.ProductWindow. Save the runtime repository.

Now the last part of the navigation is to create the navigation link with source & Target.

Source  is CUItems.ItemsList  with OutboundPlug TO_PRODUCTDETAILS.

Target is CUICCMP_PRODUCT.ProductWindow with Inbound Plug IP_TODETAILS.

For this, right click on Navigation Links Node and select Add Navigation Link

 

 

Specify the source and target with Outbound and inbound plugs as shown below. Use F4 to make the selection.

 

Save Runtime repository when done.Test The Navigation on web UI

 

NOTE: Handling of Data Exchange between source and target. 

The data exchanged here is current Product entity which has all the fields like product guid, product id, unit etc. Infact Product is Root entity hence using this entity one can also retrieve all the related entities like quantity , attributes etc. The Target View is a Std. SAP view attached to the window named ProductWindow in component ICCMP_PRODUCT.This window already had the Inbound Plug in place so we did not create any inbound plug and used the already available plug IP_TODETAIL. Let’s have a look at this inbound plug coding Component -> ICCMP_PRODUCTWindow -> Product WindowOpen Component, expand the Windows Node. Double click on the window name. It will display the window in Right Pane.Now expand the node Inbound Plugs. Double click on IP_TODETAIL. You will get the following code

 

 Check out the highlighted code in the image above.This Highlighted code accesses the IV_COLLECTION. We’d set the IV_COLLECTION in Outbound Plug on source view,  passing the current product entity to it. Here that entity is retrieved in the highlighted code and is assigned to the proper context node. This way it displays the correct product details when the view is loaded.