AEM 61 - Touch UI Add New Column to Assets Console List View

Goal

Add a New Column to List View of Assets Console - http://localhost:4502/assets.html/content/dam

Here we add two columns, the following are available in Experience AEM section of Configure Columns flyout menu

                   Folder Assets Count - Count of DAM Assets in the folder (for deep nested count, use /bin/querybuilder.json )
                   Created By - The folder creator id

For adding columns to list view of AEM 6 SP2 check this post, for Classic UI check this post

For 62 Touch UI check this post

Demo | Package Install

Solution

1) Overlay /libs/dam/gui/content/commons/listview/assetsavailablecolumns to /apps/dam/gui/content/commons/listview/assetsavailablecolumns to add the necessary columns. Sling Resource Merger takes care of merging the columns in /apps... with the ones in /libs... while rendering. Use a utility servlet to create the overlay, check this post; After installing servlet package access the servlet with path to overlay - http://localhost:4502/bin/experience-aem/create/overlay?path=/libs/dam/gui/content/commons/listview/assetsavailablecolumns/type and rename the overlayed type column to assetsCount and change necessary properties

2) The new columns assetsCount, createdBy in /apps/dam/gui/content/commons/listview/assetsavailablecolumns

3) XML representation of columns added - /apps/dam/gui/content/commons/listview/assetsavailablecolumns

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured">
    <assetsavailablecolumns jcr:primaryType="nt:unstructured">
        <assetsCount
            jcr:primaryType="nt:unstructured"
            sling:resourceType="cq/gui/components/siteadmin/admin/pages/headers/deflt"
            class="assetsCount"
            columnGroup="Experience AEM"
            default="{Boolean}true"
            ignorecase="{Boolean}true"
            show-selector=".label .assetsCount"
            sort-selector=".label .assetsCount"
            sort-type="numeric"
            title="Folder Assets Count"/>
        <createdBy
            jcr:primaryType="nt:unstructured"
            sling:resourceType="cq/gui/components/siteadmin/admin/pages/headers/deflt"
            class="createdBy"
            columnGroup="Experience AEM"
            default="{Boolean}true"
            ignorecase="{Boolean}true"
            show-selector=".label .createdBy"
            sort-selector=".label .createdBy"
            title="Created By"/>
    </assetsavailablecolumns>
</jcr:root>

4) The above steps add static columns to list view; in the next steps we add some dynamic behavior to columns like count of assets in each folder

5) Login to CRXDE Lite, create folder (nt:folder) /apps/touchui-assets-add-column

6) Create clientlib (type cq:ClientLibraryFolder) /apps/touchui-assets-add-column/clientlib and set a property categories of String type to cq.gui.damadmin.admin, dependencies of type String[] with value underscore

7) Create file ( type nt:file ) /apps/touchui-assets-add-column/clientlib/css.txt, add the following

                         asset-count.less

8) Create file ( type nt:file ) /apps/touchui-assets-add-column/clientlib/asset-count.less, add the following code. If there is a better way with little code, to generate the .list-columns-xx.list css, please leave a comment; List view shows ten columns max..

.list-columns-1.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy  {
      width: 48%;
      float: left;
    }
  }
}

.list-columns-2.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 31%;
      float: left;
    }
  }
}

.list-columns-3.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 21%;
      float: left;
    }
  }
}

.list-columns-4.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 16%;
      float: left;
    }
  }
}

.list-columns-5.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 13%;
      float: left;
    }
  }
}

.list-columns-6.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 11.5%;
      float: left;
    }
  }
}

.list-columns-7.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 10%;
      float: left;
    }
  }
}

.list-columns-8.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 9.5%;
      float: left;
    }
  }
}

.list-columns-9.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 9%;
      float: left;
    }
  }
}

.list-columns-10.list {
  .card-asset, .card-directory, .card-collection {
    .assetsCount, .createdBy {
      width: 8.5%;
      float: left;
    }
  }
}

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

                         asset-count.js

10) Create file ( type nt:file ) /apps/touchui-assets-add-column/clientlib/asset-count.js, add the following code

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

    var FOUNDATION_LAYOUT_LIST = ".foundation-layout-list",
        DAM_ADMIN_CHILD_PAGES = "cq-damadmin-admin-childpages",
        ATTR_DATA_FOUNDATION_COLLECTION_ID = "data-foundation-collection-id",
        ASSETS_COUNT_CLASS = "assetsCount",
        CREATED_BY_CLASS = "createdBy",
        OOTB_DEFAULT_CSS = "shared";

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

        //group is cq-damadmin-admin-childpages for assets
        var $collection = $(".foundation-collection[data-foundation-mode-group=" + group + "]");

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

        var $articles = $("article");

        //css class shared added in /libs/dam/gui/components/admin/childasset/childasset.jsp,
        //rename it to the first extension column css class - assetsCount for "Assets Count"
        $articles.find("." + OOTB_DEFAULT_CSS)
                    .removeClass(OOTB_DEFAULT_CSS)
                    .addClass(ASSETS_COUNT_CLASS);

        //add new dom for second extension column "Created By"
        $("<p/>").attr("class", CREATED_BY_CLASS).insertAfter($articles.find("." + ASSETS_COUNT_CLASS));

        var path = $("." + DAM_ADMIN_CHILD_PAGES).attr(ATTR_DATA_FOUNDATION_COLLECTION_ID);

        $.ajax(path + ".2.json").done(handler);

        function handler(data){
            var articleName, assets;

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

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

                //reject non assets nodes
                assets = _.reject(data[articleName], function(value, key){
                    return (key.indexOf("jcr:") == 0) || value["jcr:primaryType"] == "sling:OrderedFolder";
                });

                $article.find("." + CREATED_BY_CLASS).html(data[articleName]["jcr:createdBy"]);
                $article.find("." + ASSETS_COUNT_CLASS).html(Object.keys(assets).length);
            });
        }

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

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