AEM CQ 56 - Sort Tree Nodes of Browse Dialog in pathfield

Goal

Sort browse dialog tree nodes of pathfield (CQ.form.PathField) on dialog open.

Package install (contains a sample component using sortable pathfield)


Browse dialog of Product

Browse dialog tree nodes in descending order

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/sort-pathfield-tree

2) Create node /apps/sort-pathfield-tree/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets

3) Create file (nt:file) /apps/sort-pathfield-tree/clientlib/js.txt and add

                       sort-tree-nodes.js

4) Create file (nt:file) /apps/sort-pathfield-tree/clientlib/sort-tree-nodes.js and add the following code

CQ.Ext.ns("ExperienceAEM");

//asc=true for ascending order and asc=false for descending order
ExperienceAEM.sortTags =  function(pathfield, asc){
    pathfield.browseDialog.treePanel.on('load', function(node){
        node.childNodes.sort(function(a,b){
            a = a["text"].toLowerCase();
            b = b["text"].toLowerCase();
            return asc ? ( a > b ? 1 : (a < b ? -1 : 0) ) : ( a > b ? -1 : (a < b ? 1 : 0) ) ;
        });
    })
};

5) Here is a sample component dialog using sort on pathfield

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    helpPath="en/cq/current/wcm/default_components.html#Text"
    title="Text"
    xtype="tabpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <tab1
            jcr:primaryType="cq:Widget"
            anchor="100%"
            title="Text"
            xtype="panel">
            <items jcr:primaryType="cq:WidgetCollection">
                <path
                    jcr:primaryType="cq:Widget"
                    fieldLabel="Select path"
                    name="./path"
                    xtype="pathfield">
                    <listeners
                        jcr:primaryType="nt:unstructured"
                        dialogopen="function(){ExperienceAEM.sortTags(this, false);} "/>
                </path>
            </items>
        </tab1>
    </items>
</jcr:root>