Webdynpro Application to call two BAPIs for displaying the Flight details using tab strips

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.