AEM 6410 - Touch UI show Public / Private Label for Collections

Goal


Show Public or Private labels for Collections in Card View

Demo | Package Install | Github


Product



Extension



Solution


1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-show-public-private-label

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-show-public-private-label/clientlib and set property categories of String[] type to cq.gui.damadmin.collection.coral and dependencies String[] to lodash

3) Create file ( type nt:file ) /apps/eaem-touchui-show-public-private-label/clientlib/js.txt, add the following

  public-private-label.js

4) Create file (type nt:file) /apps/eaem-touchui-show-public-private-label/clientlib/public-private-label.js, add the following code

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

    var PUBLIC_COLLECTION_ROOT = "/content/dam/collections/public",
        PRIVATE_COLLECITON = "Private Collection",
        PUBLIC_COLLECITON = "Public Collection";

    $document.on("foundation-contentloaded", function(event){
        _.defer(function(){
            showLabel();
        });
    });

    function showLabel(){
        var $items = $("coral-masonry-item"), $item, itemId, text;

        $items.each(function(){
            $item = $(this);

            itemId = $item.data("graniteCollectionItemId");

            if(itemId.indexOf(PUBLIC_COLLECTION_ROOT) == 0){
                text = PUBLIC_COLLECITON;
            }else{
                text = PRIVATE_COLLECITON;
            }

            $item.find("coral-card-context").html(text);
        });
    }
})(jQuery, jQuery(document));

No comments:

Post a Comment