Tree Table Component with declarative presentation in ADF, Access childs without custom selection listener

Sharing is Caring

Hello all,
This is my second post on ADF Tree Table Component (af:treeTable), the first post was about creating and overriding tree table selection listener to get node value in the managed bean, see
TreeTable Component in Oracle ADF(Hierarchical Representation)

In this post, I am going to explain how to

  • Use multiple detail column in treeTable
  • Design better UI
  • Manage child rows
  • Use link,image,checkbox in treeTable conditionally

so I assume that you all know about creating the tree Table component, I am using default HR Schema (Employees, Departments table) to the master-detail relation in the tree and I have to show the detail of Employee under Department node

  • I have created a treeTable using following details of Employees VO
  • Now on running my page, it is looking like this, very odd and complex view

XML source-

  <af:treeTable value="#{bindings.Departments1.treeModel}" var="node"
                              selectionListener="#{bindings.Departments1.treeModel.makeCurrent}" rowSelection="single"
                              id="tt1">
                    <f:facet name="nodeStamp">
                        <af:column id="c1" width="500">
                            <af:outputText value="#{node}" id="ot1"/>
                        </af:column>
                    </f:facet>
                    <f:facet name="pathStamp">
                        <af:outputText value="#{node}" id="ot2"/>
                    </f:facet>
                </af:treeTable>

 

  • It shows that all details of employees are clubbed in one column that is nodestamp, now to show details in different columns I have added 5 columns in treeTable, and separate detail in each column as Email, FirstName, LastName etc
    To add column right click on treeTable and insert-

In column drop an input text and set its value taking node reference

 

  •  Now run the page and see, there is now 5 column with different details but still, that clubbed value is shown.
  • Now to remove that clubbed detail, go to nodestamp facet of treeTable and see value of output text inside column, it is set to #{node} ,due to this all values available in node are clubbed and displayed in page, now we have to set its value to any of Master table’s (Departments) attribute

 

 

  •  Now run the page, only department name is displayed on the header, and the corresponding value for detail is blank
  •  We are done with this part, now try to make its UI somewhat better using some styles, so I have used the different background color for header and detail part of treeTable conditionally
  • To do this I have set inline style property conditionally because I have to change color of the same column according to master and detail data, see the condition

#{node.DepartmentName!=null ? 'background-color:darkgreen' :  'background-color:rgb(239,255,213);'  }

 

  • Now see how to get selected child row without over-riding treeTable’s selection listener, to do this I have added an image link in treeTable and created an action listener on that to show currently selected detail row
  • Bind tree table to managed bean and create two methods to get selected RowIterator and node Key

/**Tree Table Binding in managed bean*/
private RichTreeTable treeTabBind;

public void setTreeTabBind(RichTreeTable treeTabBind) {
this.treeTabBind = treeTabBind;
}

public RichTreeTable getTreeTabBind() {
return treeTabBind;
}

/**Method to get Iterator*/
public RowIterator getSelectedNodeIterator() {
if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) {
for (Object rKey : getTreeTabBind().getSelectedRowKeys()) {
getTreeTabBind().setRowKey(rKey);
return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowIterator();
}
}
return null;
}

/**Method to get Node Key*/
public Key getSelectedNodeKey() {
if (getTreeTabBind() != null && getTreeTabBind().getSelectedRowKeys() != null) {
for (Object rKey : getTreeTabBind().getSelectedRowKeys()) {
getTreeTabBind().setRowKey(rKey);
return ((JUCtrlHierNodeBinding)getTreeTabBind().getRowData()).getRowKey();
}
}
return null;
}

 

  • Now to get currently selected node and row pass Iterator and Node key in this method- see
public void showCurRowDetail(RowIterator ri, Key selectedNodeKey) {
Row[] rows = ri.findByKey(selectedNodeKey, 1);

FacesMessage msg = new FacesMessage(rows[0].getAttribute("FirstName") + "'s data available in this row");
FacesContext.getCurrentInstance().addMessage(null, msg);
}

 

  • Now run the application and click on the link to see selected row –

 

 

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

6 thoughts on “Tree Table Component with declarative presentation in ADF, Access childs without custom selection listener”

  1. Hello, the new versions of jdeveloper (12c), variable #{node} doesn't show the attributes of table child. How can I show the values of table child into the af:columns like your example with new versions of jdeveloper?

    Thanks and regards.

  2. Thanks for your response. I've tried with your example and when deploy show this error:
    Error Rendering View[/main.jsf]
    java.lang.NumberFormatException: For input string: "bindings"

    Can you help me?

    Thanks and regards

  3. I'm getting the same error in Studio Edition Version 12.2.1.1.0:

    java.lang.NumberFormatException: For input string: "bindings"
    at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
    at java.lang.Integer.parseInt(Integer.java:580)

Leave a Reply

Your email address will not be published. Required fields are marked *