This document discusses inbound and outbound plugs in SAPUI5, which are used for navigation and data transfer between views. It provides an example of using outbound and inbound plugs to navigate from an items list view to a product details view when a product is clicked, and pass the selected product entity between the views. The outbound plug on the items list view passes the product to the inbound plug on the product details view via a shared collection attribute, displaying the correct product details.

1. InBound and OutBound Plugs - What are they and How to
Make Use of them for Navigations and Data transfer
between views of different components
Posted 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 Plugs
There 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 PLUG
And 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.

2. 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 ).

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

4. You can see that outbound plug is created.

5. Double click the event handler EH_ONPRODUCT_DETAILS and implement the coding.

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

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

8. 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’.

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

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

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

12. 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_PRODUCT
Window -> Product Window
Open 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.