SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to use “Table” in Web Dynpro with Static and Dynamic Programming

How to use “Table” in Web Dynpro with Static and Dynamic Programming

By using the Table UI element, we can display data arranged in rows and columns.Table shows some of the Table properties that can be bound,and the attribute type in case the property is bindable.

How to use “Table” in Web Dynpro with Static and Dynamic Programming

In this exercise,we want to take data from an end user and to insert them into a table UI element,after the latest record. To do this,we create a WD component named Y_UI_TABLE that has a View named V_VIEW and a default window.In the context view,we need two context nodes: a context node required to hold the new record from the end user and a context node required to hold all the records.

Context structure

How to use “Table” in Web Dynpro with Static and Dynamic Programming

The context node REGISTRATION has the cardinality 1. . .1, Singleton.Its attributes are: NAME of STRING type,DATE OF BIRTH of YDATEOFBIRTH type,COUNTRY of Y_DEFORDOMAIN type and NO of I type. We use the attributes of this context node to hold every new record.

The context node TABLE has the cardinality 0...n,Singleton, selection 0...1, supply function SUPPLY_PERSON and initialization lead selection is not automatically set. In this case,we want to manually set the lead selection. The context node attributes have the same name and data type as the context node REGISTRATION.We use the attributes of this context node to hold all the registrations.

In the next step,we have to create the view layout.To insert a Table into our view layout,we can use two options: we can manually insert the table or we can use the Web Dynpro Wizard. In the beginning, we explain the first option. After inserting a Table UI element into our view,we have to create a data binding.When a table is bound to a context node by using a wizard,we don’t need to individually create each table column. We have only to select the context node and the Framework provides the available attributes.In this way,the value of the property DataSource (mandatory) of the Table UI element is bound to the context node TABLE (Fig).

Table UI element – Creating the binding

 How to use “Table” in Web Dynpro with Static and Dynamic Programming

The Cell Editors of the Table Column describe the UI element used to display or edit the column content.As we can see,our columns are created by using TextView UI elements. Each attribute represents a column in our table, and for each column we can choose an UI element. After this, the standard property to be bound depends on the chosen UI element.For example, for the TextView UI element, the property is text, and for the DropDownByKey, the name of the property to be bound is selectedKey (Fig.).

Cell Editor of Table Column – Name of Property to be bound

How to use “Table” in Web Dynpro with Static and Dynamic Programming

The view layout is presented in Fig. For each attribute for which the bind option is marked, the Framework generates a proper column. For example, for the attribute “NO”,the Framework has generated the column TBL_EXAMPLE_NO, for the attribute NAME, the Framework has generated the column TBL_EXAPLE_NAME,etc.The Table UI element offers the possibility to display as many rows as we need by using the property visibleRowCount (in our case, five). In the default mode,the property displayEmptyRows is set as ABAP_TRUE. In case we set this property as ABAP_FALSE, the rows that are empty in our table will not be on screen anymore.

The second option to insert a Table UI element into our View Layout is to use the Web Dynpro Wizard (Fig). In this case,the Wizard generates the Table UI element and we use the same procedure presented hereunder to create the data binding. After the user enters the new values (Name, Date of Birth and Country),we have to add these values at the end of the other records, in the table UI element. To be able to do this, we need an action. Fig Cell Editor of Table Column – Name of Property to be bounding.

After the user enters the new values (Name, Date of Birth and Country),we have to add these values at the end of the other records,in the table UI element. To be able to do this, we need an action.

View layout

How to use “Table” in Web Dynpro with Static and Dynamic Programming

Web Dynpro wizard to insert a Table UI element into the view layout

How to use “Table” in Web Dynpro with Static and Dynamic Programming

For a table UI element, we can insert a Toolbar. We need a toolbar to be able to insert a ToolBarButton in this area (Fig.). We populate the node TABLE with two values, via the supply function method (Listing ).

The local variable lv_counter is used to create the record ID. After the node population, we use the SET_LEAD_SELECTION_INDEX method to set lead selection via index. As we can see, the index is set with the value of the lv_counter. In this way,it is selected the last value of the table.

Inserting a ToolBarButton

How to use “Table” in Web Dynpro with Static and Dynamic Programming

Supply function method

METHOD supply_person.


ls_table TYPE wd_this-element_table,

lt_table LIKE TABLE OF ls_table,

lv_counter TYPE i VALUE 1.

ls_table-no = lv_counter.

ls_table-name = 'Antonia Maria Crist'.

ls_table-dateofbirth = '19800305'.

ls_table-country = 'DE'.

lv_counter = lv_counter + 1.

APPEND ls_table TO lt_table.

ls_table-no = lv_counter.

ls_table-name = 'Albu Alina'.

ls_table-dateofbirth = '19800908'.

ls_table-country = 'IT'.

APPEND ls_table TO lt_table.

node->bind_table(new_items=lt_table set_initial_elements = abap_true).



As we have mentioned above, if the “Initialization lead selection” for a node is “YES”, it is always selected the first element of this node. In this case, our context node has this property selected “NO”; we influence the selected element by using the set_lead_selection_index.

To influence the lead selection, we have some methods, as following

  • Set_lead_selectio
  • Move_first
  • Move_previous
  • Move_

For our TABLE context node, we have set the selection cardinality 0...1 meaning that maximum one row can be selected if the node elements are displayed as a table.

When the user presses the “Add record” button,the Framework triggers the event handler method onactionadd (Listing ).

Event handler method

METHOD onactionadd. 

DATA: lr_node TYPE REF TO if_wd_context_node, 

lr_node1 TYPE REF TO if_wd_context_node, 

lr_element TYPE REF TO if_wd_context_element, 

lv_counter TYPE i, 

lv_dateofbirth TYPE ydateofbirth, 

lv_country TYPE y_defordomain, 

lv_name TYPE string, 

ls_registration TYPE wd_this->element_registration. 

lr_node = wd_context->get_child_node('REGISTRATION'). 

lr_node->get_attribute(EXPORTING name ='DATEOFBIRTH' 

IMPORTING value = lv_dateofbirth). 

lr_node->get_attribute(EXPORTING name ='NAME' 

IMPORTING value = lv_name). 

lr_node->get_attribute(EXPORTING name ='COUNTRY' 

IMPORTING value = lv_country). 

lr_node1 = wd_context->get_child_node('TABLE'). 

lr_node1->get_attribute(EXPORTING name ='NO' 

IMPORTING value = lv_counter). 

lv_counter = lv_counter + 1. 

ls_registration-no = lv_counter. 

ls_registration-dateofbirth = lv_dateofbirth. 

ls_registration-name = lv_name. 

ls_registration-country = lv_country. 


lr_element = lr_node->get_lead_selection( ). 


get_static_attributes( IMPORTING static_attributes = ls_registration ). 

lr_node1 = wd_context->get_child_node('TABLE'). 

lr_node1->bind_structure( EXPORTING new_item = ls_registration 

set_initial_elements = abap_false). 

lr_node1->set_lead_selection_index(index = lv_counter). 


We pass the value of the attribute NO of the TABLE context node in the local variable lv_counter. As we have mentioned above,we use this local variable to create the record ID.After each new record,we increase this value with 1.The user enters the values Name,Date of Birth and Country and we create his corresponding ID.The runtime structure is presented in Fig.


Web Dynpro Table UI Element

Additionally,we can add a reset Button on the table toolbar. After the user adds the records, he can reset the fields Name, Date of birth and Country, to be able to add a new record.

The “Reset” Toolbar Button,of the same ToolBarButton type, has associated an action named RESET. The Listing shows the onactionreset event handler method.

The onactionreset event handler method

METHOD onactionreset. 

DATA: lr_node TYPE REF TO if_wd_context_node, 

ls_registration TYPE wd_this-element_registration. 

lr_node = wd_context-get_child_node('REGISTRATION'). 

lr_node->bind_structure(EXPORTING new_item = ls_registration). 



How to use “Table” in Web Dynpro with Static and Dynamic Programming

Dynamic Programming


Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a Table UI element (Table).

For the Table UI element,we have, as aggregation, the Table Column,Group Column, Header,Legend Popin, MasterColumn and Toolbar. The TableColumn element represents a column of a table, and has the CL_WD_TABLE_COLUMN runtime class. The table title is implemented by using a Caption element and has the CL_WD_CAPTION runtime class.

The implementation of a dynamic Table UI element with table header,design alternating, three visible rows and a column, that has a TextView UI element as cell editor,contains the following statements (Listing ).

Dynamic programming of a Table UI element

METHOD wddomodifyview. 

DATA lr_table TYPE REF TO cl_wd_table. 

DATA lr_flow_data TYPE REF TO cl_wd_flow_data. 

DATA lr_container TYPE REF TO cl_wd_uielement_container. 

DATA lr_column_name TYPE REF TO cl_wd_table_column. 

DATA lr_text_view TYPE REF TO cl_wd_text_view. 

DATA lr_table_header TYPE REF TO cl_wd_caption. 

DATA lr_column_name_header TYPE REF TO cl_wd_caption. 

IF first_time EQ abap_true. 

lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER'). 

lr_table = cl_wd_table=>new_table( 

id ='TBL_TABLE' 

bind_data_source ='TABLE' 

design = cl_wd_table=>e_design-alternating 

visible_row_count = 3 


lr_flow_data = cl_wd_flow_data=>new_flow_data(element = 

lr_table ). 


lr_column_name = cl_wd_table_column=>new_table_column( 



lr_table_header ?= cl_wd_caption=>new_caption(text ='Table UI elem 

ent - example'). 

lr_table->add_column(the_column = lr_column_name). 


lr_text_view = cl_wd_text_view=>new_text_view( 

id ='TXV_NAME' 

bind_text ='TABLE.NAME' 


lr_column_name_header ?= cl_wd_caption=>new_caption(text = 'Nam 



set_table_cell_editor(the_table_cell_editor = lr_text_view 





Add comment

Before Buying, Compare Prices at