regarding Tabstrip Development

[Former Member]

Hi Everybody,

i am New to Webdynpro.

Can anybody help me How to work with Tabstrip?

Regards

Basha

[Former Member · Accepted solution]

Hi baasha,

Following are the steps to be followed while designing tabstrip in webdynpro-abap....

Steps by step process to develop webdynpro tabstrip application.

Step 1:----

Go to transaction se80 select webdynpro component/intf.

Give the name of component zwd_demo.

Following screen is displayed select yes

Select component controller from the following screen.

And press ok .

Step 2:----

Click on the component controller and create the context ---

Right click on the context - insert---node.

Give the node name ,table name and click on the add attributes

From structure button..

Select the fields from the table pa0000 and click ok ..

In the same process insert the node for the tableu2019s pa0001,

Pa0009.

In the create node screen of table pa0001 change the cardinality as 0:n

Same way create node and change the cardinality as 0:n.

Save check activate .

Step 3:----

Now create the view----

Right click on the component and select -insert-view

Give the view name and description and select ok .

Following screen appears u2026

Right click on the root element container---insert element.

And create element with the following name and click ok .

a)u2026.

b)u2026

Right click on the tray and insert input fieldu2026..

Same way insert the label u2026..

Repeat the process (a) and (b) and insert input 2 and label2.

c).

Create the tabstrip element in the view2 by right clicking on the route element--

Insertelementtabstrip.

d).

Right click on the tab button -insert tab -- tab give the text in the caption.

Repeat the step (d) and create tab_1 tab_2.

e).

Right click on the tab click on add element tab-isert table in the tab

Repeat for tab_1 and tab_2.

f).

Now right click on the table and click on the create binding -

---

with context --

Add from table ,give the table name .

Repeat for tab_1 and tab_2.

Step 4:--

Insert the code in the action button of the view1 u2026.

Code for display data from pa0002,pa0001,pa0009,pa0007.

METHOD ONACTIONGETDISPLAY1 .

************for pa0002 infotype***********************

• types decleration ******************************

TYPES:BEGIN OF TY_PA0002,

NACHN TYPE PA0002-NACHN,

NAME2 TYPE PA0002-NAME2,

NACH2 TYPE PA0002-NACH2,

VORNA TYPE PA0002-VORNA,

CNAME TYPE PA0002-CNAME,

TITEL TYPE PA0002-TITEL,

ENDDA TYPE PA0002-ENDDA,

BEGDA TYPE PA0002-BEGDA,

AEDTM TYPE PA0002-AEDTM,

UNAME TYPE PA0002-UNAME,

ANRED TYPE PA0002-ANRED,

GESCH TYPE PA0002-GESCH,

GBDEP TYPE PA0002-GBDEP,

NATIO TYPE PA0002-NATIO,

END OF TY_PA0002.

DATA:IT_PA0002 TYPE STANDARD TABLE OF TY_PA0002.

************for pa0001 infotype***********************

• types decleration ******************************

TYPES:BEGIN OF TY_PA0001,

BURKS TYPE PA0001-BUKRS,

WERKS TYPE PA0001-WERKS,

PERSK TYPE PA0001-PERSK,

VDSK1 TYPE PA0001-VDSK1,

KOSTL TYPE PA0001-KOSTL,

ORGEH TYPE PA0001-ORGEH,

PLANS TYPE PA0001-PLANS,

GSBER TYPE PA0001-GSBER,

BTRTL TYPE PA0001-BTRTL,

OTYPE TYPE PA0001-OTYPE,

END OF TY_PA0001.

DATA:IT_PA0001 TYPE STANDARD TABLE OF TY_PA0001.

****************************************************************

************for pa0009 infotype***********************

• types decleration ******************************

TYPES:BEGIN OF TY_PA0009,

OPKEN TYPE PA0009-OPKEN,

BETRG TYPE PA0009-BETRG,

WAERS TYPE PA0009-WAERS,

ANZHL TYPE PA0009-ANZHL,

ZEINH TYPE PA0009-ZEINH,

BNKSA TYPE PA0009-BNKSA,

ZLSCH TYPE PA0009-ZLSCH,

BANKS TYPE PA0009-BANKS,

BANKL TYPE PA0009-BANKL,

BANKN TYPE PA0009-BANKN,

BANKP TYPE PA0009-BANKP,

BKONT TYPE PA0009-BKONT,

END OF TY_PA0009.

DATA:IT_PA0009 TYPE STANDARD TABLE OF TY_PA0009.

*************************************************************

**************************************************************

************for pa0007 infotype***********************

• types decleration ******************************

TYPES:BEGIN OF TY_pa0007 ,

SCHKZ TYPE PA0007-SCHKZ,

EMPCT TYPE PA0007-EMPCT,

MOSTD TYPE PA0007-MOSTD,

WOSTD TYPE PA0007-WOSTD,

ARBST TYPE PA0007-ARBST,

WKWDY TYPE PA0007-WKWDY,

JRSTD TYPE PA0007-JRSTD,

TEILK TYPE PA0007-TEILK,

DYSCH TYPE PA0007-DYSCH,

KZTIM TYPE PA0007-KZTIM,

WWEEK TYPE PA0007-WWEEK,

END OF TY_PA0007.

DATA:IT_PA0007 TYPE STANDARD TABLE OF TY_PA0007.

• ************************************************************************

• ***********************************************************************

Read the data from the context from the selection node -

---

pernr

Selection node -

---

subty.

********************************************************************

********************selection screen******************************

********************************************************************

DATA:

NODE_SELECT_SCREEN TYPE REF TO IF_WD_CONTEXT_NODE,

ELEM_SELECT_SCREEN TYPE REF TO IF_WD_CONTEXT_ELEMENT,

STRU_SELECT_SCREEN TYPE WD_THIS->ELEMENT_SELECT_SCREEN ,

ITEM_PERNR LIKE STRU_SELECT_SCREEN-PERNR.

• navigate from <CONTEXT> to <SELECT_SCREEN> via lead selection

NODE_SELECT_SCREEN = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_SELECT_SCREEN ).

• get element via lead selection

ELEM_SELECT_SCREEN = NODE_SELECT_SCREEN->GET_ELEMENT( ).

• get single attribute

ELEM_SELECT_SCREEN->GET_ATTRIBUTE(

EXPORTING

NAME = `PERNR`

IMPORTING

VALUE = ITEM_PERNR ).

• DATA:

• NODE_SELECT_SCREEN TYPE REF TO IF_WD_CONTEXT_NODE,

• ELEM_SELECT_SCREEN TYPE REF TO IF_WD_CONTEXT_ELEMENT,

• STRU_SELECT_SCREEN TYPE WD_THIS->ELEMENT_SELECT_SCREEN ,

DATA: ITEM_SUBTY LIKE STRU_SELECT_SCREEN-SUBTY.

• navigate from <CONTEXT> to <SELECT_SCREEN> via lead selection

NODE_SELECT_SCREEN = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_SELECT_SCREEN ).

• get element via lead selection

ELEM_SELECT_SCREEN = NODE_SELECT_SCREEN->GET_ELEMENT( ).

• get single attribute

ELEM_SELECT_SCREEN->GET_ATTRIBUTE(

EXPORTING

NAME = `SUBTY`

IMPORTING

VALUE = ITEM_SUBTY ).

Retrieve the data from the infotype pa0002 and place in the internal table it_pa0002.

Follow the same steps as data retrieved from pa0002

******************************************************************

• Data retrieval from pa0002 into it_pa0002******************

SELECT NACHN

NAME2

NACH2

VORNA

CNAME

TITEL

ENDDA

BEGDA

AEDTM

UNAME

ANRED

GESCH

GBDEP

NATIO

FROM PA0002 INTO TABLE IT_PA0002

WHERE PERNR = ITEM_PERNR

AND SUBTY = ITEM_SUBTY.

Read the data from the context node node_pa0002

*******************************************************************

• CASE :1 BINDING FOR THE PERSONL DATA NODE PA0002 WITH IT_PA0002.

********************************************************************

DATA:

NODE_PA0002 TYPE REF TO IF_WD_CONTEXT_NODE,

ELEM_PA0002 TYPE REF TO IF_WD_CONTEXT_ELEMENT,

STRU_PA0002 TYPE WD_THIS->ELEMENT_PA0002 .

• navigate from <CONTEXT> to <PA0002> via lead selection

NODE_PA0002 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_PA0002 ).

• get element via lead selection

ELEM_PA0002 = NODE_PA0002->GET_ELEMENT( ).

Call the method node_pa0002->bindtable and bind the internal table

CALL METHOD NODE_PA0002->BIND_TABLE

EXPORTING

NEW_ITEMS = IT_PA0002.

• SET_INITIAL_ELEMENTS = ABAP_TRUE

• INDEX =

************************************************************************

***********DATA RETRIEVAL FOR PA0001*********************************

SELECT BUKRS

WERKS

PERSK

VDSK1

KOSTL

ORGEH

PLANS

GSBER

BTRTL

OTYPE

FROM PA0001 INTO TABLE IT_PA0001

WHERE PERNR = ITEM_PERNR

AND SUBTY = ITEM_SUBTY.

*********************************************************************

*********BINDING THE TABLE IT_PA0001*******************************

DATA:

NODE_PA0001 TYPE REF TO IF_WD_CONTEXT_NODE,

ELEM_PA0001 TYPE REF TO IF_WD_CONTEXT_ELEMENT,

STRU_PA0001 TYPE WD_THIS->ELEMENT_PA0001 .

• navigate from <CONTEXT> to <PA0001> via lead selection

NODE_PA0001 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_PA0001 ).

• get element via lead selection

ELEM_PA0001 = NODE_PA0001->GET_ELEMENT( ).

CALL METHOD NODE_PA0001->BIND_TABLE

EXPORTING

NEW_ITEMS = IT_PA0001.

• SET_INITIAL_ELEMENTS = ABAP_TRUE

• INDEX =

*

*************************************************************************

***********DATA RETRIEVAL FOR PA0001***********************************

*************************************************************************

SELECT OPKEN

BETRG

WAERS

ANZHL

ZEINH

BNKSA

ZLSCH

BANKS

BANKL

BANKN

BANKP

BKONT

FROM PA0009 INTO TABLE IT_PA0009

WHERE PERNR = ITEM_PERNR

AND SUBTY = ITEM_SUBTY.

if sy-subrc EQ 0.

endif.

*********************************************************************

*********BINDING THE TABLE IT_PA0009*******************************

DATA:

NODE_PA0009 TYPE REF TO IF_WD_CONTEXT_NODE,

ELEM_PA0009 TYPE REF TO IF_WD_CONTEXT_ELEMENT,

STRU_PA0009 TYPE WD_THIS->ELEMENT_PA0009 .

• navigate from <CONTEXT> to <PA0009> via lead selection

NODE_PA0009 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_PA0009 ).

• get element via lead selection

ELEM_PA0009 = NODE_PA0009->GET_ELEMENT( ).

CALL METHOD NODE_PA0009->BIND_TABLE

EXPORTING

NEW_ITEMS = IT_PA0009.

• SET_INITIAL_ELEMENTS = ABAP_TRUE

• INDEX =

******************************************************************

• Data retrieval from pa0007 into it_pa0002******************

SELECT SCHKZ

EMPCT

MOSTD

WOSTD

ARBST

WKWDY

JRSTD

TEILK

DYSCH

KZTIM

WWEEK

FROM PA0007 INTO TABLE IT_PA0007

WHERE PERNR = ITEM_PERNR

AND SUBTY = ITEM_SUBTY.

DATA:

NODE_PA0007 TYPE REF TO IF_WD_CONTEXT_NODE,

ELEM_PA0007 TYPE REF TO IF_WD_CONTEXT_ELEMENT,

STRU_PA0007 TYPE WD_THIS->ELEMENT_PA0007 .

• navigate from <CONTEXT> to <PA0007> via lead selection

NODE_PA0007 = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_PA0007 ).

• @TODO handle not set lead selection

IF ( NODE_PA0007 IS INITIAL ).

ENDIF.

• get element via lead selection

ELEM_PA0007 = NODE_PA0007->GET_ELEMENT( ).

CALL METHOD NODE_PA0007->BIND_TABLE

EXPORTING

NEW_ITEMS = IT_PA0007.

• SET_INITIAL_ELEMENTS = ABAP_TRUE

• INDEX =

***************************************************************************

**************************************************************************

WD_THIS->FIRE_TOMAINVIEW_PLG(

).

ENDMETHOD.

Now create an webdynpro application and activate it

Output is displayed as -

---

When clicked display button tabstrip is displayed as follows u2026u2026..

Thanks & Regards

suman

[thomas_jung · Accepted solution]

First of all if you need help for a particluar UI element, why not start by looking in the online help. Each UI element is documented and there are quite often references to example applications in your system. Here is the link for the tabstrip:

http://help.sap.com/saphelp_nw70/helpdata/EN/e8/ac884118aa1709e10000000a155106/frameset.htm

Second is the posting by suman kumar. The poster gave him 10 points and marked the question as answered so it must have helped - but really was all that necessary? You posted a complete application with tons of code for data retrieval and context population when the question was just about how to use a tab strip. I think there might have been 2 or 3 sentences about tabStrips in that message. I'm all for providing details, but lets not go crazy. Stick to the topic at hand. There is no reason for a few hundred line code listing for the question at hand.

[uday_gubbala2]

Hi Basha,

Making use of the TabStrip ui element in WebDynpro ABAP is quite easy. You just have to first insert an element of type TabStrip. You can then right click on it and create as many tabs as you want by seleting the option "Insert Tab". Now you can go to each tab and insert any ui element that you would like to appear within this tab. You can insert the elements by right clicking on the Tab's created earlier and selecting the option as "Add Element To Tab".

Suppose in your view you have an input field where the user enters a KUNNR value and you want to display the data from KNA1 & VBAK. You have a tabstrip with 2 tabs 1 to display the data from KNA1 & the other to display data from VBAK. You insert a Table ui element into each tab so as to display the corresponding contextual data. The rest of the procedure is just normal. I have 3 context nodes:

1) Node name : INPUT

Attribute present under this: KUNNR type KNA1-KUNNR " Holds the value entered by user into the input field

2) Node name: KNA1

Contains attributes from KNA1 table

3) Node name: VBAK

Contains attributes from VBAK table

I have bound the table present in the first tab of the tabstrip to KNA1 & the 2nd table present in the 2nd tab with VBAK.

I have put a button beside the input field and when the user enters a KUNNR value and presses on this button it triggers the following method below:

METHOD onactionfetch .
  DATA : lr_node TYPE REF TO if_wd_context_node,
         lv_kunnr TYPE wd_this->element_input-kunnr,
         lt_kna1 TYPE wd_this->elements_kna1,
         lt_vbak TYPE wd_this->elements_vbak.

  lr_node = wd_context->get_child_node( name = 'INPUT' ).
  CALL METHOD lr_node->get_attribute
    EXPORTING
      name  = 'KUNNR'
    IMPORTING
      value = lv_kunnr.

  SELECT * FROM kna1 INTO TABLE lt_kna1 WHERE kunnr = lv_kunnr.

  SELECT * FROM vbak INTO TABLE lt_vbak WHERE kunnr = lv_kunnr.

  lr_node = wd_context->get_child_node( name = 'KNA1' ).

  lr_node->bind_table( new_items = lt_kna1 ).

  lr_node = wd_context->get_child_node( name = 'VBAK' ).

  lr_node->bind_table( new_items = lt_vbak ).
ENDMETHOD.

Regards,

Uday

[Former Member]

First insert the elemnet Tabstrip in your view. Then right click the elment and insert as many tabs as you want on your tabstrip

Regards

Naresh