Follow by Email

Monday, 26 August 2013

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

Hello all,
this is my second post on af:treeTable, first post was about creating and overriding tree table selection listener to get node value in managed bean, see
Tree Table 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 treeTable, i am using default HR Schema (Employees ,Departments table) to master detail relation in tree and i have to show 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"
                    <f:facet name="nodeStamp">
                        <af:column id="c1" width="500">
                            <af:outputText value="#{node}" id="ot1"/>
                    <f:facet name="pathStamp">
                        <af:outputText value="#{node}" id="ot2"/>

  • 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 seperate 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 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 page , only department name is displayed on header, and 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 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 same column according to master and detail data, see 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 a image link in treeTable and created a action listener on that to show current 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()) {
                    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()) {
                    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 application and click on link to see selected row -

No comments :

Post a Comment