Filter table results using input and dropdown

Filtering a Web Dynpro table could be done using the native filter. We could type a value in the filter row and get the filtered data in the table:

However, we may want more options, like using a dropdown. A possible UI could include a button to show or hide our filter:

Pressing the button toggles the visibility of a search table. Changing values in this search row triggers the data filtering:

Some modeling work is required to achieve this. The original application could have been modeled this way:

The revised model looks like this:

We will go over the parts of the model and explain them.

We need to possible execution flows to populate the Grid View: through executing the service or after applying the filter. Since there is only a single input port to a Grid View, We use a Switch Operator to get the data from the possible flows.

1.      Add a Data Share element to the model and connect it to the output port of the service.

2.      Connect a Filter Operator to the Data Share.

3.      Add a Switch Operator to the model, and connect both the output port and the filter to it. Define the Switch Operator to use the fields from both inputs

4.      Connect a Grid View element to the Switch Operator.

5.      Add another Data Share element to the model and define the same set of fields as in the service output port. In addition add a Boolean Field defining whether the search is active, and set its default to “false”.

6.      Connect a Grid View to the new Data share. Set its visibility condition to depend on the Boolean field:

7.      In the Layout Board set the height of the Filter Grid View to one row. Make sure it doesn’t contain a redundant control for the show_filter field.

8.      Add a Toggle Button to the toolbar of the Bank List Grid View and set its value in the Configure Panel to =filter_values@show_filter. This buttons now shows or hides the Filter Table View.

9.      Add and Action to each control in the Filter table. Choose a Custom Action and name it “search”.

10.   Define a dropdown list for the relevant control, for example Bank Name: Right Click and choose “Entry List…”. If the control is not allowed the definition of a list change its type, for example: Right click => Change Control Type => Dropdown List.

11.   Choose Static List and press Next.

12.   Type the values you want to use in the search for this field.

Use a dynamic list if you want to retrieve the search values from a Service.

13.   Back in the Design Board, define the Data Flow link between the Data Share and the Filter to listen to the “*search” event. Note that when listening to events not originated in the source of the Link, we must use the global “*” prefix to define a global sort of event listener.

14.   Right click on the Filter operator to define the filtering: Add a new row and choose “Define expression” in the Field column.

15.   In the Expression Editor you could edit the expression in the following manner: for each relevant field we return “true” if the value is empty. Otherwise we use the function CONTAINS(text, pattern) to determine whether the search value exists in the field. This way we sort by multiple search criteria but ignore empty search value.