AEM 62 - TouchUI Assets Console show node name instead of dc: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

For AEM 62 Path Browser check this post

For AEM 61 check this post

Demo | Package Install


Column View

Card View

List View

Solution

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

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-assets-show-filenames/clientlib, set a property categories of String type to dam.gui.actions.coral and dependencies of type String[] to underscore

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

                         show-file-name.js

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

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

    var FOUNDATION_MODE_CHANGE = "foundation-mode-change",
        EVENT_COLUMNVIEW_LOAD_ITEMS = "coral-columnview:loaditems",
        FOUNDATION_COLLECTION_ID = "foundation-collection-id",
        FOUNDATION_COLLECTION_ITEM_ID = "foundation-collection-item-id",
        DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages",
        META_TYPE = "data-foundation-collection-meta-type",
        FOUNDATION_COLLECTION_ITEM = ".foundation-collection-item",
        COLUMN_VIEW = "coral-columnview",
        LAYOUT_COL_VIEW = "column",
        LAYOUT_LIST_VIEW = "list",
        LAYOUT_CARD_VIEW = "card";

    $document.on(FOUNDATION_MODE_CHANGE, modeChangeHandler);

    function modeChangeHandler(){
        var folderPath = $(DAM_ADMIN_CHILD_PAGES).data(FOUNDATION_COLLECTION_ID);

        if(_.isEmpty(folderPath)){
            return;
        }

        if(isColumnView()){
            handleColumnView();
        }else if(isCardView()){
            handleCardView();
        }else if(isListView()){
            handleListView();
        }
    }

    function handleColumnView(){
        var $columnView = $(COLUMN_VIEW);

        $columnView.on(EVENT_COLUMNVIEW_LOAD_ITEMS, function(){
            $(FOUNDATION_COLLECTION_ITEM).each(handler);
        });

        function handler(index, item){
            var $item = $(item);

            if($item.data("item-type") !== "asset"){
                return;
            }

            var assetPath = $item.data(FOUNDATION_COLLECTION_ITEM_ID),
                $title = $item.find("coral-columnview-item-content");

            $title.html(getStringAfterLastSlash(assetPath));
        }
    }

    function handleCardView(){
        $(FOUNDATION_COLLECTION_ITEM).each(handler);

        function handler(index, item){
            var $item = $(item);

            if($item.find("[" + META_TYPE + "]").attr(META_TYPE) !== "asset"){
                return;
            }

            var assetPath = $item.data(FOUNDATION_COLLECTION_ITEM_ID),
                $cardTitle =$item.find("coral-card-content > coral-card-title");

            $cardTitle.html(getStringAfterLastSlash(assetPath));
        }
    }

    function handleListView(){
        $(FOUNDATION_COLLECTION_ITEM).each(handler);

        function handler(index, item){
            var $item = $(item);

            if($item.data("item-type") !== "asset"){
                return;
            }

            var assetPath = $item.data(FOUNDATION_COLLECTION_ITEM_ID),
                $title = $item.find(".foundation-collection-item-title");

            $title.html(getStringAfterLastSlash(assetPath));
        }
    }

    function isColumnView(){
        return ( getAssetsConsoleLayout() === LAYOUT_COL_VIEW );
    }

    function isListView(){
        return ( getAssetsConsoleLayout() === LAYOUT_LIST_VIEW );
    }

    function isCardView(){
        return (getAssetsConsoleLayout() === LAYOUT_CARD_VIEW);
    }

    function getAssetsConsoleLayout(){
        var $childPage = $(DAM_ADMIN_CHILD_PAGES),
            foundationLayout = $childPage.data("foundation-layout");

        if(_.isEmpty(foundationLayout)){
            return "";
        }

        return foundationLayout.layoutId;
    }

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

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