AEM 62 - Add Asset Count Column to List View, Show Asset Count in Card View

Goal


Add Asset Count column to List view and Card view to show the shallow count of assets in a folder

For showing total asset count and size check this post

For Classic UI check this post

For AEM 61 Touch UI check this post


Demo | Package Install


Configuration & Column Visibility





List View




Card View



Solution


1) To add the necessary columns (here eaemAssetsCount) overlay /libs/dam/gui/content/commons/availablecolumns and create /apps/dam/gui/content/commons/availablecolumns . Use a simple servlet like this to automatically create the overlay structure in /apps

2) Create nt:unstructured node /apps/dam/gui/content/commons/availablecolumns/eaemAssetsCount with the following properties

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured">
    <eaemAssetsCount
        jcr:primaryType="nt:unstructured"
        jcr:title="Assets Count"
        columnGroup="Experience AEM"
        default="{Boolean}false"
        sortable="{Boolean}true"
        sortType="number"/>
</jcr:root>

3) To add dynamic content (Asset count) to the column, create clientlib /apps/eaem-touchui-assets-folder-count/clientlib with JS logic and categories - dam.gui.admin.utildependencies - underscore executed on view load

4) Create nt:file /apps/eaem-touchui-assets-folder-count/clientlib/js.txt with the following content

                        asset-count.js

5) Create nt:file /apps/eaem-touchui-assets-folder-count/clientlib/asset-count.js, add the following code

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

    var firstLoad = true,
        COOKIE_AEM_ASSETS_LIST_VIEW_COLUMNS = "aem.assets.listview.columns",
        EAEM_ASSETS_COUNT = "eaemAssetsCount",
        LAYOUT_COL_VIEW = "column",
        LAYOUT_LIST_VIEW = "list",
        LAYOUT_CARD_VIEW = "card",
        DIRECTORY = "directory",
        FOUNDATION_CONTENT_LOADED = "foundation-contentloaded",
        SEL_DAM_ADMIN_CHILD_PAGES = ".cq-damadmin-admin-childpages",
        LIST_CELL_HTML =    '<td is="coral-td" class="coral-Table-cell coral-Table-cell--left" alignment="column">' +
                                '<coral-td-label class="coral-Table-cellLabel">ASSET_COUNT</coral-td-label>' +
                            '</td>';

    $document.on(FOUNDATION_CONTENT_LOADED, SEL_DAM_ADMIN_CHILD_PAGES, addAssetCount);

    $document.on("cui-contentloaded", function (e) {
        if(!firstLoad){
            return;
        }

        var $childPages = $(e.currentTarget).find(SEL_DAM_ADMIN_CHILD_PAGES);

        if(_.isEmpty($childPages)){
            return;
        }

        firstLoad = false;

        $childPages.trigger(FOUNDATION_CONTENT_LOADED);
    });

    function isFolderCountEnabled(){
        var cookies = document.cookie.split(";"), tokens, isEnabled = false;

        _.each(cookies, function(cookie){
            tokens = cookie.split("=");

            if(tokens[0].trim() !== COOKIE_AEM_ASSETS_LIST_VIEW_COLUMNS){
                return;
            }

            isEnabled = tokens[1].trim().indexOf(EAEM_ASSETS_COUNT) > 0;
        });

        return isEnabled;
    }

    function addAssetCount(e) {
        if(!e.currentTarget || !isFolderCountEnabled()){
            return;
        }

        var $currentTarget = $(e.currentTarget),
            foundationLayout = $currentTarget.data("foundation-layout");

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

        var layoutId = foundationLayout.layoutId;

        if(layoutId == LAYOUT_COL_VIEW){
            return;
        }

        var path = $currentTarget.data("foundation-collection-id");

        $.ajax(path + ".2.json").done(function(data){
            $(".foundation-collection-item").each(function(index, item){
                itemHandler(data, layoutId, $(item) );
            });
        });

        function itemHandler(data, layoutId, $item){
            var itemPath = $item.data("foundation-collection-item-id"),
                itemName = getStringAfterLastSlash(itemPath), count, isFolder;

            //reject non assets nodes
            var assets = _.reject(data[itemName], function(value){
                return value["jcr:primaryType"] !== "dam:Asset";
            });

            count = Object.keys(assets).length;

            if(layoutId == LAYOUT_LIST_VIEW){
                isFolder = $item.data("item-type") == DIRECTORY;

                if(!isFolder){
                    return;
                }

                $item.append(LIST_CELL_HTML.replace("ASSET_COUNT", count));
            }else if(layoutId == LAYOUT_CARD_VIEW){
                var $itemMeta = $item.find(".foundation-collection-assets-meta"), $cardTitle;

                isFolder = $itemMeta.data("foundation-collection-meta-type") == DIRECTORY;

                if(!isFolder){
                    return;
                }

                $cardTitle =$item.find("coral-card-content > coral-card-title");
                $cardTitle.html($cardTitle.html() + " - Assets: " + count);
            }
        }

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

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




2 comments:

  1. You should not listen to cui-contentloaded. Code should rely on foundation-contentloaded instead.

    ReplyDelete

  2. Its really an Excellent post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog. Thanks for sharing....

    Carwash in omr
    usedcars in omr
    automotors in omr
    car accessories in omr
    secondhand car in omr

    ReplyDelete