Skip to Content

Table in Table Popin

<body><p>Step 1 </p><p>Create a Web Dynpro Component and add a Table UI element.</p><p>Create a node in context tab Header_Node with cardinality 0 to n, the attributes are mapped to EKKO Table, add an additional attribute TABLE_POPIN type String</p><p><img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr1.1.1.JPG|height=483|alt=image|width=427|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr1.1.1.JPG|border=0!</p><br />write a supply function to populate the header table with values<p> 

* data declaration</p><p>

  DATA lt_header_node TYPE wd_this->Elements_header_node.<br />

  DATA ls_header_node LIKE LINE OF lt_header_node.<br />

<br />

* @TODO compute values<br />

* e.g. call a data providing FuBa<br />

  DATA itab type table of ekko.<br />

<br />  select * from ekko into table itab up to 10 rows.<br />

<br />

* bind all the elements<br />

  node->bind_table(<br />

    new_items            =  itab<br />

    set_initial_elements = abap_true ). 

</p><p> </p><p>Step 2</p><p>Create a sub node Item_Node with cardinality 0 to n, the attributes are mapped to EKPO Table</p><p><img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr2_upd.JPG|height=487|alt=image|width=259|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr2_upd.JPG|border=0!</p><p>Create Binding for the table as shown in the diagram i.e unbind the TABLE_POPIN attribute,  </p><p><img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr3_upd.JPG|height=310|alt=image|width=595|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr3_upd.JPG|border=0! </p><p> </p><p>!https://weblogs.sdn.sap.com/cs/blank/edit/wlg/C:%5CDocuments%20and%20Settings%5Cparun%5CDesktop%5Cscr3|alt=|src=https://weblogs.sdn.sap.com/cs/blank/edit/wlg/C:%5CDocuments%20and%20Settings%5Cparun%5CDesktop%5Cscr3!</p><p>Step 3</p><p>Now remove the Cell Editor(Textview) for the first column(EBELN) of the table and insert a cell Editor with UI element linktoaction</p><p> !https://weblogs.sdn.sap.com/cs/blank/edit/wlg/C:%5CDocuments%20and%20Settings%5Cparun%5CDesktop%5Cscr4|alt=|src=https://weblogs.sdn.sap.com/cs/blank/edit/wlg/C:%5CDocuments%20and%20Settings%5Cparun%5CDesktop%5Cscr4!</p><p>Now map the Text Property of linktoaction to EBELN </p><br /><p><img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr5_up.JPG|height=356|alt=image|width=361|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr5_up.JPG|border=0!</p><p>Now create an event for linktoaction UI element </p><p>After doing the above said steps the table will look like this</p><p><img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr7_upd.JPG|height=313|alt=image|width=485|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr7_upd.JPG|border=0! </p><p> </p><p>Now bind the property of the table, Selected Popin to TABLE_POPIN </p><p> <img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr4_upd1.JPG|height=299|alt=image|width=406|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr4_upd1.JPG|border=0! </p><p> </p><p>Step 4</p><p>Now include a Table Popin for the first column in which we are going to see the item details for that particular ebeln </p><p> </p><p><img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr6_upd.JPG|height=319|alt=image|width=562|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr6_upd.JPG|border=0!</p><p>Create a transparent container to the table popin by right click and

create a Transparentcontainer and Create a table UI element inside the

transparentcontainer and bind values of Item_node to it</p><p> </p><p> <img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr8.1.JPG|height=442|alt=image|width=335|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr8.1.JPG|border=0! </p><p> </p><p>Step 5 </p><p>Now for the linktoaction onaction event write the code for the Ebeln column of the Header_Node </p><p> <img  />//weblogs.sdn.sap.com/weblogs/images/251950976/link_to_action.JPG|height=294|alt=image|width=349|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/link_to_action.JPG|border=0!</p><p> DATA: lr_element TYPE REF TO if_wd_context_element,<br />

  lv_index_table TYPE i,<br />

  lv_index TYPE i,<br />

  wd_node TYPE REF TO if_wd_context_node.<br />

<br />

<br />

** Get row number from which  Table value was selected<br />

  lr_element = wdevent->get_context_element( ‘CONTEXT_ELEMENT’ ).<br />

  lv_index_table = lr_element->get_index( ).<br />

  wd_node = wd_context->get_child_node( ‘HEADER_NODE’ ).<br />

  wd_node->set_lead_selection_index( index = lv_index_table ).<br />

<br />

** Get the value on lead selection from the HEADER_NODE<br />

    DATA lo_nd_header_node TYPE REF TO if_wd_context_node.<br />

    DATA lo_el_header_node TYPE REF TO if_wd_context_element.<br />

    DATA ls_header_node TYPE wd_this->element_header_node.<br />

*   navigate from <CONTEXT> to <HEADER_NODE> via lead selection<br />

    lo_nd_header_node = wd_context->get_child_node( name = wd_this->wdctx_header_node ).<br />

<br />

*   @TODO handle not set lead selection<br />

    IF lo_nd_header_node IS INITIAL.<br />

    ENDIF.<br />

<br />

*   get element via lead selection<br />

    lo_el_header_node = lo_nd_header_node->get_element(  ).<br />

<br />

*   @TODO handle not set lead selection<br />

    IF lo_el_header_node IS INITIAL.<br />

    ENDIF.<br />

<br />

*   get all declared attributes<br />

    lo_el_header_node->get_static_attributes(<br />

      IMPORTING<br />

        static_attributes = ls_header_node ).<br />

<br />

** Get the values from Item Table (ITEM_NODE) and bind values to popin table<br />

*  DATA lo_nd_header_node TYPE REF TO if_wd_context_node.<br />

  DATA lo_nd_item_node TYPE REF TO if_wd_context_node.<br />

  DATA lo_el_item_node TYPE REF TO if_wd_context_element.<br />

  DATA ls_item_node TYPE wd_this->element_item_node.<br />

* navigate from <CONTEXT> to <HEADER_NODE> via lead selection<br />

  lo_nd_header_node = wd_context->get_child_node( name = wd_this->wdctx_header_node ).<br />

<br />

* @TODO handle not set lead selection<br />

  IF lo_nd_header_node IS INITIAL.<br />

  ENDIF.<br />

<br />

* navigate from <HEADER_NODE> to <ITEM_NODE> via lead selection<br />

  lo_nd_item_node = lo_nd_header_node->get_child_node( name = wd_this->wdctx_item_node ).<br />

<br />

* @TODO handle not set lead selection<br />

  IF lo_nd_item_node IS INITIAL.<br />

  ENDIF.<br />

<br />

* get element via lead selection<br />

  lo_el_item_node = lo_nd_item_node->get_element(  ).<br />

<br />

* @TODO handle not set lead selection<br />

  IF lo_el_item_node IS INITIAL.<br />

  ENDIF.<br />

<br />

data: itab1 type table of ekpo.<br />

<br />

select * from ekpo into table itab1 where EBELN eq  ls_header_node-EBELN.<br />

<br />

<br />

lo_nd_item_node->bind_table( itab1 ).<br />

<br />

<br />

<br />

** This Code is used to Set the Table Popin inside the Table<br />

** Call the attribute Table_popin from the Header_Node<br />

<br />

*  DATA lo_nd_header_node TYPE REF TO if_wd_context_node.<br />

*  DATA lo_el_header_node TYPE REF TO if_wd_context_element.<br />

*  DATA ls_header_node TYPE wd_this->element_header_node.<br />

  DATA lv_table_popin LIKE ls_header_node-table_popin.<br />

* navigate from <CONTEXT> to <HEADER_NODE> via lead selection<br />

  lo_nd_header_node = wd_context->get_child_node( name = wd_this->wdctx_header_node ).<br />

<br />

* @TODO handle not set lead selection<br />

  IF lo_nd_header_node IS INITIAL.<br />

  ENDIF.<br />

<br />

* get element via lead selection<br />

  lo_el_header_node = lo_nd_header_node->get_element(  ).<br />

<br />

* @TODO handle not set lead selection<br />

  IF lo_el_header_node IS INITIAL.<br />

  ENDIF.<br />

<br />

* get single attribute<br />

  lo_el_header_node->set_attribute(<br />

    EXPORTING<br />

      name =  `TABLE_POPIN`           “This is the attribute declared in the Header_Node<br />

*    IMPORTING<br />

      value = ‘TABLEPOPIN’ ).         “This is the ID of Table Popin from the Main View

</p><p>  </p><p>Step 6 </p><p>Now Create an event for the Onclose event of Table Popin and write the code </p><p><img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr9.JPG|height=202|alt=image|width=259|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr9.JPG|border=0!</p><p>

Data:SELECT_ELEMENT      type ref to if_wd_context_element.<br />

<br />

  CALL METHOD WDEVENT->GET_CONTEXT_ELEMENT<br />

    EXPORTING<br />

      NAME   = ‘CONTEXT_ELEMENT'<br />

    RECEIVING<br />

      VALUE  =  SELECT_ELEMENT      .<br />

<br />

    select_element->set_attribute( name = ‘TABLE_POPIN'<br /> value = ” ). ” TABLE_POPIN is the attribute on Header_Node

</p><p> </p><p>!https://weblogs.sdn.sap.com/cs/blank/edit/wlg/C:%5CDocuments%20and%20Settings%5Cparun%5CDesktop%5Cscr9|alt=|src=https://weblogs.sdn.sap.com/cs/blank/edit/wlg/C:%5CDocuments%20and%20Settings%5Cparun%5CDesktop%5Cscr9!</p><p>Step7</p><p>Create a Web Dynpro Application</p><p>then Save, Activate and Test</p><p>the output will be  </p><p><img  />//weblogs.sdn.sap.com/weblogs/images/251950976/scr10.JPG|height=324|alt=image|width=628|src=https://weblogs.sdn.sap.com/weblogs/images/251950976/scr10.JPG|border=0!</p><p> </p><p>when we click the link, a table with corresponding items will be displayed inside the table </p><p>!https://weblogs.sdn.sap.com/cs/blank/edit/wlg/C:%5CDocuments%20and%20Settings%5Cparun%5CDesktop%5Cscr11|alt=|src=https://weblogs.sdn.sap.com/cs/blank/edit/wlg/C:%5CDocuments%20and%20Settings%5Cparun%5CDesktop%5Cscr11!</p><p><img  /></body>

5 Comments
You must be Logged on to comment or reply to a post.
  • Blog is good; however, with each subsequent click the entries that displayed in table appears in all other table that are currently opened within TablePopin.

    so far I am not really succeeded in fixing this.

      • For example from your screen shot, when I click on document number 1, all the entries that correspond to document number 1 will be displayed in table within TablePopin beneath document number1,now  when I click on document number ‘3000000005’ all the entries that correspond to this document will now be displayed on both the table, table for the document number 1 and ‘300000005’.hope I made my point clear . Is it working for you, such that with each click will not affect the entries in the table already displayed on the previous selection?
        • Hi

          Check your code thoroughly, Im getting the correct output.
          when i click on Document number the corresponding Item detail is displaying for me.
          I checked it by clicking ‘300000005’and ‘300000006’its corresponding items only displayed.

          Regards
          Arun.P

          • The problem could be that all popin table data were selected together in your codes.  If you follow Arun’s steps correctly, you should only get a subset of data on the action of  LinkToAction.  ^_^