Using Tab strips in Web Dynpro for ABAP

This scenario demonstrates the usage of two BAPI’s (i.e. BAPI_FLIGHT_GETLIST & BAPI_FLIGHT_DETAIL) 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.

Click on ‘Continue’

Select controller à Use Existent Controller

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.

Click on Continue.

Complete the process.

Repeat the same steps for the second BAPI access i.e. BAPI_FLIGHT_GETDETAIL.

The parameters to be selected are the FLIGHT_DATA,ADDITIONAL_INFOand AVAILIBILITY.

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 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’.

Observe the layout of the ‘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’.

Observe the generated code.

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,

Include

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:

In Execute_BAPI_GETLIST Method .Include the below code as shown in the above fig.

field-symbols: type if_componentcontroller=>element_flight_list.

read table lt_c_flight_list assigning index 1.

if sy-subrc eq 0.

wd_this->i_carrid = -airlineid.

wd_this->i_connid = -connectid.

wd_this->i_date = -flightdate.

endif.

In Execute_BAPI_GETLIST Method pass the attributes that has been used in the component controller.

Exporting

airlineid = wd_this->i_carrid

connectionid = wd_this->i_connid

flightdate = wd_this->i_date

STEP 7: Dragging and dropping the ‘flight_detail’ view and creating navigation links.

In the windows drag and drop the flight_detail view.

Observe the image after dragging and dropping the ‘flight_detail’ view.

Create the navigation link for the ‘MAIN’ view as shown below.

Fill the details for the destination of the navigation link.

Repeating the same steps for the ‘flight_detail’ view.

Observe the details of the destination of the navigation link.

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.