Skip to Content

Describtion :
It will provide multiple instance of the UI element having distinct values in the node .
On click of Plus button addition of the same ui element in different line , on Click of minus button
deletion of UI elements .

Create a Multipane UI element , Insert a UI called Transaparent Container .
Assign all the UI elements you want to get repeated.Please find the screen shot for UI
element used for the example.

/wp-content/uploads/2012/05/multipane_1_99771.png

Bind the data source of multipane to the context node where you will have distinct values .

/wp-content/uploads/2012/05/multipane_2_99772.png

Add the below code in WDDOINIT method so that intially we can see one isntance of the UI element.
method WDDOINIT .

    DATA lo_nd_test_node TYPE REF TO if_wd_context_node.
    DATA lo_el_test_node TYPE REF TO if_wd_context_element.
    DATA ls_test_node TYPE wd_this->element_test_node.
    data lt_test_node type wd_this->elements_test_node.
*   navigate from <CONTEXT> to <TEST_NODE> via lead selection
    lo_nd_test_node = wd_context->get_child_node( name = wd_this->wdctx_test_node ).

*   get element via lead selection
    lo_el_test_node = lo_nd_test_node->get_element(  ).

**   get all declared attributes
*    lo_el_test_node->get_static_attributes(
*      IMPORTING
*        static_attributes = ls_test_node ).
ls_test_node-name = ‘1’.
append ls_test_node to lt_test_node .

lo_nd_test_node->bind_table( lt_test_node ) .

endmethod.

Add the below code ONACTIONPOSITIVE

method ONACTIONPOSITIVE .
   DATA lo_nd_test_node TYPE REF TO if_wd_context_node.
    DATA lo_el_test_node TYPE REF TO if_wd_context_element.
    DATA ls_test_node TYPE wd_this->element_test_node.
    data lt_test_node type wd_this->elements_test_node.
*   navigate from <CONTEXT> to <TEST_NODE> via lead selection
    lo_nd_test_node = wd_context->get_child_node( name = wd_this->wdctx_test_node ).

*   get element via lead selection
    lo_el_test_node = lo_nd_test_node->get_element(  ).

*   get all declared attributes
*    lo_el_test_node->get_static_attributes(
*      IMPORTING
*        static_attributes = ls_test_node ).
    data : lv_lines type string .

    lo_nd_test_node->get_Static_attributes_table( IMPORTING table = lt_test_node ) .

    lv_lines = lines( lt_test_node ).

ls_test_node-name = lv_lines + 1.
append ls_test_node to lt_test_node .

lo_nd_test_node->bind_table( lt_test_node ) .
endmethod.

Add the below code ONACTIONNEGATIVE

method ONACTIONNEGATIVE .

   DATA lo_nd_test_node TYPE REF TO if_wd_context_node.
    DATA lo_el_test_node TYPE REF TO if_wd_context_element.
    DATA ls_test_node TYPE wd_this->element_test_node.
    data lt_test_node type wd_this->elements_test_node.
*   navigate from <CONTEXT> to <TEST_NODE> via lead selection
    lo_nd_test_node = wd_context->get_child_node( name = wd_this->wdctx_test_node ).

*   get element via lead selection
    lo_el_test_node = lo_nd_test_node->get_element(  ).

*   get all declared attributes
*    lo_el_test_node->get_static_attributes(
*      IMPORTING
*        static_attributes = ls_test_node ).
    data : lv_lines type string .

    lo_nd_test_node->get_Static_attributes_table( IMPORTING table = lt_test_node ) .

    lv_lines = lines( lt_test_node ).

* ls_test_node-name = lv_lines – 1.
DELETE lt_test_node where name = lv_lines.
* append ls_test_node to lt_test_node .

lo_nd_test_node->bind_table( lt_test_node ) .

endmethod.

Output :

1. For the first run we have the single element which again can be added on click of plus ➕ button

/wp-content/uploads/2012/05/init_1_99803.png

2. Once you click on Add button you can add the smiliar line with same or different details but you will nto be allowed 

to delete the first line as this is first instance . You can add as many as the lines or details you want to add there is no

restriction on the same . If the lines incresase more then page then a horizontall scroll will appear .

/wp-content/uploads/2012/05/init_2_99805.png

3. On click on button Minus ( – ) the ui element inside the container will get deleted . In my scenario i have deleted the lines twice .

/wp-content/uploads/2012/05/init_3_99806.png

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply