AEM CQ 56 - Hide Tabs in Content Finder

Goal

CQ 56 has many content finder tabs to find content, images that can be drag and dropped onto pages while authoring. If there is a necessity to hide unused tabs this post could be useful.

Prerequisites

If you are new to CQ

1) Read this post on how to create a sample page component

2) Read this post on how to setup your IDE and create an OSGI component

Solution - 1

1) Login to CRXDE Lite, create folder (nt:folder) /apps/hidecftabs

2) Create clientlib (type cq:ClientLibraryFolder) /apps/hidecftabs/clientlib and set a property categories of String type to cq.widgets

3) Create file ( type nt:file ) /apps/hidecftabs/clientlib/js.txt, add the following

                         hidecftabs.js

4) Create file ( type nt:file ) /apps/hidecftabs/clientlib/hidecftabs.js, add the following code

CQ.Ext.ns("MyComponents");
 
MyComponents.ContentFinder = {
    TAB_S7_BROWSE : "cfTab-S7Browse",
    TAB_MOVIES : "cfTab-Movies",
    TAB_PARAGRAPHS : "cfTab-Paragraphs",
    TAB_PARTICIPANTS : "cfTab-Participants",
    TAB_PRODUCTS : "cfTab-Products",
    TAB_MANUSCRIPTS : "cfTab-Manuscripts",
    TAB_IMAGES: "cfTab-Images",
    TAB_BROWSE: "cfTab-Browse",
    TAB_DOCUMENTS: "cfTab-Documents",
 
    hideTabs: function(){
        var tabPanel = CQ.Ext.getCmp(CQ.wcm.ContentFinder.TABPANEL_ID);
        var c = MyComponents.ContentFinder;
 
        var tabs = [ c.TAB_S7_BROWSE,c.TAB_MOVIES,c.TAB_PARAGRAPHS, c.TAB_BROWSE, c.TAB_DOCUMENTS,
                        c.TAB_PARTICIPANTS,c.TAB_PRODUCTS,c.TAB_MANUSCRIPTS, c.TAB_IMAGES];
 
        CQ.Ext.each(tabs, function(t){
            var tab = CQ.Ext.getCmp(t);
 
            if(tab){
                tabPanel.hideTabStripItem(tab);
            }
        });
    }
};
 
(function(){
    var INTERVAL = setInterval(function(){
        var c = MyComponents.ContentFinder;
        var tabPanel = CQ.Ext.getCmp(CQ.wcm.ContentFinder.TABPANEL_ID);

        if(tabPanel){
            clearInterval(INTERVAL);
            c.hideTabs();
        }
    }, 250);
})();

Solution - 2

Not preferred as it doesnt minify /libs/cq/ui/widgets/source/widgets/wcm/ContentFinder.js

1) Use the overlay architecture of CQ to extend content finder. For this access CRXDE Lite (http://localhost:4502/crx/de) and create file /apps/cq/ui/widgets/source/widgets/wcm/ContentFinder.js. We overlay the ootb content finder js available in path /libs/cq/ui/widgets/source/widgets/wcm/ContentFinder.js by creating a similar path in /apps. In the overlay, we execute ootb content finder js and later hide all tabs except page tab

CQ.Ext.ns("MyComponents");

MyComponents.ContentFinder = {
    TAB_S7_BROWSE : "cfTab-S7Browse",
    TAB_MOVIES : "cfTab-Movies",
    TAB_PARAGRAPHS : "cfTab-Paragraphs",
    TAB_PARTICIPANTS : "cfTab-Participants",
    TAB_PRODUCTS : "cfTab-Products",
    TAB_MANUSCRIPTS : "cfTab-Manuscripts",
    TAB_IMAGES: "cfTab-Images",
    TAB_BROWSE: "cfTab-Browse",
    TAB_DOCUMENTS: "cfTab-Documents",

    hideTabs: function(){
        var tabPanel = CQ.Ext.getCmp(CQ.wcm.ContentFinder.TABPANEL_ID);
        var c = MyComponents.ContentFinder;

        var tabs = [ c.TAB_S7_BROWSE,c.TAB_MOVIES,c.TAB_PARAGRAPHS, c.TAB_BROWSE, c.TAB_DOCUMENTS,
                        c.TAB_PARTICIPANTS,c.TAB_PRODUCTS,c.TAB_MANUSCRIPTS, c.TAB_IMAGES];

        CQ.Ext.each(tabs, function(t){
            var tab = CQ.Ext.getCmp(t);

            if(tab){
                tabPanel.hideTabStripItem(tab);
            }
        });
    }
};

$.getScript("/libs/cq/ui/widgets/source/widgets/wcm/ContentFinder.js", function(){
    var INTERVAL = setInterval(function(){
        var c = MyComponents.ContentFinder;
        var tabPanel = CQ.Ext.getCmp(CQ.wcm.ContentFinder.TABPANEL_ID);

        if(tabPanel){
            clearInterval(INTERVAL);
            c.hideTabs();
        }
    }, 250);
});