Skip to Content

                      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 :   

output.JPG

         

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.

              step1.JPG

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 .

                        step2.JPG

Step 3 : 

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

             step3.JPG

Step 4 : 

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

                      step4.JPG

Step 5 : 

    In the table insert one column as shown below.

                    step5.JPG

Step 6 : 

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

            step6.JPG

                      

Step 7 :

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

                   step7.JPG

Step 8 :

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

                     step8.JPG

                           

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.

            

               step9.JPG

      

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

step10.JPG

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.

step11.JPG         


Step 12 :

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

step12.JPG

Step 13 :

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

step13.JPG

Step 14 :

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

            

step14.JPG

Step 15 :

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

step15.JPG

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 10 rows.

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.

To report this post you need to login first.

18 Comments

You must be Logged on to comment or reply to a post.

      1. tousif ahamed

        Hi Riyas,

        I have developed an application as above but i have two more requirement as below,could you please help me regarding this.

        1.Can we provide icons to control the display like ‘expand’ show all the data header and item data of all at once and hide all at once.

        2. Can we implement display all option on first display.

        Thanks

        Tousif

        (0) 
        1. Muhammed Riyas Post author

          Hi Tousif,

          I think we can provide icons to expand the header with items. But as per my knowledge its not possible to expand more than one header at a time.i.e expand all also not possible.

          If u got any idea on this please let me know.

          Thanks & Regards,

          Muhammed Riyas V A

          (0) 
          1. tousif ahamed

            Hi Riyas,

            I have placed two buttons ‘expand all’ and ‘collapse all’ and able to achieve this by looping the header table and modifying the field table popin to all records for expand all and loop the header table fill item table and bind but i am getting all the items for every header record.any idea how to fix this please let me know.

            Thanks

            Tousif

            (0) 
          2. Arun Krishnamoorthy

            Hi Riyas,

            It is possible to display to expand more than one header at a time. At runtime the system populates the context attribute binded to the table popin with the value ‘tablepopin’. So whichever row of the table holds the value of the attribute tablepopin as ‘tablepopin’ will be expanded.

            You can create an button in the tool bar of the table and on select of that button fill the context attribute binded to the table as ‘TABLEPOPIN’ so all the nodes will be expanded.

            Best Regards,

            Arun Krishnamoorthy

            (0) 
      2. BK Pandey

        Hi Riyas ,

        i am new in ABAP webdynpro , i started learning dynpro with your document posted in internet . thnaks for your good dynpro document. 

        Now i am facing a issue , when scroll vertical bar in table with tab  from bottom to top , when it goes to top , comes down automatically not stay in top . Kindly suggest me .

        Thanks ,

        BK Pandey

        (0) 
  1. Muhammed Riyas Post author

    Hi Thousif & Arun,

    We can expand all the header fields by modifying the field table popin to all records.That is correct. But how can we show different item details corresponding to the header.

    Consider above Example: We have header with 4593(h),4969(h), 4970(h).Assume each header have 2 items. VBAK_TABLE is the header node & VBAP_TABLE is the item

    In design section we have 2 table UI element, one is for header & one is for item.If we expand all 3 header using Expand all button. System will show 1 header table & for each header it will show item tables. So user can see 3 item tables, but in the design section we added only one item table. Header Table is binded to VBAK_TABLE and item table is binded to VBAP_TABLE.

    In ‘EXPAND ALL’ action, the logic to modify tablepopin field value is added as well as the logic fetches all the item details. So VBAP_TABLE contains all the 6 items of 3 header details ( 2 items per header ).

    This VBAP_TABLE is binded to the item tables. So definitely it will show all the items under all the header.

    As per my understanding this logic is working using singleton concept. So Item node contain only one instance at a time.

    How we will achieve this?? Try with dynamic programming it may help you.If you are able to do this please let me know.

    (0) 
  2. Christopher Linke

    Hi,

    what about sorting and filtering within Popin-Table? I didn’t find any solution for this –> Problem is that Popin-Table couldn’t be identified by any id eg.

    Regards

    (0) 
    1. Muhammed Riyas Post author

      Hi Christopher,

      Where u want to sort? In parent table or in child table. I think we can sort it but i guess there is no standard function available for that.

      (0) 

Leave a Reply