Navigation from one View to other View along with parameters using Plugs with out using Component Controller context (Web Dynpro for ABAP)

By Suman Kumar Chinnam, YASH Technologies 

Summary:

Web dynpro application to demonstrate the use of Passing Parameters from one view to the other view with the help of Plugs. We will develop one web dynpro component (ZDEMO_PLUGS) and two views, we will pass values from one view (SEARCH) to the other using OUTBOUND plug and we will receive values using INBOUND plug of second view (FLIGHTS). 

Create a Web Dynpro Component:

Create a Web dynpro component using TCode SE80 with name ZDEMO_PLUGS. 

Creating a View

Click on the Web Dynpro component ZDEMO_PLUGS in the object tree and open the context menu to create a new view.

Create view SEARCH

Defining the View Context

Open view SEARCH and switch to tab Context.

Right click on Context to create new node INPUT and then add required attributes to this node. 

Maintain the properties according to the screen shot below. Enter Node name INPUT, Select SFLIGHT as Dictionary Structure and “1…1” for the Cardinality.

Select button “Add Attribute from Structure” and select all components of structure SFLIGHT.  

Now the selected attributes will be added to the Node INPUT. 

Designing the View:

Now switch to the Layout tab of the View SEARCH and add elements to the Layout by right click on Route element container, using the context menu Insert Element. See the below screen shot. 

Defining an Action and Corresponding Action Handler

Create an action SEARCH which is triggered by the Web Dynpro event onAction.in properties table of BUTTON1, select the event property onAction. Click the icon on the right corner (empty page) to define a new action.

This will generate a method (ONACTIONSEARCH) to handle Button Action. 

Define the Plugs for the Navigation between views SEARCH and FLIGHTS 

Outbound Plug:

Now switch to tab Outbound Plugs of view SEARCH. Define outbound plug (TOFLIGHTS) and declare the importing parameters. 

Inbound plug

To navigate from the FLIGHTS View to SEARCH view for a new search an inbound plug is needed click on tab Inbound Plugs and create a Plug FROMFLIGHTS.

Note: When creating an Inbound Plug an event handler will be created automatically. 

Implement the Event Handler:

Event handler for action Search, which is method ONACTIONSEARCH, needs to be modified to make a call to the second view FLIGHTS. In order to do this, invoke the Web Dynpro Code Wizard  and choose option Start navigation (1)

 Use F4 help to select Outbound Plug (2) 

The method will call the second view by triggering the outbound plug. 

Now we need to pass entered input values to this Plug.

Again use Web dynpro code wizard to read Context INPUT of view SEARCH.

The code will be like.

Click here to continue...