Most of the time we use tables to show tabular data to users. However, JDev and ADF allow for other components like the af:listView to be used to show such data to the user in a more modern way.
The image above shows the normal display of data when an af:query is used together with a table to show the result.
A more fancy, modern look we get if we use a af:listView to show the results as this allows us to style the data
Use case 1
We like to use an af:query to search for employees and show the result in a styled af:listView.
This is pretty easy as we only have to use an af:listView as the result component of the af:query
And to exchange the af:table with an af:listView. Or you build the page by first dropping an af:query onto the page (without table) and then add the af:listView
Then you get the wizard to layout the list
This will give you a basic layout which can be styles in JDev as
The final result is
which looks more modern. One thing the af:table give you out of the box is the second use case.
User Case 2
We like the af:listView to be able to be filter the result like the af:table can.
Implementation of second use case
Easy you think? Well, the af:listView component doesn’t provide any filter out of the box. There isn’t even a filterModel like there is for an af:table.
So, how do we get this implemented. The idea is to use a af:table component but only use the filter provided by the af:table. The remaining parts like table data, possible scroll bars and status bar or scrollbars we remove.
We start by dragging the EmployeesView1 from the data control onto the page again.
And drop it after the closing af:panelHeader and before the af:listView as ‘ADF Table’
In the image you see that I have removed some available columns. Before we go to hide the part of the table we don’t need, we make the table work together with the af:query and the af:listView. When we use the af:query the table shows the right detail (auto PPR triggers the refresh of the table). However, if you have queried for the ‘Purchasing’ department and then enter an ‘s’ into the ‘First Name’ filter field of the table and hit enter, you get
As you see, the table shows the right result (2 rows) but the listView still shows all employees of the Purchasing department.
To make it work, we need to add a partialTrigger to the listView which points to the table. This way each time the table changes the listView will too.
Save all changes and refresh the page. Now if you enter a value into a filter field and hit enter, the listView will update too.
After the page works we have to get rid of the data below the header of the table. This is easy to accomplish by styling the table. We only need the filter field and the header below the filter fields so that we know which field filters which data. Simply set the maxHeight of the table to the exact height of the the two components. You can use your browser’s developer tools (F12) to measure the height. In my sample it’s 65px. So, setting the tables inlinestyle to
will hide everything below the filter and the header
If you like you can create a skin and create a style class and use this style class instead of setting the max-height directly to the inlineStyle of the table. A nice addon is that the table header sorting is working too for the listView.
You can download the sample from gitHub BlogFilterListView. The sample is build using JDev 22.214.171.124 and uses the HR DB schema. The principle can be used in other JDev versions too.