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.

 

Demo on KM Approval Process

Adobe Flashisland part-1 Video

To Truncate the WebDynpro Application Parameters.

To Truncate the WebDynpro Application Parameters when routing through Web Dispatcher without using Portal.

Creating an ALV List in Web Dynpro Application

This is the simple tutorial to create an ALV in using Abap Webdynpro.

Creating Select options in Abap Webdynpro