Sunday, December 19, 2010

Navigation from one View to other View along with parameters using Plugs with out using Component Controller context


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

Save the view. Do not activate the code, unless we provide the navigation link to the FLIGHTS view this code will give errors if you are trying to activate or Syntax Check.

Create Second View:

Repeat the same steps to create a view like above.

  1. Crete a view with name FLIGHTS.
  2. Go to Context tab of FLIGHTS and create a node FLIGHTS with attributes are from Structure SFLIGHT and select Cardinality 0…n.

  1. Switch to Layout tab of view FLIGHTS and add table (Flights) and Button (Button2) to the Layout container.

  1. To create Action when user clicks on Back button, click on empty page in button properties. Enter action name in the below window and click ok.

  1. Create binding to the table by right click on table FLIGHTS choose context menu Create binding, then select context node FLIGHTS.

  1. Define plugs

Outbound Plug: Switch to outbound plugs tab of view FLIGHTS and define like below

Inbound Plug: Switch to Inbound plugs tab of view FLIGHTS and define like below.

Note: When creating an inbound plug an event handler will be created automatically i.e. HANDLEFROMSEARCH.

7. Implement this method and declare same parameters what we declare earlier for the Outbound Plug (TOFLIGHTS) of view SEARCH.

8. Event handler for action BACK, which is method ONACTIONABCK, needs to be modified to make a call to the view SEARCH. In order to do this, invoke the Web Dynpro Code Wizard and choose option Start navigation (1), Use F4 helps to select Outbound Plug (2).

Embedding the View into the Window

Embed the views SEARCH and FLIGHTS to window and set up the navigation.

Create the navigation link between two views.

Select the Outbound Plug of SEARCH view and open the Context menu. Select create Navigation link.

A dialog pop up comes up where you can enter the destination of the Navigation.

Repeat the same for Outbound Plug (TOSEARCH) of FLIGHTS View.

Activation, Creation of a Web Dynpro Application and Execution

  1. Activate all objects of Web Dynpro component ZDEMO_PLUGS.

  2. Create the Web Dynpro application ZDEMO_PLUGS and assign it to package $TMP (local object).

  3. Run your application.


Enter the data and click on search button it will show Flights details.

If you click on Back button it will go to SEARCH view for new search.

No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)


Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive