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


12 comments:

  1. The codes you have shared in this post is very helpful. Many are not aware about this codes. Reading has many benefits. By reading we can improve our knowledge, language and also it’s a great way to reduce stress. The quality of articles starts from its topic. Selecting a good topic will help the writers to grab the reader’s attention. I have read many good posts from best essay writing service. Keep sharing good posts on different topics. Thank you for sharing this with us.

    ReplyDelete
  2. This is the amazing article. I' ll definitly will use it, and i want to thank you. But if you need the best writting service in the UK, you should Try this best essay UK service.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Recently I've used this service: http://payforessay.net/
    and was very excited by the output result!

    ReplyDelete
  5. Recently I've used this service: http://payforessay.net/
    and was very excited by the output result!

    ReplyDelete
  6. Our prices are very competitive and covered by our full satisfaction money-back guarantee should you not be happy with the help provided. Our company recommends you this website. Click here www.rephrase.org/reword-my-essay-online/ and know more!

    ReplyDelete
  7. Thank you for sharing this information. I am a professional writer at https://samedayessays.net/ and I recently had a coding task, so your blog truly helped me a lot!

    ReplyDelete
  8. Thank you for this information, I think it will be useful for me in the future. Who can do my assignment for me ?

    ReplyDelete
  9. You can rely on us for amazing thesis papers.
    Our writers can handle a wide range of diverse topics. Just give us your task. We are available for help 24/7.
    https://grademiners.com/personal-statement

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. Of course, casinos heart bingo uk are companies, and a successful company must make money in order to survive in the long run. Therefore, they began to defend themselves against the bonus hunters and created a system of complex bonus conditions. It is absolutely okay because it is legal, but sometimes it can be very difficult for a novice player to figure it out.

    ReplyDelete
  12. To seek the best Life Science Writing Services for those studying biology coursework writing services, it is important to hire an award winning science paper writing service company.

    ReplyDelete