Quantcast
Channel: Experiencing Adobe Experience Manager (AEM, CQ)
Viewing all articles
Browse latest Browse all 525

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

$
0
0

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.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));





Viewing all articles
Browse latest Browse all 525

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>