Skip to main content

ADF 11g : Fancy Master Detail or how to Highlight Related Detail Records

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.
1:  public static void makeCurrent(SelectionEvent selectionEvent){  
2: RichTable _table = (RichTable) selectionEvent.getSource();
3: CollectionModel _tableModel = (CollectionModel) _table.getValue();
4: JUCtrlHierBinding _adfTableBinding = (JUCtrlHierBinding) _tableModel.getWrappedData();
5: DCIteratorBinding _tableIteratorBinding = _adfTableBinding.getDCIteratorBinding();
6: Object _selectedRowData = _table.getSelectedRowData();
7: JUCtrlHierNodeBinding _nodeBinding = (JUCtrlHierNodeBinding) _selectedRowData;
8: //get the row key from the node binding and set it as the current row in the iterator
9: Key _rwKey = _nodeBinding.getRowKey();
10: _tableIteratorBinding.setCurrentRowWithKey(_rwKey.toStringFormat(true));
11: }

I call this method in the selectionListener of the Countries table.
1:  <af:table rows="#{bindings.CountriesView2.rangeSize}"  
2: fetchSize="#{bindings.CountriesView2.rangeSize}"
3: emptyText="#{bindings.CountriesView2.viewable ? 'No data to display.' : 'Access Denied.'}"
4: var="row"
5: value="#{bindings.CountriesView2.collectionModel}"
6: rowBandingInterval="0"
7: selectedRowKeys="#{bindings.CountriesView2.collectionModel.selectedRow}"
8: selectionListener="#{pageFlowScope.HighLightBean.onCountryTableSelect}"
9: rowSelection="single" id="t1"
10: styleClass="AFStretchWidth>
11: <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.
1:  public void onCountryTableSelect(SelectionEvent selectionEvent) {  
2: // your pre-trigger code goes here ...
3: GenericTableSelectionHandler.makeCurrent(selectionEvent);
4: //your post-trigger code goes here ...
5: DCIteratorBinding conIter = ADFUtils.findIterator("CountriesView2Iterator");
6: matchEm(conIter.getCurrentRow());
7: }

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.
1:  private void matchEm(Row r) {  
2: RowKeySetImpl newSelection = new RowKeySetImpl();
3: locTable.getSelectedRowKeys().clear();
4: String countryId = (String)r.getAttribute("CountryId");
5: //the CollectionModel provides access to the ADF Binding for this table
6: CollectionModel model = (CollectionModel)locTable.getValue();
7: int rowCount = model.getRowCount();
8: for (int i = 0; i &lt; rowCount; i++) {
9: model.setRowIndex(i);
10: Object rowkey = model.getRowKey();
11: JUCtrlHierNodeBinding rowdata = (JUCtrlHierNodeBinding)model.getRowData(i);
12: Row loc = rowdata.getRowAtRangeIndex(i);
13: if (loc.getAttribute("CountryId").toString().equalsIgnoreCase(countryId)) {
14: System.out.println("found a match for locations " + loc.getAttribute("City"));
15: System.out.println("adding key " + loc.getKey());
16: newSelection.add(rowkey);
17: }
18: }
19: locTable.setSelectedRowKeys(newSelection);
20: AdfFacesContext.getCurrentInstance().addPartialTarget(locTable);
21: }

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.

You can download the sample workspace here.
This post was originally published on the amis technology blog.


Unknown said…
Hi Luc, how are you?

I have a question for you. In this example of yours, how do you change your code so that you can select more than one country and show for those countries, the locations you have?

I'm trying to do something like you, but i'm only showing what i select, not all the records and i would like to modify my code to show all the records and highlight the ones i need.
Unknown said…
Hi Luc, how are you?

I have a question for you. I'm trying to do what you're doing but i want to do with multiple selection and my question is: how can you modify your code to work with multiple selection?

I'm doing with bindings but i only show the records i select, not every records and highlight the ones that i'm interested.

My regards,
Luc Bors said…
I think part II of this post has the answer to your question: here is the link

Popular posts from this blog

How to: Adding Speech to Oracle Digital Assistant; Talk to me Goose

At Oracle Code One in October, and also on DOAG in Nurnberg Germany in November I presented on how to go beyond your regular chatbot. This presentation contained a part on exposing your Oracle Digital Assistant over Alexa and also a part on face recognition. I finally found the time to blog about it. In this blogpost I will share details of the Alexa implementation in this solution.
Typically there are 3 area's of interest which I will explain. Webhook Code to enable communication between Alexa and Oracle Digital AssistantAlexaDigital Assistant (DA) Explaining the Webhook Code The overall setup contains of Alexa, a NodeJS webhook and an Oracle Digital Assistant.
The webhook code will be responsible for receiving and transforming the JSON payload from the Alexa request. The transformed will be sent to a webhook configured on Oracle DA. The DA will send its response back to the webhook, which will transform into a format that can be used by an Alexa device. To code exposes two REST …

How to use node-red to interact with twitter

Recently I had to setup an application that was able to read twitter and, based on some predefined keywords,  had to reply to specific tweets. I decided to have a look at node-red to set this stuff up. It proofed to be rather straightforward and easy to implement. The hardest part was to get approval for a twitter developer account. In this post I describe how I used node-red and how I implemented the interaction with twitter.
What is node-red, and how to use it? Node-RED  ( is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using the wide range of nodes in the palette that can be deployed to its runtime in a single-click.  You can use node-RED in many ways, but for the purpose of this demo I decided to run it in a docker image. I used the way described here (, as this is a no…

ADF 11g Quicky 3 : Adding Error, Info and Warning messages

How can we add a message programatically ? Last week I got this question for the second time in a months time. I decided to write a short blogpost on how this works.

Adding messages is very easy, you just need to know how it works.
You can add a message to your faces context by creating a new FacesMessage. Set the severity (ERROR, WARNING, INFO or FATAL ), set the message text, and if nessecary a message detail. The fragment below shows the code for an ERROR message.

1: public void setMessagesErr(ActionEvent actionEvent) {
2: String msg = "This is a message";
3: AdfFacesContext adfFacesContext = null;
4: adfFacesContext = AdfFacesContext.getCurrentInstance();
5: FacesContext ctx = FacesContext.getCurrentInstance();
6: FacesMessage fm =
7: new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, "");
8: ctx.addMessage(null, fm);
9: }

I created a simple page with a couple of buttons to show the result of setting the message. When the butto…