Sunday, December 19, 2010

Sorting a table column in a Web Dynpro application

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  to  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.

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


No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites