WEBDYNPRO TABLE POPIN

                      Created By        : MUHAMMED RIYAS V A

                           Subject         : TABLE POPIN

                               Date          :     05/04/2012

                             Area            :    ABAP WEBDYNPRO

Purpose :

In this application user can  display a space below the each row of the table by selecting that  particular row.

Desired Output :  

Steps :

Here I am displaying Sales Document: Header Data (VBAK) in the main table and Sales Document: Item Data (VBAP ) as table popin.

Step 1 :

Create a WebDynpro component with window ( Default )  and View ( Main )’ as shown below.

Step 2 :

         Create a node (VBAK) in the main  with cardinality 0: n. In the node add attributes from the table VBAK and add 2 extra fields of type ‘STRING’ and ‘WDY_BOOLEAN’. Here extra fields are TABLEPOPIN and FLAG .

Step 3 :

Similarly create one more node (VBAP) with attributes of VBAP table.

Step 4 :

   In layout of the Main view insert a ‘Table’ UI element.

Step 5 :

    In the table insert one column as shown below.

Step 6 :

              Insert cell variant in the first column of the table by right clicking on the column. The figure shows the details.

Step 7 :

           In properties of cell_variant give a name to variant key. Here I am giving it as ‘KEY’.

Step 8 :

          In properties of the column1, give the variant key name in the row selectedCellVariant.(the same name of the variant key)

Step 9 :

              Then go to the properties of the UI element table (VBAK) and bind the data source with VBAK node and selected popin with TABLEPOPIN attribute in VBAK node.

Step 10 :

           Insert  one more column to the table and insert cell editor to that column. Bind the text of cell editor with the attribute ‘VBELN’.

Step 11 :

            Similarly create columns for all the attributes of the VBAK node  except  ‘flag’ and ‘tablepopin’ attribute. And bind the text with appropriate attributes from vbak node.

Step 12 :

           Insert table popin to the table (VBAK_TABLE) as shown below.

Step 13 :

              In table popin insert content of type ‘TRANSPARENT CONTAINER’ as shown below.

Step 14 :

In that container insert one table UI element and bind that table with VBAP node.

Step 15 :

In the properties of cell_varient ( in first column of VBAK ) create one event for ‘Ontoggle’ as shown below.

Step 16 :

Write the below code in the method ‘WDDOINIT’.

method WDDOINIT .

DATA lo_nd_vbak TYPE REF TO if_wd_context_node.
DATA lt_vbak TYPE wd_this->elements_vbak.
lo_nd_vbak = wd_context->get_child_node( name = wd_this->wdctx_vbak ).

SELECT * from vbak into CORRESPONDING FIELDS OF TABLE lt_vbak UP TO 10rows.

lo_nd_vbak->bind_table( new_items = lt_vbak set_initial_elements = abap_true ).

endmethod.

Step 17 :

          Write the below code in method ‘ONACTIONTOGGLE’.

METHOD onactiontoggle .

DATA lo_nd_vbak TYPE REF TO if_wd_context_node.
DATA lo_nd_vbap TYPE REF TO if_wd_context_node.
DATA lt_vbak TYPE wd_this->elements_vbak.
DATA ls_vbak TYPE wd_this->element_vbak.
DATA lt_vbap TYPE wd_this->elements_vbap.
DATA v_tabix TYPE sy-tabix.

lo_nd_vbak = wd_context->get_child_node(
name = wd_this->wdctx_vbak ).
lo_nd_vbap = wd_context->get_child_node(
name = wd_this->wdctx_vbap ).

lo_nd_vbak->get_static_attributes_table(
IMPORTING table = lt_vbak ).

READ TABLE lt_vbak INTO ls_vbak
WITH KEY tablepopin = ‘TABLEPOPIN’
flag = ‘X’.

IF sy-subrc EQ 0.
v_tabix = sy-tabix.
CLEAR: ls_vbak-flag,
ls_vbak-tablepopin.
MODIFY lt_vbak FROM ls_vbak
INDEX v_tabix.
CLEAR v_tabix.

ENDIF.

READ TABLE lt_vbak INTO ls_vbak
WITH KEY tablepopin = ‘TABLEPOPIN’.

IF sy-subrc EQ 0.

v_tabix = sy-tabix.
ls_vbak-flag = ‘X’.
MODIFY lt_vbak FROM ls_vbak
INDEX v_tabix.
CLEAR v_tabix.

SELECT * FROM vbap INTO CORRESPONDING FIELDS OF TABLE lt_vbap
WHERE vbeln = ls_vbak-vbeln.

lo_nd_vbap->bind_table( new_items =
lt_vbap set_initial_elements = abap_true ).

ENDIF.

lo_nd_vbak->bind_table( new_items =
lt_vbak set_initial_elements = abap_true ).

ENDMETHOD.

Step 17 :

          Create web application component and execute.