Skip to Content
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.

 

image

 

 

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.

image

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.

image

 

 

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

image 

 

You can see that event handler has been  created.

image

 

 

 

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

image image

 

You can see that outbound plug is created.

image

 

Double click the event handler  EH_ONPRODUCT_DETAILS and implement the coding.

image

 

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.

image

           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

image

Double click on the outbound plug to implement the code

image

 

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.

image

 

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 .

image

 

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

image

 

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

image

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

image

 

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.

image

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

 

image

 

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

image

 

Save Runtime repository when done.

Test The Navigation on web UIimage

 image

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

 

image

 

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.

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. Partha Gopalan
    Hello Suchita,

    Nice blog, good information as I am working on a similar requirement. A quick question for you, how do we navigate from a source view embedded in with multiple other views(each different component) to target view.

    It looks like this
    View1 |  View 2 | Source view

    My navigation to target view is just replacing the source view, but not view 1 and view 2. How do I completely navigate out of these view?

    Thanks in advance.

    Partha

    (0) 
  2. Partha Gopalan
    Hello Suchita,

    Nice blog, good information as I am working on a similar requirement. A quick question for you, how do we navigate from a source view embedded in with multiple other views(each different component) to target view.

    It looks like this
    View1 |  View 2 | Source view

    My navigation to target view is just replacing the source view, but not view 1 and view 2. How do I completely navigate out of these view?

    Thanks in advance.

    Partha

    (0) 
    1. Suchita Phulkar Post author
      Hi Partha,

      In this case you have to use the outbound plug of the ViewSet. I assume that View 1 View2 and View 3 are in some viewset. and Viewset is attached to the window. So in this case, your source will be the  viewset. The logic is similar when you navigate from any overviewpage to the details view page when you click on a link in any assignment block.

      Thanks & Regards,
      Suchita

      (0) 
      1. Partha Gopalan
        Suchita,

        What is the view 1, view 2 are from different components and not part of one view set?

        Again how do I verify if all of these views are part of one view set? Starting to think if dynamic navigation would be another way to do this?

        Thanks for your quick response.

        (0) 
  3. Partha Gopalan
    Suchita,

    I managed to find the component where are views are part of a viewset and the complete navigation worked from source view through main window of another component, and finally to target view. I did only one change to the design, I used fire_outbound_plug in the main window of the source view as call_outbound_plug was looping through endlessly until the IC dumped. Do you know the reason why?

    Thanks again for presenting this blog. Extremely helpful.

    Partha.

    (0) 
    1. Suchita Phulkar Post author
      Hi Partha,

      Sorry, about the late reply.
      If you check the 1st picture, you can find that navigation, though it is within the views, always happens in a window. The view is always hold by a window, not necessarily direct window for that view because if thought that way then there will be as many windows in the component as many views are . This is not the desing.
      Ideally there in a Main window, to which either viewset or overview page is attached and to viewset or overview page, the other views are attached. The source remains the Window though actual event is on view. View can deligate event to window firing window’s outbound plug in view’s outbound plug.

      I know it sounds a bit complecated but that just because of the “terminology”, concept wise it’s simple.

      To clear the concept, tak one SAP component and try to lean all navigations in that component, You will explore different ways of navigation getting handled and its really interesting.

      i can suggest to study – Product search to Product Details Navigation . Campaign->to Product via F4 Help on Campaing. These are some interesting navigations.

      Thanks & Regards,
      Suchita

      (0) 
  4. Rakesh Chugh

    Really good blog Suchita.

    One observation though I think you mentioned the wrong snapshot for Window Outbound Plug. It looks like you copied View Outbound Plug snapshot again for the Window Outbound plug as well.

    I think that’s why Partha was facing that endless loop which was rectified by using Fire_Outbound_Plug at Window OP level.

    Anyways, great work though!!

    (0) 

Leave a Reply