This article describes on Display Tree/Details using taskflow regions.

Use Case Description

Let us take scenario where we need to display Tree/Details, left region contains category hierarchy with items listed in a tree structure (ex:- Region-Countries-Locations-Departments in tree format) and right region contains the Employees list.

In detail, Here User may drills down through categories using a tree until Employees are listed. Clicking the tree node name displays Employee list in the adjacent pane related to particular tree node.

Implementation Steps

The script for creating the tables and inserting the data required for this application

CreateSchema.sql

Lets create a Java EE Web Application with Entities based on Regions, Countries, Locations, Departments and Employees table. Create a Stateless Session Bean and data control for the Stateless Session Bean. Add the below code to the session bean and expose the method in local/remote interface and generate a data control for that.

Note:- Here in the below code "em" is a EntityManager.

public List<Employees> empFilteredByTreeNode(String treeNodeType, String paramValue) {
        String queryString = null;
        try {
            if (treeNodeType == "null") {
                queryString = "select * from Employees emp ORDER BY emp.employee_id ASC";
            } else if (Pattern.matches("[a-zA-Z]+[_]+[a-zA-Z]+[_]+[[0-9]+]+", treeNodeType)) {
                queryString = "select * from employees emp INNER JOIN departments dept\n" +
                        "ON emp.department_id = dept.department_id JOIN locations loc\n" +
                        "ON dept.location_id = loc.location_id JOIN countries cont\n" +
                        "ON loc.country_id = cont.country_id JOIN regions reg\n" +
                        "ON cont.region_id = reg.region_id and reg.region_name = '" + paramValue +
                        "' ORDER BY emp.employee_id ASC";
            } else if (treeNodeType.contains("regionsFindAll_bc_countriesList_1")) {
                queryString = "select * from employees emp INNER JOIN departments dept \n" +
                        "ON emp.department_id = dept.department_id JOIN locations loc \n" +
                        "ON dept.location_id = loc.location_id JOIN countries cont \n" +
                        "ON loc.country_id = cont.country_id and cont.country_name = '" + paramValue +
                        "' ORDER BY emp.employee_id ASC";
            } else if (treeNodeType.contains("regionsFindAll_bc_locationsList_1")) {
                queryString =
                        "select * from employees emp INNER JOIN departments dept ON emp.department_id = dept.department_id JOIN locations loc ON dept.location_id = loc.location_id and loc.city = '" +
                        paramValue + "' ORDER BY emp.employee_id ASC";

            } else if (treeNodeType.trim().contains("regionsFindAll_bc_departmentsList_1")) {
                queryString =
                        "select * from Employees emp INNER JOIN Departments dept ON emp.DEPARTMENT_ID = dept.DEPARTMENT_ID and dept.DEPARTMENT_NAME = '" +
                        paramValue + "'";
            }
        } catch (NullPointerException e) {
            System.out.println(e.getMessage());
        }   
        return em.createNativeQuery(queryString, Employees.class).getResultList();
    }

In the ViewController project, create two ADF taskflow with page Fragments and name them as FirstTaskflow and SecondTaskflow respectively. Open FirstTaskflow,from component palette drop view(Page Fragment) name it as TreeList.jsff. Open SeconfTaskflow, from component palette drop view(Page Fragment) name it as EmpList.jsff and create two paramters in its overview parameters tab as shown in below image.

Open TreeList.jsff , from data control palette drop regionsFindAll->Tree as ADF Tree. In Edit Tree Binding dialog, for Tree Level Rules select the display attributes as follows:-
model.Regions - regionName
model.Countries - countryName
model.Locations - city
model.Departments - departmentName

In structure panel, click on af:Tree - t1 and select selectionListener with edit property. Create a "TreeBean" managed bean with scope as "session" as shown in below Image.

Create new method as getTreeNodeSelectedValue and click ok.

Open TreeBean managed bean and add the below code:

private String treeNodeType;
private String paramValue;

public void getTreeNodeSelectedValue(SelectionEvent selectionEvent) {
        RichTree tree = (RichTree)selectionEvent.getSource();
        RowKeySet addedSet = selectionEvent.getAddedSet();
        Iterator i = addedSet.iterator();
        TreeModel model = (TreeModel)tree.getValue();
        model.setRowKey(i.next());
        JUCtrlHierNodeBinding node = (JUCtrlHierNodeBinding)tree.getRowData();
        //oracle.jbo.Row
        Row rw = node.getRow();
        Object selectedTreeNode = node.getAttribute(0);

        Object treeListType = node.getBindings();
        String treeNodeType = treeListType.toString();

        this.setParamValue(selectedTreeNode.toString());
        this.setTreeNodeType(treeNodeType);
    }

    public void setTreeNodeType(String treeNodeType) {
        this.treeNodeType = treeNodeType;
    }

    public String getTreeNodeType() {
        return treeNodeType;
    }

    public void setParamValue(String paramValue) {
        this.paramValue = paramValue;
    }

    public String getParamValue() {
        return paramValue;
    }<br />

Open EmpList.jsff , from data control palette drop empFilteredByTreeNode->Employees->Table as ADF Read-only Table. After selecting the  Employees result set, in Edit Action Binding dialog window pass the pageFlowScope parameters as shown in below Image.

In empList.jsff page, click Binding tab and click on Create Executable binding and select Invoke action and follow as shown in below image.

Edit executeEmpFiltered invoke action properties and set the Refresh to ifNeeded, So when ever the page needs the method will be executed.

Create Main.jspx page with page template as Oracle Three Column Layout. Drop FirstTaskflow as Region in start facet and drop SecondTaskflow as Region in center facet, Edit task Flow Binding dialog window pass the Input Paramters as shown in below Image.

Run the Main.jspx, tree will be displayed in left region and emp details will displyaed on the right region. Click on the Americas in tree node, all emp related to the Americas related will be displayed.

Click on Americas->United States of America->South San Francisco->Accounting, only employee belongs to the Accounting department will be displayed.