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