Implementing a Filter in Table UI Element in Web Dynpro ABAP

Hello All,

The document will guide to implement a filter on table UI element in Web Dynpro ABAP, Keep in mind that the trick behind this implementation of the filter is in having a node containing attributes and each attribute has to be bound to the filter value property of the table UI element.

Follow the below steps to achieve it.

Create a Web dynpro ABAP component

Create a node in the context tab of the View as displayed below.

The node in the example has few fields from the MARA table.

Now go to the layout tab and insert a table ui element and bind it with the node created above .

This is displayed in the below screen shots

Now the Table UI element has been placed at the screen, for filtering the values a node needs to be created in the context of the view.

and the table column needs to be bound for the filter value property as displayed.

An action needs to be created. This declaration of the action on "ON Filter" event would enable the display of the filter icon on the table UI element.

This is displayed in the screenshots below.

Now an attribute needs to be declared in the view, remember that this attribute needs to be populated in the WDDOMODIFYVIEW hook method.

Populating the attribute is the next step and this needs to be done in the modify view as it has the "VIEW" as importing parameter.

method WDDOMODIFYVIEW .

DATA: LR_TABLE TYPE REF TO CL_WD_TABLE,

  W_IS_FILTER_ON TYPE BOOLEAN.

  LR_TABLE ?= VIEW->GET_ELEMENT( 'TAB_MARA' ). " TAB_MARA is name of table ui element on screen

  WD_THIS->TABLE_METHOD_HANDLER ?= LR_TABLE->_METHOD_HANDLER.

  LR_TABLE->SET_ON_FILTER( 'A_FILTER' )."A_Filter is the action name

endmethod.

Below is the one line code for the A_Filter action declared

method ONACTIONA_FILTER .

        wd_this->table_method_handler->apply_filter( ).

endmethod.

Execute the application, the Material column has the filter option available because this was the only column where filter value property was bound, if needed more columns could be bound to the attributes of the node created for filtering.

write and press enter to test the functionality

Thanks and Regards,

Shitanshu Sahai

Keep Learning something new everyday to stay young