AEM 6540 - Hide Tag Root Paths in Metadata Editor of AEM Assets

Goal

When the Tag paths are too deep and an asset is tagged with tens of tags the UI may look cluttered, so you may want to hide the root paths which are obvious and generally customer specific....

Demo | Package Install | Github


Product

Extension

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-hide-tag-root-paths

2) Create node /apps/eaem-hide-tag-root-paths/clientlib of type cq:ClientLibraryFolder, add String[] property categories with value [dam.gui.coral.metadataeditor], String[] property dependencies with value lodash.

3) Create file (nt:file) /apps/eaem-hide-tag-root-paths/clientlib/js.txt, add

                        hide-root-paths.js

4) Create file (nt:file) /apps/eaem-hide-tag-root-paths/clientlib/hide-root-paths.js, add the following code

(function($, $document) {
    var HIDE_TAGS_WITH_PREFIX = "we-retail",
        HIDE_LEVELS = 2;

    $document.on("foundation-contentloaded", hideRootPaths);

    function hideRootPaths(){
        var $autoCompletes = $("foundation-autocomplete");

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

        _.each($autoCompletes, function(autoComplete){
            if(autoComplete.eaemExtended){
                return;
            }

            extendDisplay(autoComplete);

            extendPicker(autoComplete);

            autoComplete.eaemExtended = true;
        });
    }

    function extendPicker(autoComplete){
        $(autoComplete).on("change", function(){
            extendDisplay(this);
        })
    }

    function extendDisplay(autoComplete){
        var $autoComplete = $(autoComplete),
            $tags = $autoComplete.find("coral-tag");

        _.each($tags, function(tag){
            var $tag = $(tag), tagDisplayValue,
                $tagLabel = $tag.find("coral-tag-label");

            if(!$tag.attr("value").trim().startsWith(HIDE_TAGS_WITH_PREFIX)){
                return;
            }

            tagDisplayValue = _.isEmpty($tagLabel) ? $tag.html() : $tagLabel.html();

            if(_.isEmpty($tagLabel)){
                $tag.html(cutLevels(tagDisplayValue));
            }else{
                $tagLabel.html(cutLevels(tagDisplayValue));
            }
        });
    }

    function cutLevels(tagValue){
        var tagRetValue = tagValue;

        for (var index = 0 ; index < HIDE_LEVELS; index++){
            if(index == 0){
                tagRetValue = tagRetValue.substring(tagRetValue.indexOf(":") + 1);
            }else if(tagRetValue.includes("/")){
                tagRetValue = tagRetValue.substring(tagRetValue.indexOf("/") + 1);
            }

            tagRetValue = tagRetValue.trim();
        }

        return tagRetValue;
    }
}(jQuery, jQuery(document)));