How to create and use Table Multi Editor Cell in Web Dynpro ABAP

[former_member184578]

Introduction

This document helps how to create and use Table Multi Editor Cell (Variant) in Web Dynpro ABAP. Table Multi Editor Cell is table cell variant that enables several UI elements to be placed in one table cell. It is required to create two or more buttons/links in single column in Table, We can achieve this using Table Multi Editor Cell UI element.  In this document I will explain how to create two buttons in a single table column.

Prerequisites

SAP NetWeaver 7.0 Ehp 2.

Step by Step Process

Step 1: Create a Web Dynpro Component.

Go to the SE80 transaction and create a Web Dynpro Component.

Enter Description and click on OK.

Step 2: Data Binding

Go to the Context tab of Main View and create a node FLIGHT.

Enter dictionary structure SFLIGHT, cardinality 0..n and click on Add attributes from structure.

Select the required fields and click on OK.

Step 3: Layout Design.

   Now Go to Layout tab, and click on Web Dynpro Code Wizard( magic symbol button).

Double click on Table to create and bind Table UI.

Click on context and select the Flight Node.

Change the cell editor of column 'PRICE' to 'Input Filed' , property to be bound to 'Value' and click on OK.

Now we can see the Table UI in the layout.

Now select the PRICE input field table column, under properties click on bind button for readOnly property.

Select the PRICE attribute( by default it will be selected ), And select the radio button 'Bind to the property of selected Attribute' and select 'Read Only' property. click on OK.

Now right click on Table UI and click on Insert Group Column.

Enter ID and select UI type as Table Column and click on OK.

Now we can see the Table column is added in the table at the last.

Place the created Table Column as the first column by just dragging and dropping at the first place or right click on 'TABLE_ACTION' column and clicking on Move Up.

Enter Caption( Header Text) for the TABLE_ACTION Column as 'Action'.

Now right click on TABLE_ACTION column and click on Insert Cell Variant.

Enter ID and select variant type 'TableMultiEditorCell' and click on OK.

Now select the TABLE_ACTION_VARIANT and under properties enter the variantKey - 'MyAction'.

Now select the TABLE_ACTION column and under properties enter the selectedCellVariant as 'MyAction', which is same as the varianKey of the MultiEditor Cell Variant.  This is important because, you are telling the system which variant to be selected during run time.

Now right click on TABLE_ACTION_VARIANT and click on Insert EDITOR.

Enter ID, select UI type Button and click on OK.

Enter button text 'Edit' , select image source and under events, click on create button to create an Action for the button.

Enter the Action name, description and click on OK.

Similarly create another button 'Button_delete', Enter text 'Delete' and create an Action for delete button.

Now go to Methods tab, and enter the below code in WDDOINIT method.

WDDOINIT

METHOD wddoinit .    DATA lo_nd_flight TYPE REF TO if_wd_context_node.    DATA lo_el_flight TYPE REF TO if_wd_context_element.    DATA lt_flight    TYPE wd_this->elements_flight.    DATA ls_flight    TYPE wd_this->element_flight. * Bind data to Table UI    lo_nd_flight = wd_context->get_child_node( name = wd_this->wdctx_flight ).    SELECT * FROM sflight INTO TABLE lt_flight UP TO 10 ROWS.    lo_nd_flight->bind_table( new_items = lt_flight set_initial_elements = abap_true ). * To disable PRICE Column Input of all rows initially    LOOP AT lt_flight INTO ls_flight.      lo_el_flight = lo_nd_flight->get_element( index = sy-tabix ). *  set single attribute      lo_el_flight->set_attribute_property(        attribute_name =  `PRICE`        property = 3  " Property 3 - Read Only        value = 'X' ). " Disable the rows for carrid    ENDLOOP. ENDMETHOD.

Enter the below code in ONACTIONEDIT_RECORD method.

ONACTIONEDIT_RECORD

METHOD onactionedit_record .    DATA lo_nd_flight TYPE REF TO if_wd_context_node.    DATA lo_el_flight TYPE REF TO if_wd_context_element.    DATA lr_element   TYPE REF TO if_wd_context_element.    DATA lt_flight    TYPE wd_this->elements_flight.    DATA ls_flight    TYPE wd_this->element_flight.    DATA lv_index     TYPE i. * Get row index of user clicked Edit button    lr_element = wdevent->get_context_element( 'CONTEXT_ELEMENT' ).    lv_index = lr_element->get_index( ). * Get Data in Table UI    lo_nd_flight = wd_context->get_child_node( name = wd_this->wdctx_flight ).    lo_nd_flight->get_static_attributes_table( IMPORTING table = lt_flight ). * Enable PRICE column Input for selected row    LOOP AT lt_flight INTO ls_flight.      IF sy-tabix = lv_index.        lo_el_flight = lo_nd_flight->get_element( index = sy-tabix ).        lo_el_flight->set_attribute_property(         attribute_name =  `PRICE`         property = 3    " Property 3 - Read Only         value = '' ).  " Enable      ELSE.        lo_el_flight = lo_nd_flight->get_element( index = sy-tabix ).        lo_el_flight->set_attribute_property(         attribute_name =  `PRICE`         property = 3   " Property 3 - Read Only         value = 'X' ).       " Disable      ENDIF.    ENDLOOP. ENDMETHOD.

Double click on method ONACTIONDELETE_RECORD and create a parameter CONTEXT_ELEMENT of type ref to IF_WD_CONTEXT_ELEMENT.

Enter the below code in ONACTIONDELETE_RECORD method.

ONACTIONDELETE_RECORD
METHOD onactiondelete_record .    DATA lo_nd_flight TYPE REF TO if_wd_context_node. * Delete the clicked Row    lo_nd_flight = wd_context->get_child_node( name = wd_this->wdctx_flight ).    lo_nd_flight->remove_element( context_element ). * Display message and delete from DB. ** NA for Demo ENDMETHOD.

Now Save and Activate the Web Dynpro Component.

Create Application.

Create Web Dynpro Application and save it.

Enter description and click on OK and Save the application.

Now right click on Web Dynpro application and click on Test.

Result:

Now you can see the Table UI with two buttons(Edit,Delete) in single column(Action) .

Now click on any Edit button.

You can see the corresponding row PRICE field is editable.

Click on delete button.

You can see the corresponding row got deleted.

Conclusion

Here I demonstrated creating only two buttons in a single column. The supported UI elements in Table Multi Editor Cell are: Button, Toggle Button, LinkToUrl, LinkToAction and File Download. Below is the snap shot where I have created Link to Action also in the same Column. You can use this as per your requirements.