AEM CQ 56 - Change Tabs Order In Content Finder

Goal

Change the order of tabs in Content Finder. Here we reverse the tabs order, not particularly useful, but it shows how you can change the order in case you need to

From the Product

Extended to Reverse

References

1) To extend page tab and add additional filters check this post

2)  For hiding unused tabs in content finder check this post

3) For showing additional image metadata in content finder, check this post

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and create folder /apps/reversecftabs

2) Create node /apps/reversecftabs/clientlib of type cq:ClientLibraryFolder and add a String property categories with value cq.widgets

3) Create file (nt:file) /apps/reversecftabs/clientlib/js.txt and add

                       reversetabs.js

4) Create file (nt:file) /apps/reversecftabs/clientlib/reversetabs.js and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.ContentFinder = CQ.Ext.extend(CQ.wcm.ContentFinder, {
    getVisibleTabs: function(path) {
        var tabs = MyClientLib.ContentFinder.superclass.getVisibleTabs.call(this, path);

        //order is based on ranking, so change them
        $.each(tabs, function(index, tab){
            tab.ranking = tabs.length - index;
        });

        return tabs;
    }
});

CQ.Ext.reg("contentfinder", MyClientLib.ContentFinder);