Browse Category by af:tree

ADF: Filtering parent and child nodes in af:tree / af:treeTable

One of our customers required to filter data in a page with a tree component. Using Ashish’s post I am going to show you how to filter both parent and child nodes having just a single filter value. This can also be applied to treeTable component.

The first thing we need is a tree component and data structure, in this case we are going to use Oracle’s hr schema tables: Departments and Employees.

In our page we drag and drop DepartmentsView from datacontrols palette and create a tree component.

The next thing we have to do is to create a View Criteria in Departments View Object (parent).

We also have to crete a View Criteria in Employees View Object (child).

We have to expose setter method of the bind variable in parent View Object.
As we exposed the bind variable in parent, we need  to pass that value to the child by overriding createViewLinkAccessorRS method in parent View Object Implementation class (DepartmentsViewImpl.java)

The last step in the Model is to set a default View Criteria in parent View Object. To set it we have to right click on the View Object instance in our AppModule, click on ‘Edit’, select the View Criteria and click on ‘Ok’ button.

The Model is now finished, we now have to drag and drop the setter method from the data controls palette and create an ‘ADF Parameter Form’ so we can provide the filter value.

This will create ‘setsearchValue’ method binding in the pageDef. We also need to create a Execute operation of the parent View Object and call both operations from the ‘Filter’ button ActionListener.

This is how we should have the page.

If we run the application we can see the if we filter by ‘pat’ we just get values that contains that string.

If now we filter by ‘les’, we can see that we get values with ‘les’ string in both parent and child nodes.

ADF: Display current selected node in af:tree

Some times when we want to display some master detail data we use an af:tree because it is a easy and elegant way to display data. I am going to show you how to display data of the selected node in an af:tree based on a single view object.
We are going to use this data model based on Oracle hr schema.
The first thing we have to do is drag and drop the EmployeesView1 view object from the data control palette to the page.

After that we also have to add a form based on EmployeesView. Here is the problem. What view object instance are we going to use to create the form? If we use Parent instance, although we select a child node, in the form we are going to see just the parent node data.

In order to solve this issue we are going to create a new instance of the Employees view object, in this case EmployeesDisplayVO.

The next step is to create a Action Binding with setCurrentRowWithKey operation of the new view object instance in the pagedef of our page.

The last step is to create a custom Selection Listener in our bean and associate it to the af:tree
component.

In this method, a part from ejecute makeCurrent method of the treeModel, we are going to get selected keys and execute setCurrentRowWithKey method with the selected key as parameter.

When we select the first node only one key is in the list, but if we select the second or third level we will have one key per level and we will have to use keyList.get(keyList.size() – 1) in order to get the last selected key.

If we run again the application we can se that if we select any node we can see its information in the form.

ADF: af:tree custom context menu using selected row values

When you right click on a tree node you can see a context menu with some options like expand or collapse a node or all nodes. You can also add a custom options easily by using contextMenu facet. I am going to show you how to add a custom context menu and use selected node values in the options label.
You can download this example from my Github repository.
To create the tree structure that we will use in this example we are going to use Employees table of hr schema.
We should have this structure in the data model.
After we have our views added to the application module, we have to drag and drop EmployeesView1 from the datacontrol palette.
The next step is to add the children in the tree binding so we click on the add green button and select ‘EmployeeView’.
We are only going to use one attribute, but you can add as many as you want.
After clicking ‘Ok’ in the dialog we can add a custom contextmenu by adding a component structure like this:

If you run the application you can see ‘MenuOption 1’ in the context menu.
Now that we have our custom option in the context menu, We can try to add #{node.FirstName} in the text property os the commandMenuItem.

As you can see the new option is still in the context menu, but no name is displayed.

To achieve this we have to use a setPropertyListener with a popupFetch to store the value that we want to show in a variable.
This variable has to be at least in viewScope.
contentDelivery property of the popup has to be set to ‘lazyUncached’.

If you run the application again you can see that the option now displays the name of the selected node properly.


Update 25/09/2015; 

There is a issue while trying to open the contextual menu clicking one node while you have already have a contextual menu opened. Some times it will not open.

It can be fixed by adding contextMenuSelect=”false” in your af:tree