Unlike ALV, we don’t have the default filtering option when we are displaying the data using the Table UI element. Filtering options needs to be done manually. In order to acheive that functionality all we need to do is to trigger the apply filter method of the interface if_wd_table_method_hndl to set the filter option to the table.
This method will take care of comparing the filter value with all other values in the column and Every column in the table UI element is provided with a property called filterValue. The value passed to this attribute will be the filter criteria. The value is compared with all the other values in that column and only the matching rows are displayed. In case many no of columns are set with filtering option, the rows with the combination of values will only be displayed. When a filtering option is set a row will be introduced in the top of the table with input box or drop down to the column where the column filtervalue attribute is binded to the context attribute and non enabled field to the rest of the columns.
There are two types of input for filtering is possible.
- When you bind the property filtervalue of the column to a context attribute whose type does not have a fixed domain values then the input field UI element will be provided. However an attribute without fixed domain values can be made displayed as a drop down instead of input box by adding valueset to the attribute which will be covered in the following post.
- When the attribute with fixed domain values is binded to the filtervalue property then drop down UI element will be provided as a selection option.
For more refer to the SAP Help portal links:
Now let’s see how to set the filter option in the table UI element.
Pre- Requisite: Knowledge on how to display the data’s using table UI element. Refer to the link to learn how to display the data using Table UI element. I have created a simple webdynpro component that displays some records from the EKKO table.
The Output of the table is as below.
Now let us provide filter option for this table in the column company code. Let’s say that I want to display the data only for the company code 1019. Firstly, we are going to see how to set the filter with an input field and drop down later on.
Steps to do:
- Create a context attribute to be binded to the filter value property of the company code column.
- Create a context attribute to switch on and switch off the filter.
- Create a toolbar in the table UI element and button with an event handler method to switch on and switch off the filter.
- Create an action to be triggered when the filter is selected.
Procedure: In this blog, let’s replicate the code implemented by the SAP in the demo component for table UI element DEMO_TABLE. Lets create the context node, attributes and method with the same name so that we can copy paste the code as it is. Step 1: Go to the context tab of the view controller and create a context node with the name FILTER and cardinality 1..1 and attribute BUKRS of type BUKRS.
Step 2: Go to the layout tab of the view controller and bind the filter value property of the table column BUKRS to the context attribute created.
Step 3: Create an attribute IS_FILTER_ON to set the filter option on or off.
Step 4: Right click on the table UI element and insert a toolbar in the table to add the filter button.
Right click on the toolbar and insert a right aligned toolbar element.
Provide the ID and choose the type as toolbartogglebutton.
Bind the checked property of the toolbar element to the IS_FILTER_ON attribute created by us. When the button is clicked the IS_FILTER_ON will be provided with value X.
Create an action switch filter for the toolbar button created.
Step 5: In the attributes tab of the view controller create a reference variable of type if_wd_table_method_hndl to store the object reference to the table handler.
Now let’s move into the coding part. To change the properties of the table we need a handler to the table.
Write the following code in the domodify view of the view or copy paste the code from the demo component.
Note: Dont forget to change the value passed to the get element with the ID of the table UI element. Otherwise you will get a dump.
Code explanation: Getting the value IS_FILTER_ON binded to the toolbar button and getting the handler for the table. If the IS_FILTER_ON is provided with value X which means the user have clicked the table toolbar element we created and the value is set to space when we click it again. Using that we are instructing the table handler to call the action FILTER (which we are going to create) when the user click on filter button and in other case no action.
DATA: l_table TYPE REF TO cl_wd_table,
l_is_filter_on TYPE wdy_boolean.
l_is_filter_on TYPE wdy_boolean.
* Find out whether filter is on
wd_context->get_attribute( EXPORTING name = ‘IS_FILTER_ON’
IMPORTING value = l_is_filter_on ).
* Get reference of the table view element
l_table ?= view->get_element( ‘TAB_EKKO’ ).
wd_context->get_attribute( EXPORTING name = ‘IS_FILTER_ON’
IMPORTING value = l_is_filter_on ).
* Get reference of the table view element
l_table ?= view->get_element( ‘TAB_EKKO’ ).
* Get reference to the Filter & Sorting API
wd_this->TABLE_METHOD_HNDL ?= l_table->_method_handler.
wd_this->TABLE_METHOD_HNDL ?= l_table->_method_handler.
* Set or cancel the table’s filter action
IF l_is_filter_on = abap_true.
l_table->set_on_filter( ‘FILTER’ ).
ELSE.
l_table->set_on_filter( ” ).
ENDIF.
IF l_is_filter_on = abap_true.
l_table->set_on_filter( ‘FILTER’ ).
ELSE.
l_table->set_on_filter( ” ).
ENDIF.
Write the following code in the SWITCH_FILTER action created for the table toolbar element. This following code is to invalidate the value binded to the filtervalue property so that the line inserted in the table for the filter will be invalidated.
DATA: l_node TYPE REF TO if_wd_context_node.
* in any case clear the table’s filter strings
l_node = wd_context->get_child_node( if_v_main=>wdctx_filter ).
l_node->invalidate( ).
l_node = wd_context->get_child_node( if_v_main=>wdctx_filter ).
l_node->invalidate( ).
* if the filter is off: show the whole table back
wd_this->table_method_hndl->apply_filter( ).
wd_this->table_method_hndl->apply_filter( ).
Step 6: In the action tab of the view controller create an action FILTER.
Write the following code in the event handler for the FILTER. wd_this->table_method_hndl->apply_filter( ).
Output: The output of the application is as below. Selecting the Filter button mark (toolbar element) will trigger the switch_filter method setting the value of IS_FILTER_ON as X. When the domodify view method is called it will set the action FILTER as a method to be called when the user presses filter.
You can now see a line inserted in the table with company code as a Input filed and a filter button in the left which will trigger the action FILTER.
As i mentioned earlier, binding the filter value property of the column with the attribute with fixed domain values will show a drop down as a filter and in the other case an input field.
Now let us see how to make the filter option as a drop down even though the attribute binded does not have fixed domain values. This can be achieved by adding an value set to the attribute.
Write the following code in the DOINIT method of the view controller to add a value set to the attribute.
DATA lo_nd_filter TYPE REF TO if_wd_context_node.
DATA lo_nd_status_info TYPE REF TO if_wd_context_node_info.
DATA it_valset TYPE STANDARD TABLE OF wdr_context_attr_value.
DATA wa_valset TYPE wdr_context_attr_value.
DATA lo_nd_status_info TYPE REF TO if_wd_context_node_info.
DATA it_valset TYPE STANDARD TABLE OF wdr_context_attr_value.
DATA wa_valset TYPE wdr_context_attr_value.
lo_nd_filter = wd_context->get_child_node( name = wd_this->wdctx_filter ).
CALL METHOD lo_nd_filter->get_node_info
RECEIVING
node_info = lo_nd_status_info.
RECEIVING
node_info = lo_nd_status_info.
* Valuset for company code
wa_valset-value = space.
APPEND wa_valset TO it_valset.
CLEAR wa_valset.
APPEND wa_valset TO it_valset.
CLEAR wa_valset.
wa_valset-value = ’1019′.
wa_valset-text = ’1019′.
APPEND wa_valset TO it_valset.
CLEAR wa_valset.
wa_valset-text = ’1019′.
APPEND wa_valset TO it_valset.
CLEAR wa_valset.
wa_valset-value = ’1045′.
wa_valset-text = ’1045′.
APPEND wa_valset TO it_valset.
CLEAR wa_valset.
wa_valset-text = ’1045′.
APPEND wa_valset TO it_valset.
CLEAR wa_valset.
CALL METHOD lo_nd_status_info->set_attribute_value_set
EXPORTING
name = ‘BUKRS’
value_set = it_valset.
EXPORTING
name = ‘BUKRS’
value_set = it_valset.
Ouput:
There may be a certain scenario where you wanted to reset the filter. Say for example you are clicking a button search and you filter the company code value to 1045 then the next time you click on search again only the records for 1045 will be displayed in the table. In that case we need to reset the filter. Below is the peice of code which resets the filter.
* Resetting the filter optionDATA LO_EL_CONTEXT TYPE REF TO IF_WD_CONTEXT_ELEMENT.
DATA LS_CONTEXT TYPE WD_THIS->ELEMENT_CONTEXT.
DATA LV_IS_FILTER_ON TYPE WD_THIS->ELEMENT_CONTEXT-IS_FILTER_ON.LO_EL_CONTEXT = WD_CONTEXT->GET_ELEMENT( ).lv_is_filter_on = abap_false.LO_EL_CONTEXT->SET_ATTRIBUTE(
NAME = `IS_FILTER_ON`
VALUE = LV_IS_FILTER_ON ).wd_this->table_method_hndl->apply_filter( ).