Working with Tabstrip in Webdynpro for ABAP

19 Pages·2009·0.39 MB·English

by  Anusha Vupalapathi

Working with Tabstrip in
Webdynpro for ABAP
Applies to:
SAP ECC 6.0 (Release 700, SP 12). For more information, visit the Web Dynpro ABAP homepage..
Summary
This tutorial explains about Step-By-Step procedure for creating a Tabstrip in Webdynpro ABAP. It makes
use of a number of UI elements as well. We will also see how to clear the selection screen context and how
to call a POPUP window.
Author: Anusha Vupalapathi
Company: Intelligroup Asia Pvt Limited
Created on: 8th JUNE 2009
Author Bio
Anusha V is a senior associate consultant currently working for Intelligroup Asia Pvt. Ltd. She is having good
knowledge in SAP ABAP.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 1
Working with Tabstrip in Webdynpro for ABAP
Table of Contents
Description .......................................................................................................................................................... 3
Create Webdynpro Component .......................................................................................................................... 4
Creating context in Component Controller ......................................................................................................... 4
Design View ........................................................................................................................................................ 6
Implementation of the methods ........................................................................................................................ 12
Embedding view to window .............................................................................................................................. 13
Create a WebDynpro Application ..................................................................................................................... 15
Output 1: If an entries exits for the selection criteria. ................................................................................................. 15
Related Content ................................................................................................................................................ 18
Disclaimer and Liability Notice .......................................................................................................................... 19
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 2
Working with Tabstrip in Webdynpro for ABAP
Description
The Tabstrip UI element allows the display of a tab page. The user can toggle between several
tab pages by selecting a specific tab. The same window is shared by all tab pages and used
for displaying the content. The user can display the content of a tab by selecting a tab title.
Scenario:
To create a Webdynpro application with a Tab strip.
UI Elements on the output screen:
Parameter: Airline Code: SFLIGHT-CARRID

Button: “SUBMIT”.

Tables in Tabstrip: Displays the list of all flights and Flight schedules in two different tabs
based on the input given by user on Screen. And also displays a popup window with a message
if no flight detail exists with given input.

Snap Shot of output Screen:

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 3
Working with Tabstrip in Webdynpro for ABAP
Create Webdynpro Component
(cid:122) Go to transaction SE80.
(cid:122) Select “Webdynpro Comp. /Intf” from the list.
(cid:122) Create a new Webdynpro component by the name ZWDA_TABSTRIP.

Creating context in Component Controller
(cid:122) In component Controller create the nodes and attributes. We are taking Airline code i.e. CARRID
as input and displaying the list of all flights (SFLIGHT) and Flight schedules (SPFLI) as output. So
create these attributes in the context of component controller. Right click on the context
tab create node.

(cid:122) For CARRID create node as shown below and select “Add Attribute from structure” and create attribute
to the node. Make sure that the cardinality is 1..1 as it is the input field.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 4
Working with Tabstrip in Webdynpro for ABAP

Select the fields you want to display from the table SFLIGHT using “Add attribute from
structure” button.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 5
Working with Tabstrip in Webdynpro for ABAP
Similarly create the remaining two nodes SFLIGHT and SPFLI with corresponding attributes. Make the
cardinality as 0..N for these two nodes. Finally the context in the component controller looks like the below
figure.

Design View
(cid:122) Create a view for the selection. Activate the component at this point of time.
(cid:122) On the Context Tab, drag the nodes from the Component Controller context and drop it onto the Main
View Context.

(cid:122) Define the layout of the view. Create a label to the input field. Right click on
ROOTUIELEMENTCONTAINER and insert element as shown below.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 6
Working with Tabstrip in Webdynpro for ABAP

Create a label by specifying the type as label.

(cid:122) Create the INPUT field and set the Property as shown in the figure. Click on the “value” field and select
the Carrid node from the context Main view. This will be input field for the application.

(cid:122) Create one Button and if you click this button the flight details will be display in the table.
In button properties give action as SELECTION.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 7
Working with Tabstrip in Webdynpro for ABAP
If you give the property as SELECTION, then one event handler will generate for this button
with name ONACTIONSELECTION. In this handler you need to write the code that you want to
execute when ever button is pressed.

(cid:122) Creation of TABSRIP. To create Tabstrip insert Tabstrip element in your layout, further to
create n no. of tabs, right click on the Tabstrip and insert tab as shown below.

(cid:122) In the current application insert two tabs.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 8
Working with Tabstrip in Webdynpro for ABAP

Note: In each tab only one element can be created. The UI Element ‘transparent container’ can be used to have multiple
elements in a single tab.

(cid:122) We need to add elements to tab separately. In the first tab add a table with Sflight node
details. And in the second tab add a table with Spfli node details.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 9
Working with Tabstrip in Webdynpro for ABAP

(cid:122) After adding table element to the tab, Bind the Table with the corresponding Nodes we
created in the Context Component. The same is shown below.

(cid:122) Select the context and we get the nodes in the context of the view. Select the Sflight node
and we get the below details.
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com
© 2009 SAP AG 10