[AEM 6.0] How to change the titles to file names in Assets Touch UI

Disclaimer : Ideas/Implementions provided in this blog express my personal view. Adobe or Me will not be held responsible for damage caused on your system because of information. Please don't try any suggestion in production system without proper testing. This is not an Adobe supported blog

Problem:

In AEM 6.0 Assets (/assets) console, asset title is shown instead of file names. At times, user wants to see file names only, as copying the file will leave the asset title intact giving an impression that two files are same.

Solution:
Customize AEM Assets console to show file names always instead of asset titles

You can download the package here

1. Create "cq.gui.damadmin.admin" clientlibs in /apps/dam/clientlibs
• Go to http://localhost:4502/crx/de/index.jsp
• Go to /apps/dam and create nt:folder with name 'clientlibs'
• Go to /apps/dam/clientlibs and create dam_customizations (cq:clientLibraryFolder)
• Add property 'categories' with String Multi (String []) and value as 'cq.gui.damadmin.admin'
• Create a folder js (nt:folder) inside /apps/dam/clientlibs/dam_customizations
• Create a file 'js.txt' (nt:file) inside /apps/dam/clientlibs/dam_customizations with the content as following:

#base=js
filenames.js
                   

• Create a file 'filenames.js' (nt:file) in the /apps/dam/clientlibs/dam_customizations/js with the following content

(function (document, $) {
    "use strict";
    var FILE_NAME_MAX_LENGTH = 30;
    var FILE_NAME_TAIL_LENGTH = 12;
    $(document).on("foundation-contentloaded", function(e){
        var assets = $(".foundation-collection-item");
        assets.each(function(i){
            var $this = $(this);
            var path = $this.data("path");
            var fileName = path.substr(path.lastIndexOf('/')+1);
            if (fileName.length > FILE_NAME_MAX_LENGTH) {
               fileName = fileName.substr(0,FILE_NAME_MAX_LENGTH-FILE_NAME_TAIL_LENGTH-"...".length)+"..."+fileName.substr(fileName.length-FILE_NAME_TAIL_LENGTH);
            }
            //update h4 to use fileName instead of title
            $this.find("h4").text(fileName);
            //update column view title to use fileName instead of title
            $this.find(".foundation-collection-item-title").text(fileName);
        }); 
    });

})(document, Granite.$);

• The structure looks like the following:

How It Works:

1. Since we have named the clientlib ("cq.gui.damadmin.admin") same as AEM Assets product clientlibs, our clientlibs will also be loaded.
2. Since there is "foundation-contentloaded" event will be triggered from Granite foundation clientlibs when ever there is any content update, we are registering an event listener for that and hooking our code in there.