How To Use Inbound And Outbound Plugs In SAP Web Dynpro ABAP Programs

In a previous article we have seen how to create a simple SAP Web Dynpro ABAP application with only one view. Now, in this article we modify that application by adding one more view and learn how to navigate between two views using inbound and outbound plugs.

Step 1. Adding Views

1.1 Go to Transaction SE80, choose Web-Dynpro-Comp. / Intf. in the object list and enter the name of your Web Dynpro application (Y_FIRST_WEBDYNPRO) and click on Display.

1.2 Right click on Views node and select Create.

1.3 Give a name and description to your View and click on “CONTINUE”  button.

1.4 Click on “SAVE” button. Now you can see your newly created view.

 

Step 2. Creating Inbound and Outbound plugs

Inbound and outbound plugs are used for navigating between different views.
Inbound plugs define the possible entry points for a view and we use outbound plugs to navigate to another view.

2.1 Click on the Main View and select the ‘Outbound Plugs’ tab.

2.2 Give a name and description to the outbound plug.

2.3. Click on “SAVE“.

2.4 Now click on Second_View and select the ‘Inbound Plugs’ tab.

2.5 Give a name and description to the outbound plug.

2.6. Click on “SAVE”.

 

Step 3. Embedding the newly created ‘View’ in the ‘Window’

3.1 Double click on the ‘Windows’ node.

3.2 Right click on window ‘Y_FIRST_WEBDYNPRO’ and select ‘Embed View’

3.3 Now you will see the ‘Embed View’ pop up, and click on the f4 help for the field ‘View to be Embedded’, double click on Second_View.

3.4 Click on “CONTINUE” button.

 

Step 4. Creating Navigation Link

To be able to navigate from one view to another, an outbound plug of the first view must be linked with the inbound plug of the second view in each case using navigation links.

The navigation links are not defined in the view, but in the window.

4.1 Right click on the ‘Outbound Plug’ ‘TO_SECOND_VIEW’ and select Create Navigation Link.

4.2 In the pop up choose destination for navigation by clicking on f4 help of field Dest. View and selecting SECOND_VIEW.

Step 5. Creating a button and assigning action to it

5.1 Go to main view and insert a button UI element.

5.2 Click on create button to add the action to the button.

5.3 In the Create Action pop-up, give an action name and description.

5.4 Click on Implementation button to insert coding.

5.5 Insert the following code between method and end method.

wd_this->fire_to_second_view_plg(    ).

5.5 Click on save and activate.

Output: Right click on the application and select Test to run your application.

Click on  button to go to next view.

In this tutorial we have seen how to navigate between two views. Similarly, using inbound and outbound plugs we can navigation between any number of views depending on our requirement.

I hope you find this article interesting and of use. If you do, leave me a comment below.

Thanks.