User Interface Elements (UI elements) Static and Dynamic Programming-part 2

User Interface Elements (UI elements) Static and Dynamic Programming-part 2


Calling the web Dynpro code wizard

Runtime

Hereunder,we have to display the view V_STEP2 when the user presses the LinkToAction UI element (ID = LTA_NEXT2). To do this, we define an outbound plug named OP_TO_V_STEP2 in the view V_STEP1,and we fire the generated method.

Outbound plug, event handler method

V_STEP2 view layout

After this, we have to define an inbound plug named IP_V_STEP2, we embed the view V_STEP2 into the ViewContainerUIElement VCU_2 and we create the corresponding navigation link.

Window structure

Window structure

Dynamic Programming

RUNTIME CLASS: CL_WD_VIEW_CONTAINER_UIELEMENT

The implementation of a dynamic ViewContainerUIElement contains the following statements (Listing):

data lr_vcu type ref to cl_wd_view_container_uielement.
lr_vcu = cl_wd_view_container_uielement=>new_view_container_uielement (id = 'VCU').

In this case, after dynamically creating the View ContainerUI Element,we have to dynamically create the view embedding and the navigation links.

tabStrip

This UI element allows us to display some tabs, and the user can toggle from a tab page to another. We create a WD Component.

WD component structure

We create a TabStrip UI element and add two Tabs. To add tabs, we right-click on the tabStrip name and, from the contextual menu, we choose Insert Tab.When the user presses the Next button, we navigate to the next tab and we show the data entered by the user in the registration form of the first tab.

View layout

Hereunder, we present a table with some of the tabStrip UI element properties that can be bound,and the attribute type in case the property is bindable.

Some of TabStrip UI element properties

The property selectedTab of string type can be used to navigate from a tab to other one. This property set the name of the selected tab. We define a data binding between the selectedTab property and the attribute with the same name (string) defined in the node DYNAMIC in the view context.The node STUDENT has the dictionary structure YSTR_PERSON,cardinality 0...1,Singleton. 

Context structure

By using the wdDoInit Hook method, we populate the attribute SELECTEDTAB of the node DYNAMIC with the ID of the tab we want to be active at runtime–TAB_1 (Listing ).

Listing The wddoinit Hook method

 METHOD wddoinit.
 DATA lr_node TYPE REF TO if_wd_context_node.
 DATA ls_data TYPE wd_this->element_dynamic.
 lr_node = wd_context-get_child_node('DYNAMIC').
 ls_data-selectedtab = 'TAB_1'.
 lr_node-set_static_attributes(ls_data).
 ENDMETHOD.

When the user presses the Next Button,the Framework triggers the event handler method onactionnext (Listing).We set the selectedtab property with the value TAB_2,by selecting in this mode the TAB_2.

Listing Event handler methodMETHOD onactionnext.

 DATA lr_node TYPE REF TO if_wd_context_node.
 DATA ls_data TYPE wd_this-element_dynamic.
 lr_node = wd_context-get_child_node('DYNAMIC').
 ls_data-selectedtab = 'TAB_2'.
 lr_node-set_static_attributes(ls_data).
 ENDMETHOD.

Runtime

Dynamic Programming

RUNTIME CLASS: CL_WD_TABSTRIP

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 TabStrip UI element.For the tabStrip UI element we have, as aggregation, the Tab element.Its runtime class is CL_WD_TAB.

Dynamic programming

The implementation of a dynamic TabStrip UI element, with two Tabs,contains the following statements (Listing):

Dynamic programming of a TabStrip UI element

 METHOD wddomodifyview.
 DATAlr_pageheader TYPE REF TO cl_wd_page_header.
 DATAlr_flow_data TYPE REF TO cl_wd_flow_data.
 DATAlr_container TYPE REF TO cl_wd_uielement_container.
 DATAlr_area TYPE REF TO cl_wd_page_header_area.
 IF first_time EQ abap_true.
 lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER').
 lr_pageheader = cl_wd_page_header=>new_page_header(id = 'PH_PAGEHEADER'
 text_direction = cl_wd_page_header=>e_text_direction-ltr ).
 lr_pageheader->set_title('DYNAMIC PAGEHEADER').
 lr_flow_data = cl_wd_flow_data=>new_flow_data(element =
 lr_pageheader). 
  lr_container->add_child(lr_pageheader). 
 lr_area = cl_wd_page_header_area=>new_page_header_area(id ='PAGEHEADAREA'
 design = cl_wd_page_header_area=>e_design-emphasized).
  DATA lr_textview TYPE REF TO cl_wd_text_view.
 lr_textview = cl_wd_text_view=>new_text_view(id = 'TXT'
 text ='PageHeaderArea'
 ).
 lr_area->set_content(the_content = lr_textview ).
 lr_pageheader->add_area(the_area = lr_area ).
 ENDIF.
 ENDMETHOD.

PageHeader

This UI element offers the possibility to create a header for a page.In the title content and the PageHeader Area, we can insert other UI elements. We create a WD component with the structure presented in Fig.

WD component structure

We use the view V_VIEW as Master View. Here, we insert a PageHeader UI element that contains two LinkToAction UI elements, and in the PageHeader Area we insert a ViewContainerUIElement. When the user interacts with the LinkToAction UI elements,we show in the ViewContainerUIElement one of the two slave views V_COUNTRYor V_CANDIDATE.

Application structure

After the PageHeader UI element is inserted into the V_VIEW view,we can insert a PageHeader Title Content and one or more PageHeader Area(s).

Inserting the title content and PageHeader area

In a PageHeaderArea, we can insert how many other UI elements we want.Here, we have chosen to insert only one UI element (ViewContainerUIELement).As design options,it has: Standard, Emphasized and transparent.For our example,we have the default design: Standard. To see on screen the other Page Header Area designs,we can choose values from the list, one by one, and see the result in the view designer, or we can run again the application and see the different changes.In the system,we can find two WD components where we can see the UI elements and the effect of changing certain properties on these UI elements. These components are WDR_TEST_EVENTS and WDR_TEST_UI_ELEMENTS. 

V_VIEW view layout

Each view (V_CANDIDATE and V_COUNTRY) has a Table UI element where we show the data stored in our database table YPERSON and YEU_COUNTRIES.

Runtime

Dynamic Programming

RUNTIME CLASS: CL_WD_PAGE_HEADER

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 PageHeader UI element.

Dynamic programming

For the PageHeader UI element we have, as aggregation, the Area and the TitleContent elements. The Area runtime class is CL_WD_PAGE_HEADER_ AREA.

The implementation of a dynamic PageHeader UI element (with pageHeader title) and a PageHeaderArea (with a textView UI element) contains the following statements (Listing):

Dynamic programming of a PageHeader UI element

 METHOD wddomodifyview.
 DATA lr_pageheader TYPE REF TO cl_wd_page_header.
 DATA lr_flow_data TYPE REF TO cl_wd_flow_data.
 DATA lr_container TYPE REF TO cl_wd_uielement_container.
 DATA lr_area TYPE REF TO cl_wd_page_header_area.
 IF first_time EQ abap_true.
 lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER').
 lr_pageheader = cl_wd_page_header=>new_page_header(
 id = 'PH_PAGEHEADER'
 text_direction = cl_wd_page_header=>e_text_direction-ltr
 ).
 lr_pageheader->set_title('DYNAMIC PAGEHEADER').
 lr_flow_data = cl_wd_flow_data=>new_flow_data(element =
 lr_pageheader).
 lr_container->add_child(lr_pageheader).
 lr_area = cl_wd_page_header_area=>new_page_header_area(
 id = 'PAGEHEADAREA'
 design = cl_wd_page_header_area=>e_design-emphasized
 ).
 DATA lr_textview TYPE REF TO cl_wd_text_view.
 lr_textview = cl_wd_text_view=>new_text_view(
 id = 'TXT'
 text = 'PageHeaderArea'
 ).
 lr_area->set_content(the_content = lr_textview).
 lr_pageheader->add_area(the_area = lr_area).
 ENDIF.
 ENDMETHOD.

ContextualPanel

This UI element offers navigation functions. Its navigation list can have many levels.We create the same example as for the PageHeader,but, in this case,we use the two LinkTo Action UIElements to create the content for a ContextualPanel UI element.

In a contextualPanel UI element, we can insert three types of elements: Free- ContextualArea,NavigationList and ViewSwitch. In our example,we have used two FreeContextualArea elements.

In a FreeContextualArea, we can insert a Content and a Header. We can set the header to be expandable or no. The Content is a zone where we can insert other UI elements we want to be displayed within the FreeContextualArea.

FreeContexualArea

V_VIEW view Layout

V_VIEW view Layout

Dynamic Programming

RUNTIME CLASS: CL_WD_CONTEXTUAL_PANEL

For the ContextualPanel UI element, we have, as aggregation, the items: Free- ContextualArea,
ViewSwitch and NavigationList elements.
The FreeContextual- Area runtime class is
CL_WD_FREE_CONTEXTUAL_AREA.

The implementation of a dynamic contextualPanel UI element,with a Free- ContextualArea element that has a Content(linkToAction UI element)and a Header(expandableTitle element),contains the following statements (Listing ):

Dynamic programming of a contextualPanel UI element

 METHOD wddomodifyview.
 DATA lr_flow_data TYPE REF TO cl_wd_flow_data.
 DATA lr_container TYPE REF TO cl_wd_uielement_container.
 DATA lr_contextualpanel TYPE REF TO cl_wd_contextual_panel.
 DATA lr_freecontextualarea TYPE REF TO cl_wd_free_contextual_area.
 DATA lr_linktoaction TYPE REF TO cl_wd_link_to_action.
 DATA lr_header TYPE REF TO cl_wd_expandable_title.
 IF first_time EQ abap_true.
 lr_container ?= view->get_element('ROOTUIELEMENTCONTAINER').
 lr_contextualpanel = cl_wd_contextual_panel=&g new_contextual_panel(
 id = 'CP_CONTEXTUALPANEL'
 ).
 lr_freecontextualarea = cl_wd_free_contextual_area=>new_free_contextual_ar
 ea(
 id = 'FREECONTEXTUALAREA_1'
 ).
 lr_flow_data = cl_wd_flow_data=>new_flow_data(element =
 lr_contextualpanel).
 lr_container->add_child(lr_contextualpanel).
 lr_linktoaction = cl_wd_link_to_action=>new_link_to_action(
 id = 'CONTENT_1'
 on_action ='SHOW_COUNTRIES'
 text ='Show EU countries'
 ).
 lr_freecontextualarea->set_content(the_content = lr_linktoaction).
 lr_header = cl_wd_expandable_title=>new_expandable_title(
 id ='EXPANDABLETITLE_1'
 expandable = abap_true
 expanded = abap_true
 title ='COUNTRY'
 ).
 lr_freecontextualarea->set_header(the_header = lr_header).
 lr_contextualpanel->add_item(the_item = lr_freecontextualarea).
 ENDIF.

Tray UI Element

As all the containers, this UI element includes a set of other UI Elements,but also provides additional functions. We create a WD Component with the structure presented.

WD component structure

In the View Layout,we insert two Tray UI elements. The first element is used to show the candidate information, and the second Tray is used to show some details about the selected candidate. These details are: the country flag and the capital.In the MIMEs folder we import three pictures with the flags we have to display when the user chooses a competitor from that country.

After the Tray UI element is inserted in the View Layout, we can insert a Menu and, in each menu, we can insert a menu option.

Tray menu

The menu options are: Menu, MenuActionItem,MenuCheckBox, MenuRadio- Button and MenuSeparator. In our case,we have chosen the option MenuAction- Item.

Creating a menu element

View layout structure

The first Tray has two menu options, used to show the second Tray UI element or to hide it. As we have mentioned above, most of the UI element properties can be bound. Hereunder, we show a list with some of the Tray UI elements properties that can be bound, and the attribute type in case the property is bindable.

Some of the tray UI element properties

We want to manipulate the UI element via the data held in the context. Therefore, we create a context node named DYNAMIC, with three attributes: two attributes of WDY_BOOLEAN type (ENABLED_OPTION1,ENABLED_OPTION2) and one attribute named VISIBLE, of WDUI_VISIBILITY type.To show the concurrent information and the corresponding details, we have created a context node with the dictionary structure YVIEW_CMPETITION, a database view defined in the ABAP Dictionary.

Context structure.

The context node DETAIL is populated via the supply function method SUPPLY_COMPETITION (Listing).

Supply function method

 METHOD supply_competition.
 DATA: lt_content TYPE TABLE OF yview_cmpetition.
 SELECT * FROM yview_cmpetition INTO TABLE lt_content.
 IF sy-subrc = 0.
 node->bind_table(new_items = lt_content).
 ENDIF.
 ENDMETHOD.

To be able to manipulate the enabled properties of the menu options created in the first Tray UI elements, we define the following data binding:

Data binding

To be able to manipulate the visible property of the second Tray with the ID “TRAY_DETAIL”,we define a data binding between these properties and the context attribute VISIBLE:

At initialisation, we want the second Tray to be hidden, the MENU_OPTION1 to be enabled and the MENU_OPTION2 to be not enabled. To realise this,we encode the wdDoInit Hook method (Listing).

The wddoinit Hook method

 METHOD wddoinit.
 DATA lr_node TYPE REF TO if_wd_context_node.
 DATA ls_data TYPE wd_this-element_dynamic.
 lr_node = wd_context-get_child_node('DYNAMIC').
 ls_data-enabled_option1 = abap_true.
 ls_data-enabled_option2 = abap_false.
 ls_data-visible = cl_wd_tray=e_visible-none.
 lr_node-set_static_attributes( ls_data ).
 ENDMETHOD.

When the user selects the first menu option “MENU_OPTION1”,the Framework triggers the event handler method onactionshow (Listing ).

The onactionshow event handler method

 METHOD onactionshow.
 DATA lr_node TYPE REF TO if_wd_context_node.
 DATA ls_data TYPE wd_this-element_dynamic.
 lr_node = wd_context-get_child_node('DYNAMIC').
 ls_data-enabled_option1 = abap_false.
 ls_data-enabled_option2 = abap_true.
 ls_data-visible = cl_wd_tray=e_visible-visible.
 lr_node-set_static_attributes(ls_data).
 ENDMETHOD.

When the user selects the second menu option MENListingU_OPTION2,the Framework triggers the event handler method onactionhide (Listing).

The onactionhide event handler method

 METHOD onactionhide.
 DATA lr_node TYPE REF TO if_wd_context_node.
 DATA ls_data TYPE wd_this-element_dynamic.
 lr_node = wd_context->get_child_node('DYNAMIC').
 ls_data-enabled_option1 = abap_true.
 ls_data-enabled_option2 = abap_false.
 ls_data-visible = cl_wd_tray=e_visible-none.
 lr_node->set_static_attributes(ls_data).
 ENDMETHOD.

At runtime,we can choose to show or to hide the details about the competitor

Runtime.

Message Area

This UI element represents the placeholder of the messages; it helps us to specify where they appear in the view. As we have seen, the messages are displayed by default in the upper part of the screen. The message location can be moved by adding a MessageArea UI element. We need only a MessageArea UI element per View layout.

We create an example to filter an input from the end user. In case the user enters a combination of small and capital letters from A to Z or spaces,we show a message with the text “Your input is string” If not, we show a message “Your input is not string”. To show these messages,we use a MessageArea UI element.

There are small programs used to test the regexes, which offer the possibility to test the regexes created before using them. Such a program is demo_ regex_toy. By using the transaction SA38 or SE38, we can run this program (Fig.) By using regexes,we can filter the values that the user enters in a Web Dynpro screen.

Regex toy screen

View Layout

As we can see, in this case we have entered a MessageArea UI element in the Group container.This is the place where all the messages will be displayed. When the user presses the button with the id “BTN”,the Framework triggers the event handler method onactioncheck (Listing ).

Checking the data entered by the user methode

As we can see, in this case we have entered a MessageArea UI element in the Group container.This is the place where all the messages will be displayed. When the user presses the button with the id “BTN”,the Framework triggers the event handler method onactioncheck (Listing ).

Checking the data entered by the user methode

 METHOD onactioncheck.
 DATA: lv_firstname TYPE string,
 lv_pattern TYPE string.
 wd_context->get_attribute(EXPORTING name ='FIRSTNAME'
 IMPORTING value = lv_firstname).
 v_pattern ='[a-zA-Zs]*'.
 CHECK lv_firstname IS NOT INITIAL.
 DATA: lr_api_controller TYPE REF TO if_wd_controller,
 lr_message_manager TYPE REF TO if_wd_message_manager.
 lr_api_controller ?= wd_this->wd_get_api( ).
 lr_message_manager = lr_api_controller->get_message_manager( ).
 DATA: lt_message_parameters TYPE wdr_name_value_list,
 ls_message_parameter LIKE LINE OF lt_message_parameters.
 ls_message_parameter-name = 'first_name'.
 ls_message_parameter-value = lv_firstname.
 APPEND ls_message_parameter TO lt_message_parameters.
 F cl_abap_matcher=>matches(pattern = lv_pattern
 text = lv_firstname) = abap_true.
 lr_message_manager->
 report_message(message_text ='Your input &first_name is string'
 message_type = 0
 params = lt_message_parameters).
 ELSE.
 lr_message_manager->
 report_message(message_text ='Your input &first_name is not string!'
 message_type = 2
 params = lt_message_parameters).
 endif.
 ENDMETHOD.

By using the static method MATCHES of the CL_ABAP_MATCHER class,we check the value that the user enters in the inputField UI element.In case this value matches our condition specified in the local variable lv_pattern,we use the methode REPORT_MESSAGE to display a message of information type. Otherwise,we use the same method to display an error message. Because we want to show to the user whether the value he entered in the input field is a string or not,we use a parameter required to integrate,in the string that he sees on the screen,the value he has just entered.For this purpose, we have used for the method report_message a parameter named “params”.By double-clicking on name of the method report_message,we navigate forward and we can see all the parameters that this method has and the typethat the parameters should be. For the “parms” parameter, we need a variable owdr_name_value_list type that is actually a table type with a structure of line type.From this structure, we have used the name(the parameter name,in our case “first_name”)and the value (the value with what we want to replace,at runtime,the parameter name “lv_firstname”).In Chap. 10, we will see more abou the message manager and parameters, along with the modality we can display a message into a window, or the modality we can use the ABAP classesto create messages and exceptions. In Fig.the messages are displayed by using the MesageArea UI element.

Runtime with MessageArea UI element

Dynamic Programming

RUNTIME CLASS: CL_WD_MESSAGE_AREA

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 MessageArea UI element (Table).

The implementation of a dynamic MessageArea UI element contains the following statements (Listing ):

Dynamic programming

The dynamic programming of a MessageArea UI element

 data lr_messagearea type ref to cl_wd_message_area.
 lr_messagearea = cl_wd_message_area=>new_message_area(
 id ='MESSAGE_AREA'
 HISTORY_VISIBLE = abap_true).

Complex

This category contains complex UI elements as regards their structure and content.Hereunder,we present some of the UI Elements included in this category.

Table

By using this 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.

Some of the Table UI element properties

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

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’tneed 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.

Table UI element – Creating the binding

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.

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

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

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

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

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

Supply function method

 METHOD supply_person.
 DATA:
 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).
 node-set_lead_selection_index(index=lv_counter).
 ENDMETHOD.

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.

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_node->set_static_attributes(ls_registration).
 lr_element = lr_node->get_lead_selection( ).
 lr_element->
 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).
 ENDMETHOD.

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.

Runtime

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).
 ENDMETHOD.

Runtime

Runtime

Dynamic Programming

RUNTIME CLASS: CL_WD_TABLE

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.

Dynamic programming

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.

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_container->add_child(lr_table).
 lr_column_name = cl_wd_table_column=>new_table_column(
 id = 'TBL_EXAMPLE_NAME'
 ).
 lr_table_header ?= cl_wd_caption=>new_caption(text ='Table UI elem
 ent - example').
 lr_table->add_column(the_column = lr_column_name).
 lr_table->set_header(lr_table_header).
 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
 e').
 lr_column_name->
 set_table_cell_editor(the_table_cell_editor = lr_text_view
 ).
 lr_column_name->set_header(lr_column_name_header).
 ENDIF.
 ENDMETHOD.