Dynamic Table UI in Webdynpro for ABAP

Anumeha Khandelwal 20th Nov 2010

SAP White Paper Solutions for Cross-Industry Name/ Industry Solution Name (optional)/

2Webdynpro for ABAP : Creating Dynamic Table UI v1.0

Document Details

Name Creating dynamic Table UI in Webdynpro for abap .

Change Log

Objective Used for tool development

Audience All application developers

Versio n

Description Webdynpro for ABAP

For any info on this document please contact: Name Email ID Anumeha Khandelwal anumeha.khandelwal@sap .com

Contact No

2008 by SAP AG.

All rights reserved. SAP, R/3, xApps, xApp, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

Webdynpro for ABAP: Creating Dynamic Table UI v1.03

CONTENT
PURPOSE..............................................................................................................................................4 ABSTRACT.............................................................................................................................................4 DESCRIPTION.........................................................................................................................................4 3.1 SCENARIO ......................................................................................................................................4

SAP Global Delivery 2008

4Webdynpro for ABAP : Creating Dynamic Table UI v1.0

Purpose
The document aims at providing a reusable ABAP code for developing a dynamic Table UI in Webdynpro for ABAP. Note: This was a requirement in Value mapping Tool . The following is implemented in the development of the tool . The main objective of the document is to provide the code to develop dynamic UI. Creating and activating a Webdynpro for ABAP application is not explained here. Minor changes would be required in the code as per the requirement of respective application .

Abstract
Ideally in any Webdynpro application , UI elements are developed using static context attributes. However there are situation where the attributes of a certain UI are not available before hand and are known only at runtime, mostly in case of user interaction or cases where display conditions are based on user input. In these situation there is a need to develop a dynamic UI elements.

Description 3.1 Scenario

Consider an application where user wants to upload a file to SAP system. He wishes to view contents of a file on a Table UI before finally deciding to upload it to the system. As the file is provided by the user at runtime, i.e when he/she logs on to the application the structure of the file is not known initially . In other words when a user logs on to the application he/she decides the type of file he/she wants to upload. In this case it is required that the Table UI be created dynamically .

Procedure
1. Start ABAP Workbench (SE80) and select Web- Dynpro-Comp./ Intf . from the available object list. 2. Create a Webdynpro Component. 3. Save it and assign it to a package . Here $TMP. 4. Create a new view and assign he view to a window. 5. Create a view context for the MainView. 6. Add attributes .

Webdynpro for ABAP: Creating Dynamic Table UI v1.05

7. Creating Dynamic Table UI for the view created in step 4.

Whenever a view is created some standard hook methods are inherited. WDDOMODIFYVIEW is a method used for modifying the view before rendering. Add the following Code to WDDOMODIFYVIEW METHOD wddomodifyview
method WDDOMODIFYVIEW . TYPE REF TO cl_wd_group , "for Dynamic Group UI element. TYPE REF TO cl_wd_caption , "caption for Group_2 TYPE REF TO cl_wd_table , TYPE REF TO if_wd_view_element , "To get Root Element TYPE REF TO cl_wd_transparent_container , "To store root "node dyn_node TYPE REF TO if_wd_context_node , tabname_node TYPE REF TO if_wd_context_node , rootnode_info TYPE REF TO if_wd_context_node_info , stru_tab TYPE REF TO data, stru_wa TYPE REF TO data, tablename TYPE string, structname TYPE string, * tabname TYPE string, loc_conv TYPE REF TO CL_ABAP_CONV_IN_CE. FIELD-SYMBOLS: <tab> TYPE table, <fsym_itab1> TYPE STANDARD TABLE, <fsym_itab2> TYPE STANDARD TABLE, <fsym_warea1> TYPE ANY, <fsym_warea2> TYPE ANY. data content type xstring. FIELD-SYMBOLS: <fs> TYPE ANY. Types: BEGIN of ttab, field_row(1000) TYPE c, END of ttab. data itab type table of ttab. data watab like line of itab. data var_string TYPE string. DATA: group_2 capt_gr2 new_tab rootelem rootnode

**** To get Root Node info in the Context. rootnode_info = wd_context->get_node_info( ). tabname_node = wd_context->get_child_node( name = 'XREFDATA' ). **** To get the TableName from the Input Field tabname_node->get_attribute( EXPORTING name = 'REFIDENT' IMPORTING value = tablename ). TRANSLATE tablename TO UPPER CASE.

SAP Global Delivery 2008

6Webdynpro for ABAP : Creating Dynamic Table UI v1.0

**** To get structure name of the table name select STRUCTURE from ZVM_FILE_HDR into structname where REFIDENT eq tablename . endselect. TRANSLATE structname TO UPPER CASE. * tabname = structname. **** To Create a Table Node in the context Dynamically cl_wd_dynamic_tool=>create_nodeinfo_from_struct( parent_info = rootnode_info node_name = structname structure_name = structname is_multiple = abap_true ) . dyn_node = wd_context->get_child_node( name = structname ). **** To Get the ref to ROOTUIELEMENTCONTAINER in the view CALL METHOD view->get_root_element RECEIVING root_view_element = rootelem. rootnode ?= rootelem . **** if Group_2 already exists in the, to remove it. **** this case only occurs, if you are running application just by refreshing. **** Precautionary Check for existence of Group_2 rootnode->remove_child( id = 'GROUP_2' ). **** To create a new Group group_2 = cl_wd_group=>new_group( view = view id = 'GROUP_2' design = '01' enabled = abap_true has_content_padding = abap_true scrolling_mode = '02' visible = '02' ). **** To add a caption to the Group capt_gr2 = cl_wd_caption=>new_caption( view = view "ID = 'CAPT_GR2' enabled = abap_true image_first = abap_true text = 'Dynamic Group' text_direction = '02' visible = '02' ). **** To set the Caption to the Group_2 group_2->set_header( capt_gr2 ).

Webdynpro for ABAP: Creating Dynamic Table UI v1.07

**** To set the layout for the Group_2 cl_wd_grid_layout=>new_grid_layout( container = group_2 cell_padding = '0' cell_spacing = '0' col_count = '2' stretched_horizontally = abap_true stretched_vertically = abap_true ). cl_wd_flow_data=>new_flow_data( element = group_2 cell_design = '04' v_gutter = '00' ). **** Add the Group_2 to ROOTUIELEMENTCONTAINER rootnode->add_child( group_2 ) . **** Create a Table UI Element from Context and assigning it to Group_2. new_tab = cl_wd_dynamic_tool=>create_table_from_node( ui_parent = group_2 table_id = 'TESTTAB' node = dyn_node ).

* create internal table of (tabletype ) CREATE DATA stru_tab TYPE TABLE OF (structname). ASSIGN stru_tab->* TO <tab>. ASSIGN stru_tab->* TO <fsym_itab1>. ASSIGN stru_tab->* TO <fsym_itab2>. CREATE DATA stru_wa TYPE (structname). * ASSIGN stru_wa->* TO <fsym_warea1>. ASSIGN stru_wa->* TO <fsym_warea2>. * DATA wa_tab1 TYPE <fsym_itab1>.

* Get table content * SELECT * FROM (tablename) INTO CORRESPONDING FIELDS OF TABLE <tab>. *****Get field content node****** DATA lo_nd_file_upload TYPE REF TO if_wd_context_node. DATA lo_el_file_upload TYPE REF TO if_wd_context_element. DATA ls_file_upload TYPE wd_this->element_file_upload. DATA lv_file_contents LIKE ls_file_upload-file_contents. * DATA it_stndTable1 TYPE STANDARD TABLE OF tabname. * DATA it_stndTable2 TYPE STANDARD TABLE OF tabname. * Data wa_stndTable1 TYPE tabname. * Data wa_stndTable2 TYPE tabname.

SAP Global Delivery 2008

8Webdynpro for ABAP : Creating Dynamic Table UI v1.0

* navigate from <CONTEXT> to <FILE_UPLOAD> via lead selection lo_nd_file_upload = wd_context->get_child_node( name = wd_this->wdctx_file_upload ). * get element via lead selection lo_el_file_upload = lo_nd_file_upload->get_element( ). * get single attribute lo_el_file_upload->get_attribute( EXPORTING name = `FILE_CONTENTS` IMPORTING value = lv_file_contents ). CALL METHOD cl_abap_conv_in_ce=>create EXPORTING input = lv_file_contents encoding = 'UTF-8' replacement = '?' ignore_cerr = abap_true RECEIVING conv = loc_conv. *Read the file contents TRY. CALL METHOD loc_conv->read IMPORTING data = var_string. CATCH cx_sy_conversion_codepage. *Should ignore errors in code conversions CATCH cx_sy_codepage_converter_init. *Should ignore errors in code conversions CATCH cx_parameter_invalid_type. CATCH cx_parameter_invalid_range. ENDTRY. if structname eq 'ZPLANTXREF'. elseif structname eq 'ZXREFGENERIC'. elseif structname eq 'ZXREFGENERICMULTI'. endif. SPLIT var_string AT cl_abap_char_utilities=>NEWLINE INTO TABLE itab. LOOP AT itab INTO watab. var_string = watab-field_row. * SPLIT var_string AT ',' INTO TABLE <fsym_itab1>. SPLIT var_string AT cl_abap_char_utilities=>horizontal_tab INTO TABLE <fsym_itab1>. LOOP AT <fsym_itab1> INTO <fsym_warea2>. APPEND <fsym_warea2> TO <tab>. ENDLOOP. ENDLOOP.

Webdynpro for ABAP: Creating Dynamic Table UI v1.09

* Bind internal table to context node. dyn_node->bind_table( <tab> ). * dyn_node->bind_table( it_stndTable2 ).

endmethod.

8. Create a Web Dynpro Application . 9. Activate and run your application.

1.Result
You have now created a Web Dynpro component which contains one view VIEW1. On view VIEW1 a Group with Label, InputField and Button. Once you input the file and click on upload, the result is displayed in a new group UI element (Dynamic Group) along with a table. Furthermore, you have created a Web Dynpro application (as handle for the Web Dynpro component) which can be started directly via URL. The result screen is a table which displays file(provided by user) data.

This concept is applied to the Value mapping tool , which is being developed n ABAP . Following link can be accessed to have an idea of the concept. http://inst50084596.blr4.sap.corp:50400/sap/bc/webdynpro/sap/zvaluemaptool?saplanguage=EN

SAP Global Delivery 2008