AEM 63 - Touch UI Show Date in List View of Assets, Sites, OmniSearch Consoles

Goal

Show the date and time in List View of Assets, Sites, OmniSearch consoles

Demo | Package Install | Github


Assets

Sites

OmniSearch

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-touchui-list-view-show-date

2) Create node /apps/eaem-touchui-list-view-show-date/clientlib of type cq:ClientLibraryFolder, add String property categories with value granite.utils, String[] property dependencies with value underscore

3) Create file (nt:file) /apps/eaem-touchui-list-view-show-date/clientlib/js.txt, add

                        show-date.js

4) Create file (nt:file) /apps/eaem-touchui-list-view-show-date/clientlib/show-date.js, add the following code

(function ($, $document) {
    var FOUNDATION_CONTENT_LOADED = "foundation-contentloaded";

    $document.on(FOUNDATION_CONTENT_LOADED, showDate);

    function showDate(event){
        var $times = $("td > time"), $time, datetime;

        _.each($times, function(time){
            $time = $(time);

            datetime = $time.attr("datetime");

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

            $time.html((new Date(parseFloat(datetime))).toLocaleString());
        })
    }
})(jQuery, jQuery(document));