Sorting a table column in a WebDynpro application

By Swarna Ramya R, Wipro

Purpose:
Most of us are familiar with the Table UI element and when we create a normal table and bind it to the
context node, the data is not complex or confusing. But sometimes the tables may have more number
of columns with numerical values. So to make better sense of the values, most of the customers prefer
to have sorting at the column level. Initially the sorting may seem to be a complex process.
WebDynpro ABAP has provided us a table handler to carry out the sorting functionality.
Procedure:
1. Create one Webdynpro Component with name ZWA_TABLE_SORT.

2. In the View Layout , Right click the ROOTUIELEMENTCONTAINER and give Insert Element. It will
open a Pop-Up for Creating an Element.
3. Enter Table in the Name Field and Select Table in the Type Field and Press Enter.

4. Go to the Context Tab, Right Click the Context and Select Create Node.

5. Give the Node Name as MARA with Dictionary Structure MARA with Cardinality 0..n and Press
Add Attribute from Structure .

6. Select the Component MATNR, MTART, MATKL, and MEINS and Press Enter.

7. In the Text Field of the Table Caption Properties, Give Material Details.

8. Right Click the TABLE and Select Create Binding. It will open a Popup for Creating Context
Binding.

9. Click the Button Context. It will open a Popup for Selecting Context Element.

10. Select MARA and Press Enter.

11. It will show all the Context Attributes in that Node. Then Press Enter.

12. Go to Attributes Tab, Give TABLE_CONTROL in the Attribute Column , Check the Check Box in the
RefTo Column & give IF_WD_TABLE_METHOD_HNDL in the Associated Type.

13. Then create one Event for onSort Event of the Table by Clicking the Create Button as shown
below. Then Give the Action Name as ON_TEST_SORT and press Enter.

14. Then go to the Methods Tab.

15. Write the Following Coding in the Corresponding Methods.

WDDOINIT:
method WDDOINIT .
data LO_ND_MARA type ref to IF_WD_CONTEXT_NODE.
data LO_EL_MARA type ref to IF_WD_CONTEXT_ELEMENT.
data LT_MARA type WD_THIS->ELEMENTS_MARA.
data LS_MARA type WD_THIS->ELEMENT_MARA.
* navigate from <CONTEXT> to <MARA> via lead selection
LO_ND_MARA = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_MARA ).
SELECT MATNR MTART MATKL MEINS FROM MARA INTO CORRESPONDING FIELDS OF
TABLE LT_MARA UP TO 10 ROWS WHERE MATNR LIKE 'A%'.
* Bind Table

LO_ND_MARA->BIND_TABLE( LT_MARA ).
endmethod.
WDDOMODIFYVIEW:
method WDDOMODIFYVIEW .
data wd_table type ref to cl_wd_table.
check first_time = abap_true.
* Name of the table UI element to be provided
wd_table ?= view->get_element( 'TABLE' ).
wd_this->table_control ?= wd_table->_method_handler.
*Name of the key attribute of the context node to which the table binding
is done to be provided
wd_this->table_control->set_key_attribute_name( 'MATNR' ).
endmethod.
ONACTIONON_TEST_SORT:
method ONACTIONON_TEST_SORT .
wd_this->table_control->apply_sorting( ).
endmethod.

16. Save and Activate the Application.

17. Create WebDynpro Application, save it and Test the Application.

Output:

1. Initially the Table will look like this.

2. After Clicking the Sort Button, the Output will looks as Follows.