Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
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.
I_Connid:s_conn_id.
I_Date:s_date.


 
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