Nice little feature in ADF 11g: 'target data source' attribute on tree binding helps synchronize page with tree node selection

Due to jet lag, I have plenty of time to shop around in the candy store that is called ADF 11g. Occasionally, upon close inspection of this or that property inspector, I come across interesting little things that I might as well share with you. Just now I came across the property ‘target data source’ on node rule in the tree data binding editor. It is a nice little fellow: you can specify that upon selection of a node in the iterator based on which you are creating a tree binding node rule, another iterator should be synchronized: the rowkey for the node that is selected is to be used to set the current row for the target iterator.

That means with hardly any effort at all – and completely declaratively – the selection of a node in the tree can lead to synchronization of other parts of the page. I will show you a simple example.

I created a brand new Fusion Web Application in JDeveloper 11g.

I next added an ADF Library that contains the ADF BC definitions for SCOTTs EMP and DEPT. (see for more about creating such a library the article Building a repository of reusable ADF artefacts using ADF Libraries – for example: a reusable Placeholder Data Control ).

Adding the library as an effect on the Data Control palette:

In the ViewController project, I create a new JSF page – called HrmTree.jspx.

I dragged a PanelSplitter to the page – setting its width to 100%. Then I dropped a PanelBox in the first facet of the panel splitter.

Next I drag the DeptView1 collection from the HrmService data control to the page, dropping it as a Tree, in the PanelBox inside the PanelSplitter.

In the Tree Binding editor, I create Tree Level Rules for DeptView1 and EmpView (based on VO Usage EmpInDeptView). I select the attributes to display in the node label. At this point, I will ignore the target data source property.

Next I drag a PanelHeader to the second panelsplitter facet. Then I drop the EmpView1 collection in the PanelHeader as a read only form. It is the intention to have the currently selected Employee node explained in more detail here: this form should be synchronized when a new employee node is selected.

Now we come to the target data source property: we now return to the Tree Binding editor – in the HrmTree page go to the bindings tab. Select the DeptView binding and click on the edit icon.

In the tree binding editor, select the EmpView1 node rule

and set the Target Data Source to refer to the EmpView1Iterator – the iterator that was created when the EmpView1 collection was dropped as a read only form. We want this iterator to be set in accordance with the selected Employee node.

Before we can run the page, we have to do one last thing: at this point, the tree node selection even will lead to synchronization of the target iterator. However, no one will know about it. It is not visible all by itself. So we have to activate PPR: assign a value of hrmtree to the id attribute of the tree component. Add this same value to the partialTrigger attribute on the PanelHeader.

Now run the page.

Whenever an Employee node is selected, the detail form is updated to reflect the properties of the selected Employee.