Goal
Add Asset Count column to List view and Card view to show the shallow count of assets in a folder
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.util, dependencies - 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));