AEM CQ 56 - Open Content Finder Images in New Tab

Goal

The CQ product Content Finder (http://localhost:4502/cf#/content/geometrixx/en.html) images results view has no action associated for image click. This post is about opening the image asset editor in new browser tab, when author double clicks on the image. Demo available for download

Solution - 1

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

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

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

                         imageinnewtab.js

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

CQ.Ext.ns("MyClientLib");

MyClientLib.ContentFinder = {
    TAB_IMAGES: "cfTab-Images",

    openImageInNewTab: function(){
        var tab = CQ.Ext.getCmp(this.TAB_IMAGES);

        if(!tab){
            return;
        }

        var resultsView = tab.findByType("dataview");
        resultsView = resultsView[0];

        resultsView.on('dblclick', function(dView, index, node, eObj){
            var sData = this.store.getAt(index);
            window.open("/damadmin#" + sData.id);
        });
    }
};

(function(){
    if( window.location.pathname == "/cf" ){
        var INTERVAL = setInterval(function(){
            var tabPanel = CQ.Ext.getCmp(CQ.wcm.ContentFinder.TABPANEL_ID);

            if(tabPanel && (tabPanel.rendered == true)){
                clearInterval(INTERVAL);
                var c = MyClientLib.ContentFinder;
                c.openImageInNewTab();
            }
        }, 250);
    }
})();

Solution - 2

Not preferred, as it results in not minifying of /libs/cq/ui/widgets/source/widgets/wcm/ContentFinder.js

1) Login to CRXDE Lite (http://localhost:4502/crx/de) and overlay the file /libs/cq/ui/widgets/source/widgets/wcm/ContentFinder.js. To overlay, create file /apps/cq/ui/widgets/source/widgets/wcm/ContentFinder.js and add the following code

CQ.Ext.ns("MyClientLib");

MyClientLib.ContentFinder = {
    TAB_IMAGES: "cfTab-Images",

    openImageInNewTab: function(){
        var tab = CQ.Ext.getCmp(this.TAB_IMAGES);

        if(!tab){
            return;
        }

        var resultsView = tab.findByType("dataview");
        resultsView = resultsView[0];

        resultsView.on('dblclick', function(dView, index, node, eObj){
            var sData = this.store.getAt(index);
            window.open("/damadmin#" + sData.id);
        });
    }
};

CQ.shared.HTTP.get("/libs/cq/ui/widgets/source/widgets/wcm/ContentFinder.js");

(function(){
    if( window.location.pathname == "/cf" ){
        var INTERVAL = setInterval(function(){
            var tabPanel = CQ.Ext.getCmp(CQ.wcm.ContentFinder.TABPANEL_ID);

            if(tabPanel && (tabPanel.rendered == true)){
                clearInterval(INTERVAL);
                var c = MyClientLib.ContentFinder;
                c.openImageInNewTab();
            }
        }, 250);
    }
})();

2) Line 23, we are loading the ootb ContentFinder and using JS function openImageInNewTab(), associating double click action to images