Creating Table UI Dynamically

Many a time you come across a situation of creating a Table UI dynamically. Especially, when you want to create Table UI based on certain conditions which will be known only during the run time. However, Table is not a simple element, it comprises of Columns, Cell Editors and Popins. To make our job simple, SAP has provided a built in method to create a simple table which can only display data. In this article we are going to use this method to create a Table UI dynamically.

SAP has provided the class CL_WD_DYNAMIC_TOOLS which contains some of the static methods which can be useful for programming dynamically. Now we are going to use the method CREATE_TABLE_FROM_NODE. This comes very handy whenever we want to create a simple table for displaying data. As the name suggests, this method creates a table from a given node making each attribute of the node as a column in the table. Column headers will be same as the field name of the corresponding data element.

Create a node under context as the following picture.

Here all the three attributes are of the type STRING in order to give you a simple example. And so you will not be seeing any column header as it is not a data element. Say if the type of CODE is KUNNR, then the column header would be “Customer Name”.

method WDDOMODIFYVIEW .

  data:
        my_table type ref to cl_wd_table,
        root type ref to cl_wd_uielement_container,
        my_node type ref to if_wd_context_node.

  if first_time = abap_true.

    root ?= view->get_root_element( ).

    my_node = wd_context->get_child_node( 'DYNTAB' ).

    call method cl_wd_dynamic_tool=>create_table_from_node
      exporting
        ui_parent = root
        table_id = 'MYTAB'
        node = my_node
      receiving
        table = my_table.
  endif.

endmethod.

Write the above code in WDDOMODIFYVIEW of the view. In the above code, we just pass the reference of the container to which the table should be added, the ID of the table and reference to node according to which the table should be created and bound. The method automatically creates the required table and adds it to the container.

The above pictures shows the output. The table is empty as there is no data bound to the node (assuming that you know how to work with nodes and data).

This is the simplest way to create a simple table to just display the data. However, its not flexible so that you can create any type of table. In this way, you cannot create a table which contains of table cells made of drop down list or progress bar. You can ask the question ‘Can’t I create as rich as I do statically?’. ‘Of course you can, but with a little longer code for little more enjoyment’. Check out that ‘Anatomy of Table UI and Creating Customized Table UI Dynamically’.