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>





2 comments:

  1. Hi Sreekanth,

    Thanks a lot for sharing these articles.

    I was trying this particular thing on my OOTB 5.6.1 instance. I installed the package you have provided here.

    As far as I understood, this package needs to be installed and when the "select path" window opens up , it should be sorted in ascending or descending order. But it doesn't seem to be working.

    Can you please let me know if whatever I am doing is correct. I come from a support background and am trying to learn.

    Your inputs on this will be really really helpful.

    ReplyDelete
  2. Hi Sreekanth,

    Any thoughts on the above will be really helpful.

    ReplyDelete