Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Filtering in Table UI Element

 

 

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

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

2.      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:

http://help.sap.com/saphelp_nw73/helpdata/en/58/f80d7cd805406d8b5647b7bb2444e1/content.htm

http://help.sap.com/saphelp_nw2004s/helpdata/en/2d/390e422dfcde2ce10000000a1550b0/frameset.htm

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.

clip_image002

 

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:

1.      Create a context attribute to be binded to the filter value property of the company code column.

2.      Create a context attribute to switch on and switch off the filter.

3.      Create a toolbar in the table UI element and button with an event handler method to switch on and switch off the filter.

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

clip_image004 

 

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.

clip_image006

 

clip_image008

Step 3: Create an attribute IS_FILTER_ON to set the filter option on or off.

clip_image010

 

clip_image012

Step 4: Right click on the table UI element and insert a toolbar in the table to add the filter button.

clip_image014

 

Right click on the toolbar and insert a right aligned toolbar element.

clip_image015

Provide the ID and choose the type as toolbartogglebutton.

clip_image017

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.

clip_image019

Create an action switch filter for the toolbar button created.

clip_image020

 

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.

clip_image022

 

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: Don't 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.

* 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' ).

* Get reference to the Filter & Sorting API

  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.
 

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( ).


* if the filter is off: show the whole table back

  wd_this->table_method_hndl->apply_filter( ).

 

Step 6: In the action tab of the view controller create an action FILTER.

clip_image024

 

 

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.

clip_image026

 

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.

 

clip_image028

 

 

clip_image030

 

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.

  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.


* Valuset for company code


  wa_valset-value = space.
 
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-value =
'1045'
.
  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.

 

 

 Output:

 

clip_image032

 

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 option


 
DATA 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( ).

 

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.