AEM 61 - TouchUI Assets Console show node name instead of dc:title or jcr:title

Goal

In all 3 views (card, list, column) of Touch UI Assets Console, show the node name (filename) and NOT dc:title for assets or jcr:title for folders

For AEM 62 check this post

Demo | Package Install


Product

Extension

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-assets-show-filenames

2) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-assets-show-filenames/clientlib, set a property categories of String type to granite.ui.foundation.admin and dependencies of type String[] to underscore

3) Create file ( type nt:file ) /apps/touchui-assets-show-filenames/clientlib/js.txt, add the following

                         show-file-name.js

4) Create file ( type nt:file ) /apps/touchui-assets-show-filenames/clientlib/show-file-name.js, add the following code

(function ($, $document) {
    "use strict";

    var DAM_ADMIN_CHILD_PAGES = "cq-damadmin-admin-childpages",
        LOAD_EVENT = "coral-columnview-load",
        FOUNDATION_LAYOUT_CARD = ".foundation-layout-card",
        NS_COLUMNS = ".foundation-layout-columns";

    $document.on("foundation-mode-change", function(e, mode, group){
        //not assets console, return
        if(group != DAM_ADMIN_CHILD_PAGES){
            return;
        }

        showFileName();

        var $collection = $(".foundation-collection[data-foundation-mode-group=" + group + "]");

        //for column view
        $collection.on(LOAD_EVENT, function(){
            setTimeout( showFileName ,200);
        });

        //for column view select
        $collection.on("coral-columnview-item-select" + NS_COLUMNS, showFileName);

        if (!$collection.is(FOUNDATION_LAYOUT_CARD)) {
            return;
        }

        var $scrollContainer = $collection.parent();

        //for card view scroll
        $scrollContainer.on("scroll" + FOUNDATION_LAYOUT_CARD, _.throttle(function(){
            var paging = $collection.data("foundation-layout-card.internal.paging");

            if(!paging.isLoading){
                return;
            }

            var INTERVAL = setInterval(function(){
                if(paging.isLoading){
                    return;
                }

                clearInterval(INTERVAL);

                showFileName();
            }, 250);
        }, 100));
    });

    function showFileName(){
        var $articles = $("article"), $article, name;

        $articles.each(function(index, article){
            $article = $(article);

            name = getStringAfterLastSlash($article.data("path"));

            $article.find("h4").html(name);
            $article.find(".coral-ColumnView-label").html(name);
        });
    }

    function getStringAfterLastSlash(str){
        if(!str || (str.indexOf("/") == -1)){
            return "";
        }

        return str.substr(str.lastIndexOf("/") + 1);
    }
})(jQuery, jQuery(document));