Step by Step to create UI elements and context node attribute in the runtime

[JerryWang]

I will use an example to demonstrate.The dynamically created elements are put into the red area below. Input the number of rows you want to dynamically generated and just create button to generate. Currently the content of text view is just filled with VALUE1,2,3,4... In next blog they will be filled with another approach by component usage cloning logic.



1. Create an empty group which acts as a container to hold all dynamically created ui elements.Specify layout as RowLayout.



2. Create an empty context node which also acts as a container for all dynamically created context node attributes.

3. In method WDDOMODIFYVIEW, just store the reference of view, which will be used later to manipulate UI elements after create button is clicked.

method WDDOMODIFYVIEW .

  CHECK first_time = 'X'.

  wd_this->mr_view = view.

endmethod.

4. create a new method in view controller.

In line 3 we get reference of place holder context node DYNAMIC. Then we get the node attributes by its node information object.

It is not necessary to create new attributes every time the create button is clicked unless the attribute has not really been created.

5. Implement the create button handler.

Make sure to delete all children of the UI place holder to avoid the repeated insertion of the ui elements with the same id, which will lead to runtime error. Then create new instance for label and text view, and specify their layout accordingly, so that each label will be put into a new line.

method ONACTIONCREATE .

  CONSTANTS: cv_label TYPE string VALUE 'LABEL',

             cv_field TYPE string VALUE 'FIELD',

             cv_bind_text TYPE string VALUE 'DYNAMIC.VALUE'.

  DATA: lv_count type i,

        lo_container type ref to cl_Wd_uielement_container.

  wd_context->get_attribute( EXPORTING name = 'NUMBER' IMPORTING value = lv_count ).

  CHECK lv_count > 0.

  create_context( lv_count ).

  DATA(lo_root) = wd_this->mr_view->get_element( 'DYNAMICUI' ).

  lo_container ?= lo_root.

  lo_container->remove_all_children( ).

  DO lv_count TIMES.

    data(lv_field_id) = cv_field && sy-index.

    data(lv_label_id) = cv_label && sy-index.

    data(lv_bind_path) = cv_bind_text && sy-index.

    DATA(lo_text_view) = cl_wd_text_view=>new_text_view( id = lv_field_id bind_text = lv_bind_path ).

    DATA(lo_label) = cl_wd_label=>new_label( id = lv_label_id label_for = lo_text_view->id text = lv_label_id ).

    CL_WD_ROW_HEAD_DATA=>new_row_head_data( element = lo_label ).

    cl_wd_row_data=>new_row_data( element = lo_text_view ).

    lo_container->add_child( the_child = lo_label ).

    lo_container->add_child( the_child = lo_text_view ).

  ENDDO.

endmethod.