Last week I a had a rather interesting question: Is it possible to highlight related data that is in different af:table components ? Sure you can, so I decided to write a simple example application, and share the knowledge in this post
The use Case.
After selecting a row in one table I need to highlight related rows in another table.
The implementation.
To implement this, I create a page based on ADF Business Components for Countries and Locations, both from the HR schema.
Note that, in order to make these tables behave independently, I do not use a viewlink between countries and locations.
This means that there will be no master detail relationship and that the locations table will always show all locations, not only the ones in the selected country.
The way to go here is :
a) Select 1 country in the left table
b) In the selectionListener of that country table add each and every location that is in the selected country to the selectedRowKeys of the locationsTable.
The Challenges.
The First challenge is the creation of the multiselect table component containing the Locations. Now why would that be a challenge. I allready described in one of my previous posts where I ran into an issue with mutliselection: The developers guide (22.5.1) has the solution. DO NOT check ‘enable selection’ when you want to use multiple selection in a table. And I do need mutliselection here because I want to select all related records. So create the table without selectionListener and selectedRowKeys attributes.
Next step is the creation of a custom TableSelectionHandler. The Handler is needed, because when selecting a row in the countries table, I need to do more then just selecting that row; I also need to process the selected row and match it with available Locations. This custom selectionHandler is described by Frank Nimphius in his book. Code for the Listener is in the fragment below.
public static void makeCurrent(SelectionEvent selectionEvent){ RichTable _table = (RichTable) selectionEvent.getSource(); CollectionModel _tableModel = (CollectionModel) _table.getValue(); JUCtrlHierBinding _adfTableBinding = (JUCtrlHierBinding) _tableModel.getWrappedData(); DCIteratorBinding _tableIteratorBinding = _adfTableBinding.getDCIteratorBinding(); Object _selectedRowData = _table.getSelectedRowData(); JUCtrlHierNodeBinding _nodeBinding = (JUCtrlHierNodeBinding) _selectedRowData; //get the row key from the node binding and set it as the current row in the iterator Key _rwKey = _nodeBinding.getRowKey(); _tableIteratorBinding.setCurrentRowWithKey(_rwKey.toStringFormat(true)); }
I call this method in the selectionListener of the Countries table.
<af:table rows="#{bindings.CountriesView2.rangeSize}" fetchSize="#{bindings.CountriesView2.rangeSize}" emptyText="#{bindings.CountriesView2.viewable ? 'No data to display.' : 'Access Denied.'}" var="row" value="#{bindings.CountriesView2.collectionModel}" rowBandingInterval="0" selectedRowKeys="#{bindings.CountriesView2.collectionModel.selectedRow}" selectionListener="#{pageFlowScope.HighLightBean.onCountryTableSelect}" rowSelection="single" id="t1" styleClass="AFStretchWidth> <af:column ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
The onCountryTableSelect method, not only calls the makeCurrent() method in my GenericTableSelectionHandler, but it also calls out to the matchEm method that will match the current Country, to all available Locations.
public void onCountryTableSelect(SelectionEvent selectionEvent) { // your pre-trigger code goes here ... GenericTableSelectionHandler.makeCurrent(selectionEvent); //your post-trigger code goes here ... DCIteratorBinding conIter = ADFUtils.findIterator("CountriesView2Iterator"); matchEm(conIter.getCurrentRow()); }
You might be tempted to use setSelectedRowKeys() on the LocationsIterator. This however doesn’t work. You will need to use the table’s value which is an instance of CollectionModel. This sounds complicated perhaps, but in fact it isn’t.
private void matchEm(Row r) { RowKeySetImpl newSelection = new RowKeySetImpl(); locTable.getSelectedRowKeys().clear(); String countryId = (String)r.getAttribute("CountryId"); //the CollectionModel provides access to the ADF Binding for this table CollectionModel model = (CollectionModel)locTable.getValue(); int rowCount = model.getRowCount(); for (int i = 0; i < rowCount; i++) { model.setRowIndex(i); Object rowkey = model.getRowKey(); JUCtrlHierNodeBinding rowdata = (JUCtrlHierNodeBinding)model.getRowData(i); Row loc = rowdata.getRowAtRangeIndex(i); if (loc.getAttribute("CountryId").toString().equalsIgnoreCase(countryId)) { System.out.println("found a match for locations " + loc.getAttribute("City")); System.out.println("adding key " + loc.getKey()); newSelection.add(rowkey); } } locTable.setSelectedRowKeys(newSelection); AdfFacesContext.getCurrentInstance().addPartialTarget(locTable); }
Now what this code does is the following:
It gets all rows that are in the table’s ColectionModel, and for each of these rows it gets the rowkey.
Whenever the CountryId in that row is the same as the selected country, the rowkey is added to the rowkeyset containing the new selection.
Finally the, rowkeyset is used to set the selectedRowKeys of the table, and the table is added to the partialtargets using following code:
The result.
When you run the application, you will see the result. Select a country in the left table, and all related locations are selected in the right table.
Change the country, and see how selected locations are also updated.
Resources.
You can download the sample workspace here.
Hi Luc,
I want to know the difference between CollectionModel and JUCtrlHierBinding and JUCtrlHierNodeBinding as I search and didn’t find clear information about the difference.
Nice example of an active and responsive (and helpful) UI and a nice example of how ADF can help you implement it. Does not even seem that hard the way to explain it.
Well done!
Lucas