Skip to end of metadata
Go to start of metadata


I was facing issues in creating a table with Cell Variant at runtime, after some trial and errors I was able to add cell variants in the table dynamically. The table contains a column, cell of this column can have a dropdown or a TextView depending on the variant key passed in code. Hope this code will help you also.

Step 1: Create a table by using “NEW_TABLE” method of class CL_WD_TABLE. This table has 5 rows and is bound to context node “CN_TABLE”.

Data: lo_table         TYPE REF TO cl_wd_table.

      lo_table = cl_wd_table=>new_table(
                                 id ='TBL_TABLE'
                                 bind_data_source ='CN_TABLE'
                                 design = cl_wd_table=>e_design-alternating
                                 visible_row_count = 5 ).

      cl_wd_flow_data=>new_flow_data( EXPORTING
                                        element  = lo_table
                                        control = lo_flow_data  ).

Step 2: You can give the table header using SET_HEADER method of class CL_WD_TABLE.

      lo_table_header ?= cl_wd_caption=>new_caption( text = 'Table UI element - example' ).

* Set Header of the Table.
      lo_table->set_header( lo_table_header ).

Step 3: Add the table into the root UI element container.

      lo_ele_container->add_child( EXPORTING
                                the_child = lo_table ).

Step 4: Once the table is added into the container, it is time to add the column into this table. Below is the code for creating new table column:

      Data: lo_column_name   TYPE REF TO cl_wd_table_column.

      lo_column_name = cl_wd_table_column=>new_table_column(
                                                    id = 'TBL_EXAMPLE_NAME' ).

Step 5: You can set the header of the column using SET_HEADER method of class CL_WD_TABLE_COLUMN.

      lo_column_name_header ?= cl_wd_caption=>new_caption( text = 'Name' ).
      lo_column_name->set_header( lo_column_name_header ).

Step 6: Now we will have to create two standard cell, first standard cell will contain a TextView, while the other standard cell will contain a dropdown. Variant key for first cell will be ‘NAPPL’ and for other cell variant key will be ‘SELECT’.

Data: lo_std_cell1_table TYPE REF TO cl_wd_table_standard_cell,

 lo_std_cell2_table TYPE REF TO cl_wd_table_standard_cell.

 cl_wd_table_standard_cell=>new_table_standard_cell( RECEIVING
                                             control = lo_std_cell1_table ).

 cl_wd_table_standard_cell=>new_table_standard_cell( RECEIVING
                                              control = lo_std_cell2_table ).

lo_std_cell1_table->set_variant_key( value = 'NAPPL' ).

lo_std_cell2_table->set_variant_key( value = 'SELECT' ).

Step 7: Once both standard cells are created, these needs to be assigned to the table column. Method “ADD_CELL_VARIANT” is used for the same.

                                    the_cell_variant = lo_std_cell1_table ).

                                    the_cell_variant = lo_std_cell2_table ).

Step 8: Once cell variants are added to the column, it’s time to create cell editors and bind them to standard table cells.

      lo_text_view = cl_wd_text_view=>new_text_view(
      id ='TBL_EDIT_NAME'
      bind_text ='CN_TABLE.NAME' ).

      lo_std_cell1_table->set_editor( lo_text_view ).

      lo_drop_down = cl_wd_dropdown_by_key=>new_dropdown_by_key(
                                      bind_selected_key = 'CN_TABLE.NAME' ).
      lo_std_cell2_table->set_editor( lo_drop_down ).

Step 9: Bind the Cell Variant property of the column to context node, so that it can select the variant according to the data passed.

   lo_column_name->bind_selected_cell_variant( path = 'CN_TABLE.VARIANT' ).