How to create and use Table Multi Editor Cell in Web Dynpro ABAP
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. * Bind data to Table UI * To disable PRICE Column Input of all rows initially 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. * Get row index of user clicked Edit button * Get Data in Table UI * Enable PRICE column Input for selected row 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
** NA for Demo
|
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.
New NetWeaver Information at SAP.com
Very Helpfull