Skip to Content

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.

/wp-content/uploads/2013/10/1_292213.jpg

Enter Description and click on OK.

/wp-content/uploads/2013/10/2_292304.jpg

Step 2: Data Binding

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

/wp-content/uploads/2013/10/4_292305.jpg

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

/wp-content/uploads/2013/10/5_292306.jpg

Select the required fields and click on OK.

/wp-content/uploads/2013/10/6_292307.jpg

Step 3: Layout Design.

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

/wp-content/uploads/2013/10/7_292308.jpg

Double click on Table to create and bind Table UI.

/wp-content/uploads/2013/10/8_292309.jpg

Click on context and select the Flight Node.

/wp-content/uploads/2013/10/9_292310.jpg


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

/wp-content/uploads/2013/10/10_292311.jpg

Now we can see the Table UI in the layout.

/wp-content/uploads/2013/10/11_292312.jpg

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

/wp-content/uploads/2013/10/14_292313.jpg

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.

/wp-content/uploads/2013/10/34_292314.jpg

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

/wp-content/uploads/2013/10/16_292315.jpg

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

/wp-content/uploads/2013/10/17_292319.jpg

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

/wp-content/uploads/2013/10/18_292321.jpg

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.

/wp-content/uploads/2013/10/19_292323.jpg

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

/wp-content/uploads/2013/10/20_292324.jpg

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

/wp-content/uploads/2013/10/21_292327.jpg

Enter ID and select variant type ‘TableMultiEditorCell’ and click on OK.

/wp-content/uploads/2013/10/22_292329.jpg

Now select the TABLE_ACTION_VARIANT and under properties enter the variantKey – ‘MyAction’.

/wp-content/uploads/2013/10/23_292332.jpg

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.

/wp-content/uploads/2013/10/24_292334.jpg

Now right click on TABLE_ACTION_VARIANT and click on Insert EDITOR.

/wp-content/uploads/2013/10/25_292335.jpg

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

/wp-content/uploads/2013/10/26_292337.jpg

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

/wp-content/uploads/2013/10/27_292338.jpg

Enter the Action name, description and click on OK.

/wp-content/uploads/2013/10/28_292339.jpg

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

/wp-content/uploads/2013/10/29_292340.jpg

/wp-content/uploads/2013/10/30_292341.jpg

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 = sytabix ).
*  set single attribute
     lo_el_flight->set_attribute_property(
       attribute_name `PRICE`
       property = ” 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 sytabix = lv_index.
       lo_el_flight = lo_nd_flight->get_element( index = sytabix ).
       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 = sytabix ).
       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.

/wp-content/uploads/2013/10/33_293488.jpg

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.

/wp-content/uploads/2013/10/31_292342.jpg

Enter description and click on OK and Save the application.

/wp-content/uploads/2013/10/32_292346.jpg

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

/wp-content/uploads/2013/10/35_292347.jpg


Result:


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

/wp-content/uploads/2013/10/36_292348.jpg

Now click on any Edit button.

/wp-content/uploads/2013/10/37_292349.jpg

You can see the corresponding row PRICE field is editable.

/wp-content/uploads/2013/10/38_292350.jpg

Click on delete button.

/wp-content/uploads/2013/10/39_292351.jpg

You can see the corresponding row got deleted.

/wp-content/uploads/2013/10/40_292352.jpg

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.

/wp-content/uploads/2013/10/41_292355.jpg

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

    1. Kiran Kumar Valluru Post author

      Hi,

      Could you please let me know what error you are encountering?

      I think creating parameter ‘context_element’ in onactiondelete_record method was missed in the flow.

      I guess you are getting syntax error : context_element unknown ! rite? Please create the parameter ‘context_element’ in onactiondelete_record method.

      Regards,

      Kiran

      (0) 

Leave a Reply