<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%5Csc...!</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%5Csc...!</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%5Csc...!</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%5Csc...!</p><p><img /></body>
