AEM 6 SP2 - Classic UI Tags Widget Show Sub Folders as Namespaces

Goal

Extend Tags Widget (CQ.tagging.TagInputField, xtype: tags) and register as xtype eaem-tags (ExperienceAEM.TagInputField) to show different tag subfolders as namespaces. The tagsBasePath config option of CQ.tagging.TagInputField allows user to configure a single tag subfolder path as base path (children of base path are shown as namespace tabs in widget). This extension allows a user to pick different subfolder paths as namespaces (widget tabs)

For TouchUI check this post

Demo modifies foundation page dialog for demonstration purposes; For better code quality never alter /libs/foundation/components. Code here is just a quick sample, make sure its thoroughly tested before adding in projects....

Demo | Package Install


Widget in Page Properties

Configuration in CRX

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/classic-ui-tags-base-path-folders

2) Create node /apps/classic-ui-tags-base-path-folders/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.tagging

3) Create file (nt:file) /apps/classic-ui-tags-base-path-folders/clientlib/js.txt and add

                       tags.js

4) Add the following code in /apps/classic-ui-tags-base-path-folders/clientlib/tags.js

CQ.Ext.ns("ExperienceAEM");

//extend CQ.tagging.TagInputField and register as eaem-tags
ExperienceAEM.TagInputField = CQ.Ext.extend(CQ.tagging.TagInputField, {
    //eaemTagsBasePaths: [ "/etc/tags/geometrixx-media", "/etc/tags/marketing/interest/business" ],
    eaemTagsBasePaths: null, // any namespace or subfolders of namespace passed as array

    //Iterates base paths and adds each path as namespace
    loadTagNamespaces: function() {
        this.tagNamespaces = {};

        if(!this.eaemTagsBasePaths || $.isEmptyObject(this.eaemTagsBasePaths)){
            ExperienceAEM.TagInputField.superclass.loadTagNamespaces.call(this);
            return;
        }

        CQ.Ext.each(this.eaemTagsBasePaths, function(tUrl) {
            var pUrl = tUrl.substring(0, tUrl.lastIndexOf("/"));

            //load each base path
            var tagJson = this.loadJson(pUrl + CQ.tagging.TAG_LIST_JSON_SUFFIX + "?count=false");

            if (tagJson && tagJson.tags) {
                CQ.Ext.each(tagJson.tags, function(t) {
                    if(t.path === tUrl){
                        this.tagNamespaces[t.name] = t;
                    }
                }, this);
            }
        }, this);

        this.setupPopupMenu();

        this.tagNamespacesLoaded = true;
    },

    setupPopupMenu: function() {
        ExperienceAEM.TagInputField.superclass.setupPopupMenu.call(this);

        if(!this.eaemTagsBasePaths || $.isEmptyObject(this.eaemTagsBasePaths)){
            return;
        }

        var panel, treePanel, path, nsName;

        //adjust the tree panel roots to load eaemTagsBasePaths data
        CQ.Ext.each(this.namespacesTabPanel, function(tabPanel) {
            for(var i = 0; i < tabPanel.items.length; i++){
                panel = tabPanel.items.get(i);
                treePanel = panel.items.get(0);

                nsName = treePanel.root.attributes.name;
                nsName = nsName.substring(nsName.lastIndexOf("/") + 1);

                path = this.tagNamespaces[nsName].path;

                treePanel.getLoader().path = path.substring(0, path.lastIndexOf("/"));
                treePanel.root.attributes.name = path.substring(1);
            }
        }, this);
    }
});

CQ.Ext.reg("eaem-tags", ExperienceAEM.TagInputField);

5) Make sure a String[] value is added for config option eaemTagsBasePaths. Each path is shown as panel in widget