Using Tab strips in Web Dynpro for ABAP

...Previous

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.

Click here to continue...