Dynamic columns in a table view

Hello everyone! The purpose of this blog is to provide a solution to add columns in a table view at runtime. So far, tableviews the most extensively used html element has to be defined in the view configuration directly or use an iterator to introduce images in individual cells. It was hankering in my mind to come up with a solution to define columns dynamically at runtime and bend the functionality of tableview as we wish and finally i was able to figure a solution.

The idea is to create dynamic structures & workarea using runtime type services. Let me elaborate it with an example.

In the below picture, the table has 9 columns in total, out of which 4 are static columns that is the attribuutes are defined at the time of creating the view and the remaining five columns are created at runtime.

For instance, lets define the dynamic columns in a custom table “ZDYN_COLUMNS”. The table stores the columns name, its data type and its technical name.

To start with, create a view with a value node, lets call it “DYNTV” and add the static attributes to it. This is the basic structure of our table view,

Now, the dynamic columns must be added to the table structure and also to the value node “DYNTV”. To add columns to our value node we must redefine the method “IF_BSP_MODEL~INIT” of our context node class. Create an internal table of type abap_components_tab and add our static fields to it. Pass the field name and elementary data type using runtime type services.

METHOD if_bsp_model~init.

* Structure with static columns

TYPES: BEGIN OF ltype_attr_struct,
     position        TYPE crmt_number_int,
     productid      TYPE comt_product_id,
     configurable  TYPE comt_product_configurable,
     quantity       TYPE crmt_schedlin_quan,
END OF ltype_attr_struct.

* Data declarations 

DATA: lt_comp             TYPE abap_component_tab,
          ls_comp             TYPE abap_componentdescr,
          lt_dynamic_cols  TYPE TABLE OF zdyn_columns,
          ls_dynamic_cols TYPE zdyn_columns,
          ls_struct             TYPE ltype_attr_struct.

* Add the static columns to internal table

lr_element ?= cl_abap_elemdescr=>describe_by_data( ls_struct-position ).
ls_comp-name = ‘Position’.
ls_comp-type = lr_element.
INSERT ls_comp INTO TABLE lt_comp.

lr_element ?= cl_abap_elemdescr=>describe_by_data( ls_struct-productid ).
ls_comp-name = ‘Description’.
ls_comp-type = lr_element.
INSERT ls_comp INTO TABLE lt_comp.

lr_element ?= cl_abap_elemdescr=>describe_by_data( ls_struct-configurable ).
ls_comp-name = ‘Configurable’.
ls_comp-type = lr_element.
INSERT ls_comp INTO TABLE lt_comp.

lr_element ?= cl_abap_elemdescr=>describe_by_data( ls_struct-quantity ).
ls_comp-name = ‘Quantity’.
ls_comp-type = lr_element.
INSERT ls_comp INTO TABLE lt_comp.

SELECT * FROM zdyn_columns

                INTO TABLE lt_dynamic_cols.

* Loop into the dynamic columns and assign them to abap components tab

LOOP AT lt_dynamic_cols INTO ls_dynamic_cols.
     lr_element        ?= cl_abap_elemdescr=>describe_by_data( ls_dynamic_cols-field_type ).
     ls_comp-name    = ls_dynamic_cols-technical_name.
     ls_comp-type      = lr_element.
     INSERT ls_comp INTO TABLE lt_comp.
ENDLOOP.

* Declare a global internal table and assign itab lt_comp
* The global table wil be used in method GET_TABLE_LINE_SAMPLE and tableview iterator
gt_comp = lt_comp.

ls_col_def-columnname           = ls_comp-name.
ls_col_def-title                         = ls_dynamic_cols-field_name.    

ls_col_def-wrapping                 = abap_false.
ls_col_def-width                      = ‘100px’.
ls_col_def-horizontalalignment  = ‘LEFT’.  

APPEND

ls_col_def TO p_column_definitions.

Define the layout page and pass the iterator,

<%@page language=”abap” %>

<%@extension name=”thtmlb” prefix=”thtmlb” %>

<%@extension name=”chtmlb” prefix=”chtmlb” %>

<%@extension name=”bsp” prefix=”bsp” %>

<%

  Data: lr_iterator TYPE REF TO ZDYN_COLUMN_ITERATOR.

  CREATE OBJECT lr_ITERATOR EXPORTING ir_context_node = dyntv.

%>

<thtmlb:cellerator editMode                  = “ALL”

                          id                             = “TableView”

                          actionsMaxInRow      = “6”

                          onRowSelection        = “select”

                          headerText               = “Dynamic Columns-Example”

                          personalizable          = “TRUE”

                          table                        = “//dyntv/Table”

                          usage                      = “EDITLIST”

                          iterator                     = “<%= lr_ITERATOR %>” />