AEM 62 - Classic UI extend Pathfield browse dialog to show file name (nodename) NOT dc:title or jcr:title

Goal

Show the node name and NOT dc:title or jcr:title in Pathfield widget Browse Dialog

For Touch UI check this post

Demo | Package Install


Product

Extension

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/classicui-pathfield-show-nodename

2) Create clientlib (type cq:ClientLibraryFolder) /apps/classicui-pathfield-show-nodename/clientlib and set property categories of String type to cq.widgets and dependencies to underscore

3) Create file ( type nt:file ) /apps/classicui-pathfield-show-nodename/clientlib/js.txt, add the following

                         show-nodename.js

4) Create file ( type nt:file ) /apps/classicui-pathfield-show-nodename/clientlib/show-nodename.js, add the following code

(function(){
    var EAEM_PATH_FIELD = CQ.Ext.extend(CQ.form.PathField, {
        onTriggerClick: function() {
            EAEM_PATH_FIELD.superclass.onTriggerClick.call(this);

            this.browseDialog.treePanel.on('load', showNodeName);

            function showNodeName(node){
                _.each(node.childNodes, function(childNode){
                    //set the nodename replacing jcr:title (folders) or dc:title (assets)
                    childNode.setText(childNode.attributes.name);
                });
            }
        }
    });

    CQ.Ext.reg("pathfield", EAEM_PATH_FIELD);
}());