Skip to end of metadata
Go to start of metadata

This scenario demonstrates the usage of two BAPI's (i.e. BAPI_FLIGHT_GETLIST & BAPI_FLIGHT_GETDETAIL) and displays the data into the flight detail View using UI element tab strip.
STEP 1:  Creating a service call

  • Create a Web Dynpro Component called Z_BAPI_GET_DETAIL.
  • Create a service call to access the BAPI.
  • Select the Function module option & specify the function module name.
  •  Give the function module name: BAPI_FLIGHT_GETLIST.

  •  Select the required parameter & continue .Here select Destination_From & Destination_To,Flight_List.


STEP 2: Dragging and dropping the nodes from Component controller to Main View.

  • Now on the context tab of the Main view drag and drop the nodes from the component controller.
  • Drag and drop the destination_from and destination_to.


Now Design the Layout as shown below

  • Create two group UI elements One for the Destination_From and another for Destination_To and create a button for the main view.

STEP 3: Dragging and dropping the nodes from Component controller to 'Flight_detail' view

  • Create another view name it as Flight_detail view.
  • Drag and drop Flight_data, Additional_Info & Availability from the component controller to the Flight_detail View as shown below.
    Now Design the Layout as shown below:* In the layout ROOTUIELEMENT CONTAINER, Create the tab strip as shown below.
  • In the tab strip right click insert tab and name it as Flight_data.
  • Create the tab strips for the Additional_Info and Availability


  • After that the tabs trip element layout looks like this


  •   Add the element to tab to the tab strip of the flight_data. 
  •   Create the transparent container as shown below.


  • Bind this transparent container UI element with the context node FLIGHT_DATA.

  •   Observe the layout after the binding between 'flight_data' node and the transparent container

  •   Repeat the steps for the other two tab strip i.e. for Additional_info and Availability.
  •   Create the button to navigate to the main view. 

  • Now the layout looks like this with the tab strip and button.


STEP 4: Navigation of the views using Plugs

  • To navigate between the views i.e. from Main view to the Flight_detail View 'IB1_Flight_Detail' Inbound Plug from Flight_Detail View to Main.

  •   'IB_Main' Inbound plug from the Main view to the Flight_Detail View.


 In the Main View,

  •     In Button property click on 'OnAction'.
  •     Create action 'on_getflightdetails'.
  •      Create Outbound plug 'OB_MAIN'.


  • Observe the layout of the main view.

In the 'Flight_detail' view,

  • In Button property click on 'OnAction'
  • Create the action as 'on_back'.
  • Create the Outbound plug 'ob1_flight_detail'.

  • On Actions of the Main View 'on_getflightdetails', generate the code using the code wizard.
  • Select the Method calls in used controller.
  • Use the Method name 'Execute_bapi_flight_getlist'.


  •   Repeat the same procedure for the method 'Execute_bapi_flight_getdetail'.

STEP 5:  Including attributes in the component controller

In the component controller of the attributes,

I_Carrid: s_carr_id.

STEP 6: Coding the methods 'execute_bapi_flight_getdetail' and 'execute_bapi_flight_getlist' of the component controller.

  • Methods of the component controller:

The below code refers to the code in the method 'execute_bapi_flight_getlist'.

 The below code refers to the code in the method 'execute_bapi_flight_getdetail'.
STEP 7: Dragging and dropping the 'flight_detail' view and creating navigation links.

  • In the windows drag and drop the flight_detail view.


  •  Create the navigation link for the 'main view' as shown below.


  •   Now Create the navigation link for the 'flight_detail' view.


  •   Finally, we complete with the navigation links for the views.

STEP 8: Creating an application

  • Create the application for the webdynpro component controller and save it.

  •   Test the application.

  •   Fill details as shown below,

After clicking the button 'Get Flight Details' the details are displayed as per,

  1. Flight_data.
  2. Additional_info.
  3. Availability.



  • No labels