Skip to main content

Column Sorting in ADF TreeTable

Sorting of columns are not supported in ADF TreeTable by default. 
The documentation of 12c says :
Unlike the Table, the TreeTable does not support automatic sorting. The underlying TreeModel must support sorting by implementing it's sorting logic in the setSortCriteria(List criteria) method of the TreeModel.

But my client wanted sorting on the tree table on few columns. It was a good challenge and this is how I solved it.

Steps :
1. The treeModel is based on a managed bean. You cannot have the tree based on ADF-BC bindings. Simply because you need to override setSortCriteria().
2. Added a few Comparators required for sorting of the columns.

Assumptions :
1. Code is in Java 8, using one of the lamda methods of Collections.

Lets get into the implementation details

1. Tree is based on a simple POJO. 

public class UCMContent {    
    // tree hierarchy in the list of child
    private List<UCMContent> children = new ArrayList<>();    
    // attribute I need to explain for sorting
    protected String name;
    protected String creator;
    protected String lastModified;   
    // other attributes...
   
2.  Custom TreeModel class extends org.apache.myfaces.trinidad.model.ChildPropertyTreeModel. This one has the custom implementation of setSortCriteria(). 
FYI : I am handling the decending sorting is little bit differently, ideally you can do a "Collections.reverse()", but in my case I wanted to do it this way. And it is much better than doing the reverse of the list, save me time and increase the performance.

public class Dossierboom extends ChildPropertyTreeModel {    
    public Dossierboom() {
        super();
    }    
    public Dossierboom(List<UCMContent> instance, String childProperty) {        
        super(instance, childProperty);        
        if(!instance.isEmpty()) {
            setRootNodeTitle(instance.get(0).getName());
        }
    }
    @Override
    public void setSortCriteria(List<SortCriterion> list) {
        super.setSortCriteria(list);
        if(list != null || !list.isEmpty()) {
            SortCriterion sortCriterion= list.get(0);
            sortTreeModel((List<UCMContent>)getWrappedData(), getComparator(sortCriterion));
        }
    }    
    private DossierboomComparator getComparator(SortCriterion sortCriterion) {
        DossierboomComparator comparator = null;
        if(sortCriterion.getProperty().equals("did")) {
            comparator = new DIdComparator();
        } else {
            if(sortCriterion.getProperty().equals("creator")) {
                comparator = new CreatorComparator();
            } else {
                comparator = new LastModifiedDateComparator();
            }
        }        
        comparator.setAscending(sortCriterion.isAscending());
        return comparator;
    }    
    private void sortTreeModel(List<UCMContent> treeModel, DossierboomComparator comparator) {
        if(!treeModel.isEmpty()) {
            Collections.sort(treeModel, comparator);
            treeModel.forEach(treeNode -> sortTreeModel(treeNode.getChildren(), comparator));
        }
    }
}

3. Comparators : 
I have an Abstract Class "DossierboomComparator", which implements java.util.Comparator and all other custom comparators evnetually extends this abstract class.

public abstract class DossierboomComparator<T> implements Comparator<UCMContent> {    
    private boolean ascending;    
    public DossierboomComparator() {
        super();
    }
    public void setAscending(boolean ascending) {
        this.ascending = ascending;
    }
    public boolean isAscending() {
        return ascending;
    }
}   

4. Custom comparators. 
All of them are quite similar, so I will just put one of them as an example. 

public class CreatorComparator extends DossierboomComparator<UCMContent> {
public CreatorComparator() {
super();
}
@Override
public int compare(UCMContent ucmContent1, UCMContent ucmContent2) {
int compare = 0;
if(isEmptyOrNull(ucmContent1.getCreator()) && !isEmptyOrNull(ucmContent2.getCreator())) {
compare = -1;
} else {
if(isEmptyOrNull(ucmContent2.getCreator())) {
compare = 1;
} else {
compare = ucmContent1.getCreator().compareTo(ucmContent2.getCreator());
}
}            
if(!isAscending()) {
compare = compare * -1;
}
return compare;
}

5. Why not doing Collections.reverse(). 

Normally the above compare() returns a value which is suitable for Ascending sort. And while doing a descending I needed to reverse the list after sorting or add another comparator for Descending sort. But instead I reverse the result based on the abstract class property.
It is easier and save me time and also increases the performance.

6. Populate the treeModel in managed bean :
So I have a pageFlow scope TreeBean, which takes care of populating the tree.
FYI : You need to implement your own version of "getTreeData()". Either from DB or Webservice.

    public Dossierboom getTreeModel() {
        if (this.treeModel == null) {
            List<UCMContent> treeData = getTreeData(); // this is the method you need to implement 
            this.treeModel = new Dossierboom(treeData , "children"); 
        }
        return treeModel;
    }

7. In the page, how the tree looks like 

<af:treeTable value="#{pageFlowScope.TreeBean.treeModel}" var="node" rowSelection="multiple" id="tt1" initiallyExpanded="true" fetchSize="-1" columnStretching="multiple" styleClass="AFStretchWidth" width="100%" summary="Dossierboom" expandAllEnabled="true">
<f:facet name="nodeStamp">
<af:column id="c1" headerText="Naam" width="50%" rowHeader="unstyled">
<af:outputText value="#{node.name}" id="ot1"/>  
</af:column>
</f:facet>
<f:facet name="pathStamp">
<af:outputText value="#{node}" id="ot2"/>
</f:facet>                       
<af:column id="c4" headerText="Doc. nr" width="5%" sortable="true"  sortProperty="did">
<af:outputText value="#{node.did}" id="ot5"/>
</af:column>
<af:column id="c5" headerText="Auteur" width="10%" sortable="true" sortProperty="#creator">
<af:outputText value="#{node.creator}" id="ot6"/>
</af:column>
<af:column id="c6" headerText="Laatst bewerkt" width="10%" sortable="true" sortProperty="lastModified">
<af:outputText value="#{node.lastModified}" id="ot7"/>
</af:column>
<f:facet name="contextMenu"></f:facet>
</af:treeTable>


And this works like a charm :)

Happy coding. 

x

Comments

  1. hi i have table inside column i am using <f:facet header="name" because of this i am getting error in export excel is "Export is incomplete due to error" Please give me suggestion i am getting this error in jdeveloper 12c.

    ReplyDelete

Post a Comment

Popular posts from this blog

Secure your Node/Express REST APIs using Passport JS

Recently I have been involved in various discussions on how to make the REST APIs as secure as SOAP.
First of all, let me start with a very basic statement, about security, it doesn't depend on your Webservice type, be it REST or SOAP, your design decisions depicts whether they can be made secure or not.
In this example blog, I will use "Micro CRUD services for Oracle Database Cloud" APIs and implement (read attach) Passport's "local" authentication strategy, to make them secure.

Code in Github : LeasifyAPIs with Passport

What is Passport JS? (from Documentation)

Passport is authentication middleware for Node. It is designed to serve a singular purpose: authenticate requests. When writing modules, encapsulation is a virtue, so Passport delegates all other functionality to the application. This separation of concerns keeps code clean and maintainable, and makes Passport extremely easy to integrate into an application.

What are "strategies" in P…

ADF Utility : Find UIComponent from Managed Bean

Many a times, it is required to find an UIComponent from ADF managed bean, to do something with it, for example : change the value of an af:outputText, change readOnly property of an af:inputText etc.

private UIComponent getUIComponent(String id) { 

        FacesContext facesCtx = FacesContext.getCurrentInstance(); 
        return findComponent(facesCtx.getViewRoot(), id);
    } 

    private UIComponent findComponent(UIComponent base, String id) {

        if (id.equals(base.getId())) {
            return base;
        }

        UIComponent children = null;
        UIComponent result = null;
        Iterator childrens = base.getFacetsAndChildren();
        while (childrens.hasNext() && (result == null)) {
            children = (UIComponent)childrens.next();
            if (id.equals(children.getId())) {
                result = children;
                break;
            }
            result = findComponent(children, id);
            if (result != null) {
                break;
            }
  …

Chatbots and Oracle Cloud Services

Thanks to Oracle A-Team, I had a chance to work with Chatbots.
3 pure NodeJS applications, on couple of Oracle Cloud platforms and Facebook messenger, and my chatbot was running.

Let me explain, the architecture a bit. To start with, following is the simple representation of how it works.