Create row dynamically in a table with DropDown on clicking Add button

Scope: This document describes how to create a dynamic row in a table on clicking Add button.

1. Create a Component with the context(componentcontroller) as shown below. Main Node-EMPDETAILS & Sub node-DEPT(for dropDown). And also create supply function for sub node for data filling. (FILL_DEPT)

2. Write the below code in Supply Function FILL_DEPT

* data declaration
   DATA lt_dept TYPE wd_this->elements_dept.
   DATA ls_dept LIKE LINE OF lt_dept.
* @TODO compute values
* e.g. call a data providing FuBa

   ls_dept-deptname = ‘IT’.
   APPEND ls_dept TO lt_dept.

   ls_dept-deptname = ‘Human Resource’.
   APPEND ls_dept TO lt_dept.

   ls_dept-deptname = ‘Travel’.
   APPEND ls_dept TO lt_dept.

   ls_dept-deptname = ‘Employee Movement’.
   APPEND ls_dept TO lt_dept.

   ls_dept-deptname = ‘Finance’.
   APPEND ls_dept TO lt_dept.

* bind all the elements
   node->bind_table(
     new_items            =  lt_dept
     set_initial_elements = abap_true ).

3. Come to View-MAIN and do the context mapping

4. Go to Layout – Create Table UI element and maintain the mapping like below.

5. Insert a Table column(By right clicking on Table) like below.. and Insert DropDownByIndex as Cell Editor —–(By right clicking on Table Column in Hierarchy)

Maintain DDBI binding with DEPENAME attribute of SubNode DEPT

6. Maintain Column Labels – Table will be like below..

7. Now select Table and make the DisplayEmptyRows flag as False from Properties..

8. Insert three buttons one is for Add Row,  another for Remove Row & Remove selected Row.. also add actions for both.. ADDROW, REMOVEROW & REM_SEL_ROW

9. Go to ADDROW action.. and write the below code..

DATA lo_nd_empdetails TYPE REF TO if_wd_context_node.
   DATA lo_el_empdetails TYPE REF TO if_wd_context_element.
   DATA ls_empdetails TYPE wd_this->element_empdetails.

* navigate from <CONTEXT> to <EMPDETAILS> via lead selection
   lo_nd_empdetails = wd_context->get_child_node( name = wd_this->wdctx_empdetails ).

   lo_nd_empdetails->bind_structure(
         new_item = ls_empdetails
         set_initial_elements = abap_false ).

10. Now write the below on REMOVEROW….It removes last row of the Table..

DATA lo_nd_empdetails TYPE REF TO if_wd_context_node.
   DATA lo_el_empdetails TYPE REF TO if_wd_context_element.
   DATA ls_empdetails TYPE wd_this->element_empdetails.

*   navigate from <CONTEXT> to <EMPDETAILS> via lead selection
   lo_nd_empdetails = wd_context->get_child_node( name = wd_this->wdctx_empdetails ).

   DATA: lv_count TYPE i.

   lv_count = lo_nd_empdetails->get_element_count( ).

   IF lv_count IS NOT INITIAL.
     lo_el_empdetails = lo_nd_empdetails->get_element( index = lv_count ).
     lo_nd_empdetails->remove_element( lo_el_empdetails ).
   ENDIF.

11. Write the below code on REM_SEL_ROW,,,,,, – It removes selected row from the Table…

DATA lo_nd_empdetails TYPE REF TO if_wd_context_node.
   DATA lo_el_empdetails TYPE REF TO if_wd_context_element.
   DATA ls_empdetails TYPE wd_this->element_empdetails.

*   navigate from <CONTEXT> to <EMPDETAILS> via lead selection
   lo_nd_empdetails = wd_context->get_child_node( name = wd_this->wdctx_empdetails ).
*   get element via lead selection
   lo_el_empdetails = lo_nd_empdetails->get_element( ).

   IF lo_el_empdetails IS NOT INITIAL.

     lo_nd_empdetails->remove_element( lo_el_empdetails ).

   ENDIF.

12. Create Application and Test.

i.

ii. Add Row

iii. Now you can operate Remove Row & Remove Selected..