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


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


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


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


//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)){

        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;
                }, this);
        }, this);


        this.tagNamespacesLoaded = true;

    setupPopupMenu: function() {;

        if(!this.eaemTagsBasePaths || $.isEmptyObject(this.eaemTagsBasePaths)){

        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 =;
                nsName = nsName.substring(nsName.lastIndexOf("/") + 1);

                path = this.tagNamespaces[nsName].path;

                treePanel.getLoader().path = path.substring(0, path.lastIndexOf("/"));
       = 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

1 comment:

  1. Hi Sreekanth, I'm using this custom widget in AEM 6.1 It works fine everywhere except in DAM asset editor. When I add/modify any tags in DAM asset editor and click on Save button, it saves the data/tags in metadata node. But when I close the editor tab, AEM prompts with "You have unsaved changes. Do you still want to close the tab?". Is this a known bug and do we have any fix for this? Any help would be really appreciated.