AEM CQ 56 - Add New Page button to SiteAdmin Search Panel Grid

Goal

In this post we are going to add a button (New page) to the search panel grid of siteadmin console (http://localhost:4502/siteadmin). Generally for creating a new page you visit the Websites tab of siteadmin console, select a node in left tree and click New Page in right grid. Here we do the same from search tab but the page is created in a default folder /content/drafts/admin. Demo Video available for download

Prerequisites

If you are new to CQ

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

Solution - 1

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

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

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

                         newpage.js

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

(function(){
    var INTERVAL = setInterval(function(){
        var grid = CQ.Ext.getCmp("cq-siteadminsearchpanel-grid");
 
        if(grid){
            clearInterval(INTERVAL);
 
            var toolBar = grid.getTopToolbar();
            var createInPath = "/content/drafts/admin";
 
            toolBar.insertButton(1, new CQ.Ext.Toolbar.Button({
                text: 'New Page',
                cls: "cq-siteadmin-create",
                iconCls: "cq-siteadmin-create-icon",
                handler : function(){
                    var dialog = CQ.wcm.Page.getCreatePageDialog(createInPath);
                    dialog.show();
                }
            }));
 
            grid.doLayout();
        }
    }, 250);
})();

Solution - 2

Not preferred as it doesn't minify /libs/cq/ui/widgets/source/widgets/wcm/SiteAdmin.Actions.js

1) Using the overlay architecture of CQ we extend ootb /libs/cq/ui/widgets/source/widgets/wcm/SiteAdmin.Actions.js

2) To extend the default SiteAdmin actions, create file /apps/cq/ui/widgets/source/widgets/wcm/SiteAdmin.Actions.js and add the following code (Note: Adding a button to the grid toolbar is also possible by overlaying /libs/wcm/core/content/siteadmin/tabs/searchpanel node, but we'll not be discussing about it here )

Here we execute the default Site Admin actions js file and add a button to search panel grid top tool bar. In the button handler we execute ootb New Page dialog function.

$.getScript("/libs/cq/ui/widgets/source/widgets/wcm/SiteAdmin.Actions.js", function(){
    var INTERVAL = setInterval(function(){
        var grid = CQ.Ext.getCmp("cq-siteadminsearchpanel-grid");

        if(grid){
            clearInterval(INTERVAL);

            var toolBar = grid.getTopToolbar();
            var createInPath = "/content/drafts/admin";

            toolBar.insertButton(1, new CQ.Ext.Toolbar.Button({
                text: 'New Page',
                cls: "cq-siteadmin-create",
                iconCls: "cq-siteadmin-create-icon",
                handler : function(){
                    var dialog = CQ.wcm.Page.getCreatePageDialog(createInPath);
                    dialog.show();
                }
            }));

            grid.doLayout();
        }
    }, 250);
});