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. Source code and video are available for download
Prerequisites
If you are new to CQ
1) Read this post on how to create a sample page component
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.
3) Here is the path in CRX
![]()
Solution
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);
});
3) Here is the path in CRX
