Anatomy of Table UI and Creating Customized Table UI Dynamically

Whenever we want to create a Table UI dynamically, we go to CREATE_TABLE_FROM_NODE method of CL_WD_DYNAMIC_TOOLS (see here. However in some cases we want the Table to be very much customized. For example, you may need to create a Table UI bounded to only three attributes of a node which already has four attributes and you may also want to represent each column with different UI element. ‘Yes, situations like this are there’. If you are making a service call, it will create a set of context nodes in the component controller. Now if you want to create a table dynamically and bind it to an already existing node, where you don’t want all the fields to be bound.

Anatomy of Table UI

Let’s see the anatomy of Table UI so that we can understand better.

The above diagram gives the anatomy of Table UI. Cell Editor can be any of the following UI elements. All these UI elements that inherit the interface IF_WD_TABLE_CELL_EDITOR (See UI Element Hierarchy).

So creating a table dynamically involves creating all these parts dynamically and assembling them to form the desired Table UI. You have to do this all in WDDOMODIFYVIEW If you are aware not of this, please check out [Creating UI Elements Dynamically][ind].

Now we will start an example. We are going to create a simple Table UI with just two columns, where one column will be input field and the other will be text view. We will be showing data from the database table KNA1 (Customer Master). If we would have created this example statically, the Table UI structure would be as follows.

Create a context node named CUSTOMER with dictionary structure KNA1 and select only the four fields which are shown on the following image as attributes.

This is the node which we are going to bind to the Table UI that we are going to create dynamically. This node has to be filled with data, so that our Table UI can have data on the output. The following code on WDDOINIT fills data to the node from KNA1 table.

method WDDOINIT .

  data:
        node type ref to if_wd_context_node,
        tab type wd_this->elements_customer.

  select * from kna1 into corresponding fields of table tab.

  node = wd_context->get_child_node( 'CUSTOMER' ).
  node->bind_table( tab ).

endmethod.

Finally we are going to write the code in WDDOMODIFYVIEW.

method WDDOMODIFYVIEW .

  data:
        node type ref to if_wd_context_node,
        my_table type ref to cl_wd_table,
        my_col1 type ref to cl_wd_table_column,
        my_col2 type ref to cl_wd_table_column,
        flow_data type ref to cl_wd_flow_data,
        root type ref to cl_wd_uielement_container,
        input_field type ref to cl_wd_input_field,
        text_view type ref to cl_wd_text_view,
        caption type ref to cl_wd_caption.

  cl_wd_table=>new_table(
        exporting
           id = 'TABLEID'
           bind_data_source = 'CUSTOMER'
           visible_row_count = 5
        receiving
           control = my_table
      ).

  my_col1 = cl_wd_table_column=>new_table_column( ).
  input_field = cl_wd_input_field=>new_input_field( 
                       bind_value = 'CUSTOMER.KUNNR' ).
  my_col1->set_table_cell_editor( input_field ).
  caption = cl_wd_caption=>new_caption( ).
  my_col1->set_header( caption ).

  my_col2 = cl_wd_table_column=>new_table_column( ).
  text_view = cl_wd_text_view=>new_text_view( 
                           bind_text = 'CUSTOMER.NAME1' ).
  my_col2->set_table_cell_editor( text_view ).
  caption = cl_wd_caption=>new_caption( ).
  my_col2->set_header( caption ).

  my_table->add_column( my_col1 ).
  my_table->add_column( my_col2 ).

  root ?= view->get_root_element( ).

  flow_data = cl_wd_flow_data=>new_flow_data( my_table ).
  my_table->set_layout_data( flow_data ).

  root->add_child( my_table ).

endmethod.

In the above code, we are creating a Table UI, attaching two columns to it where each configured with its own cell editor and caption. Usually CL_WD_CAPTION should be the column header and here I’m binding it without any caption text so that the system will automatically take the field labels of data elements KUNNR and NAME1. You can also override the default column header with your own by giving some text while creating the caption.

And you finally we get the desired output.